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:"";
    claer: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 作为度量）