HTML+CSS(知识点总结)
全栈冲冲冲 -HTML
<meta>
标签<video>
标签自定义列表<dl>
(description list)
<dt>
名词1</dt>
(description term)
<dd>
名词1解释1</dd>
(description description)
<dd>
名词1解释2</dd>
<dt>
名词2</dt>
<dd>
名词2解释1</dd>
<dd>
名词2解释2</dd>
</dl>
(不支持 ie8 及 ie8 以下版本的浏览器)
语义标签增强型表单视频和音频Canvas绘图SVG绘图地理定位拖放APIWebWorkerWebStorageWebSocket锚点跳转当前页面a.html: <a href="b.html#aaa">
跳转到b页面aaa处</a>
另一页面b.html: <a name="aaa" id="aaa">aaa</a>
相邻选择器(h1 + p)、子选择器(ul > li)、后代选择器(li a)
选择器优先级!important > 内联 > id选择器 ( #id{}) > class类选择器 (.class{}) = 属性选择器(a[href="xxx"]{}
) = 伪类选择器 (:xxx{}) > 伪元素选择器(::before{}) = 标签选择器(span{}) > 通配符选择器(*{}) > 继承父元素 > 浏览器默认
不可继承的样式: width height 、margin border padding ;
将超出的文本内容替换成省略号graph TD
设置宽度 width --> 设置文本不换行 white-space:nowrap-->隐藏溢出内容 overflow:hidden-->省略溢出内容 text-overflow:ellipsis
CSS3 新特性颜色:新增 RGBA、HSLA文字阴影 text-shadow边框圆角 border-radius、边框阴影 box-shadow盒子模型 box-sizing背景 background-size设置背景图片尺寸 background-origin设置背景图片原点 background-clip设置背景图片裁剪区域,以“,”分隔可以设置多背景,用于自适应布局渐变:linear-gradient、radial-gradient过渡:transition可实现动画自定义动画在CSS3中唯一引入的伪元素是::selection多媒体查询、多栏布局border-image2D、3D转换display: none
、visibility: hidden
和opacity: 0
display: none;
visibility: hidden;
opacity: 0;
是否存在 × √ 是否重绘 √ × 是否重排 √ × 能否复原子元素 × √ × 是否支持transition × √ 能否触发自身绑定事件 × √ 是否影响被遮挡元素触发事件 × √ 布局在网页中使用偶数的字体偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体(中易宋体)从 Vista 开始只提供 12、14、16 px 这三个大小的点阵,而 13、15、17 px时用的是小一号的点。(即每个字占的空间大了 1 px,但点阵没变),于是略显稀疏
三栏布局绝对定位左右浮动table-cell圣杯布局双飞翼布局Flex布局Grid布局
清除浮动在最后一个浮动标签后新增一个标签(不推荐)
缺点:添加无意义标签,语义化差
clear:both;
隐藏父元素溢出内容(不推荐)
缺点:内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素
overflow:hidden/auto; // 父元素
*zoom: 1; // IE6 中需要触发 hasLayout,只有IE6-IE7执行
使用:after伪元素清除浮动(推荐).父元素:after {
content: "";
display: block;
clear: both;
}
.父元素 {
*zoom: 1;
}
使用before和after双伪元素(最推荐).父元素:before,
.父元素:after {
content: "";
display: table;
}
.父元素:after {
clear: both;
}
.父元素 {
*zoom: 1;
}
水平垂直居中块级元素
margin: 0 auto;
行内元素
text-align: center;
单行
line-height = height;
多行
display:table-cell;
vertical-align: middle;
使用 flex 布局
display:flex;
justify-content: center;
align-items: center;
使用绝对定位
position:absolute;
(1)
left:50%;
top:50%;
transform:translateX(-50%);
transform:translateY(-50%);
(2)
margin:auto;
top:0;
right:0;
bottom:0;
left:0;
(遇到记得不太清楚的概念大家也可以上菜鸟查查~)