CSS知识点总结

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

image.png

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 默认值线轴沾满交叉轴