1. 盒模型
可以通过设置box-sizing设置
content-box(标准盒模型)：width==content内容区域宽
border-box(IE盒模型)：width == border宽度+content内容宽度+padding宽度
2.BFC
块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
触发条件：根元素有一下某一个样式则出发bfc
- position :absolute/fixed
- display : inline-block/table
- float
- overflow !== visible
BFC的区域不会与float的元素区域重叠
文字层不会被浮动层覆盖环绕在周围
计算BFC高度时，浮动元素也参与计算
应用：
- 防止margin重叠
- 阻止元素被浮动元素覆盖
- 清除内部浮动（原理是两个div位于同一个bfc区域）
- 自适应两栏布局
3.居中布局
- 水平居中
行内元素：text-aligin:center
块级元素：margin：0 auto;
绝对定位已知宽度:position:absolute;margin-left:-(宽度的一半);left:50%;
绝对定位和transform:position: absolute;left: 50%;transform:translateX(-50%);
弹性布局水平居中：diaplay:flex;justify-content: center； - 垂直居中
1.line-height:height;高度设置和盒子一样高
2.绝对定位和transform:position: absolute;top: 50%;transform:translateY(-50%);
3.弹性布局水平居中：diaplay:flex;algin-items: center；
4.绝对定位已知高度:position:absolute;margin-top:-(高度的一半);top:50%; - 水平垂直居中
1.已知宽高100px
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
2.弹性布局
display:flex;
justify-content:center;
aligin-items:center;
3.css3的transform属性
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
4.margin:auto
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
4.选择器的优先级
1.选择器越具体优先级越大
2.同等优先级写在后面的会覆盖前面的
3.加上！important 优先级最高
4选择器从右向左解析
!important > 行内样式 > #id > .class > tag > * > 继承 > 默认
5.清除浮动解决父级高度塌陷
1.创建一个bfc,例如overflow:hidden（不推荐）
2.用伪类清除浮动
.clearfix::after{
content:"";
clear:both;
display:block;
}
.clearfix{
zoom:1;//兼容IE
}
6.link和import的区别？
@import只能用于加载css,兼容性不好，IE5以上才可以使用，@import只能等页面加载完之后才可以加载css
link当页面解析时，linky引入的css同步解析，link可以使用js动态导入，无兼容问题，还可以定义RSS,REL等作用
7.CSS预处理器（less/sass/styuls）
css预处理器的原理是：通过webpack编译转换成浏览器可读的css,在编译之前我们可以赋予预处理一些强大的功能
- 变量
- 嵌套
- 循环语句
- 条件语句
- 自动前缀
- 单位转换
8.css3动画
- 过渡动画：transition
- transition-proterty:设置过渡效果的名称 如width
- transition-duration:时间
- transition-timing-function:曲线
- transition-delay:延迟时间
- animation/@keyframes
9.媒体查询
当浏览器屏幕大于1000px时
@media screen and (min-width:1000px){
body{
background:orange;
}
}
当浏览器屏幕小于1000px
@media screen and (max-width:1000px){
body{
background:orange;
}
}
10.rem em
Q:能谈谈rem的作用吗，与em有什么区别？
A: rem 是html 的font-size大小，一般为 16px， em 是父节点的 font-size 大小,一般 rem 方案解决小屏幕适配问题就是通过 JavaScript 动态改变 html 元素的 font-size 大小进行适配（组件使用 rem 作为度量）
11.弹性布局
display:flex/display:inline-flex
有六个属性设置在容器上
- flex-direction 决定主轴方向，row水平起点左侧 row-reverse水平起点右侧 column垂直起点上 column-reverse 垂直起点下
- flex-wrap 可以决定是否换行 nowrap不换行 wrap第一行在上面 wrap-reverse第一行在下面
- flex-flow 是flex-direction和flex-wrap的简写
- justify-content 定义了在主轴的X对齐方式 flex-start 左对齐flex-end 右对齐center居中 space-between两端对齐间隔相等 space-around两侧间隔相等，项目之间比两侧大一倍
- align-items 定义在Y轴的对齐方式 flex-start起点对齐 flex-end 终点对齐 center中间对齐 baseline与第一行文字的基线对齐 strech默认值，如果未设置高度则充满容器
- aligin-content 定义了多根轴线的对齐方式 flex-start 起点对齐 flex-end 终点对齐 center 中间对齐 space-between 两端对齐 轴线之间平均分布 space-around 线轴两侧间隔相等，线轴之间间隔比两侧大一倍 stretch 默认值 线轴沾满交叉轴
