css
1、盒模型
页面渲染时,dom元素才有的 布局模型。可以通过 box-sizing
进行设置。根据计算宽高的区域可分为:
-
content-box
(W3C标准盒模型) -
border-box
(IE盒模型 width包含padding和border) -
padding-box
(padding计算入width内)
ie8+浏览器支持content-box和border-box;
ff则支持全部三个值。
-webkit-box-sizing: 100px; // for ios-safari, android
-moz-box-sizing:100px; //for ff
box-sizing:100px; //for other
<style type="text/css">
.content-box{
box-sizing:content-box;
-moz-box-sizing:content-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #E6A43F;
background: blue;
}
.padding-box{
box-sizing:padding-box;
-moz-box-sizing:padding-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #186645;
background: red;
}
.border-box{
box-sizing:border-box;
-moz-box-sizing:border-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #3DA3EF;
background: yellow;
}
</style>
2、BFC
块儿级格式化上下文
,是一个独立的渲染区域,让处于BFC内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响
IE下为Layout,可通过zoom:1触发
功能
- 使 BFC 内部浮动元素不会到处乱跑;
-
和浮动元素产生边界。
方法
:- overflow: auto 让浮动的内容和周围的内容登高
- overflow: hidden 外边距塌陷
- display: flow-root 它可以创建无副作用的BFC
`给 <div> display: flow-root 属性后,<div> 中的所有内容都会参与BFC,浮动的内容不会从底部溢出。`
触发条件:
- 根元素(<html>)
- 浮动元素(元素的 float 不是 none)
- 绝对定位元素(元素的 position 为 absolute 或 fixed)
- 行内块元素(元素的 display 为 inline-block)
- 表格单元格(元素的 display为 table-cell,HTML表格单元格默认为该值)
- 表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值)
- 匿名表格单元格元素(元素的 display为 table、table-row、 table-row-group、table-header-group、table-
- footer-group(分别是HTML table、row、tbody、thead、tfoot的默认属性)或 inline-table)
- overflow 值不为 visible 的块元素
- display 值为 flow-root 的元素
- contain 值为 layout、content或 paint 的元素
- 弹性元素(display为 flex 或 inline-flex元素的直接子元素)
- 网格元素(display为 grid 或 inline-grid 元素的直接子元素)
- 多列容器(元素的 column-count 或 column-width 不为 auto,包括 column-count 为 1)
- column-span 为 all 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中(标准变更,Chrome bug)。
html
float!=none
position = absolute || fixed
display = inline-block || flow-root || table、table-row、 table-row-group、table-header-group、table-
应用场景
- 阻止margin重叠
- 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中)
- 自适应两栏布局
- 可以阻止元素被浮动元素覆盖
层叠上下文
层叠上下文
层叠等级
层叠顺序
z-index
- 普通元素的层叠等级优先由其所在的层叠上下文决定。
- 层叠等级的比较只有在当前层叠上下文元素中才有意义。不同层叠上下文中比较层叠等级是没有意义的。
如何产生层叠上下文
- HTML中的根元素<html></html>本身j就具有层叠上下文,称为“根层叠上下文”。
- 普通元素设置position属性为非static值并设置z-index属性为具体数值,产生层叠上下文。
-
CSS3中的新属性也可以产生层叠上下文。
- 父元素的display属性值为flex|inline-flex,子元素z-index属性值不为auto的时候,子元素为层叠上下文元素;
- 元素的opacity属性值不是1;
- 元素的transform属性值不是none;
- 元素mix-blend-mode属性值不是normal`;
- 元素的filter属性值不是none;
- 元素的isolation属性值是isolate;
- will-change指定的属性值为上面任意一个;
- 元素的-webkit-overflow-scrolling属性值设置为touch。
4、居中布局
-
水平居中
- 行内元素:text-align: center
- 块儿级元素:margin:0 auto
-
absolute + transform
- (1) 绝对定位元素的定位基准点是其有定位元素的祖先元素;
- (2) translate要做偏移,是相对于自身的中心点而言,如果用百分比做单位,参考值就是本身元素的宽度。
- flex + justify-cennter:cennter
-
垂直居中
- ling-heigth:height
- absolute + transform
- flex + align-item:center
.center {
position:absolute;
top:50%;
left:50%;
width:200px;
height:200px;
margin-top:-200/2px;
margin-left:-200/2px;
}
.center {
position:relative;
top:50%;
left:50%;
width:200px;
height:200px;
background:red;
transform:translate(-50%,-50%); /* 可以做很多动画效果,不兼容 */
transform-origin:50% 50%; /* 设置旋转元素的基点位置 不兼容*/
}
flex布局解决的一些问题
- 将内容块垂直居中于其父级内部。
- 无论有多少宽度/高度,使容器的所有子容器占用相同数量的可用宽度/高度。
- 使多列布局中的所有列采用相同的高度,即使它们包含不同的内容量。
section {
display: flex; /* 子元素在section 中水平平均分布*/
}
布局方向
- flex-direction: row(默认) || column排布方向
- flex-wrap: wrap; 自动换行 子元素添加高度 flex: 200px;
flex-direction: row;
flex-wrap: wrap;
等价于
flex-flow: row wrap;
还有好多。。。
5、选择器优先级
- !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
- 选择器从右向左解析
6、清浮动,防止父级塌陷
-
通过增加尾元素清除浮动
- :after/ <br/>:clear:both
- 创建父级BFC
如:display: flow-root
- 父级设置高度
link与@import的区别
- link是XHTML标签
- link标签除了可以加载css外,还可以做很多其他的事情,如定义RSS,定义rel连接属性等,@import只能加载CSS。
- 加载顺序的差别:当一个页面被加载的时候,link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再加载。所以有时候浏览@import加载CSS的页面时会没有样式(就是闪烁),网速慢的时候还挺明显。
- 使用dom控制样式时的差别。当时用JavaScript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的
- @import可以在css中再次引入其他样式表
8、css预处理器(sass/less/postcss)
css预处理器的原理:是将类css语言通过webpack编译 转换成浏览器可读的真正css,在这层编译之上,便可赋予css更多强大的功能,常用功能:
- 嵌套
- 定义变量
- 循环语句
- 条件语句
- 自动前缀
- 单位转换
- minxin复用
css动画
-
transition:过渡动画
- transition-property:属性
- transition-duration:间隔
- transition-timing-function:曲线
- transition-delay:延迟
-
animation/keyframes
- animation-name:动画名称,对应@keyframes
- animation-timing-function:曲线
- animation-delay:延迟
-
animation-iteration-count:次数
- infinite:循环动画
-
animation-direction:方向
- alternate:反向播放
-
animation-fill-mode:静止模式
- forwards:停止时保留最后一帧
- backwards:停止时回到第一帧
- both:同时运用
- 常用钩子:animationend
-
动画属性:尽可能的使用动画属性进行动画,能拥有较好的性能表现
- translate
- scale
- rotate
- skew
- opacity
- color
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。