css面试题/ css盒子模型/height 和line-height的比较/css的选择符有哪些/css哪些属性可以继承/css优先级的比较/如何用css花一个三角形/一个盒子不给宽度高度如何水平集

css盒子模型

css的盒子模型有标准盒子模型，IE盒子模型
区别
标准盒子模型：margin、border、padding、content
IE盒子模型; margin/content (border + padding + content)
通过css转换盒子模型
box-size: content-box  //标准模型
box-size：border-box //IE盒子模型

height 和line-height的比较

//height就是死的高度
height就是行高
是每一行文字的高，如果文字换行，整个盒子会变大
line-height: ;

css的选择符有哪些

通配 （*）
id选择器（#）
类选择器（.）
标签选择器（div、p）
后代选择器（ul li）
子元素选择器（>）
伪类选择器 (:active :nth-child(3n+1))

css那些属性可以继承

可继承
font-size: ;
color: ;
line-height: ;
text-align: ;
不可继承
border
padding
margin

css优先级的比较

!important>内联样式>id>class>标签>通配

css权重计算：
第一：!important 最高
第二：内联 权重 1000
第三：id选择器 权重 100
第四：class类选择器 权重 10
第五：标签&伪类 权重 1
第六：通配、> + 权重 1

如何用css花一个三角形

用border来花
    div {
      width: 0;
      height: 0;
      border-left: 100px solid transparent;
      border-right: 100px solid transparent;
      border-top: 100px solid #ccc;
      border-bottom: 100px solid transparent;
    }

一个盒子不给宽度高度如何水平集中

方法1 
    .container{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 300px;
      height: 300px;
      border: 5px solid #ccc;
    }
    .main{
      background: red;
    }
方法2 定位
    .container{
      position: relative;
      width: 300px;
      height: 300px;
      border: 5px solid #ccc;
    }
    .main{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      background: red;
    }

display值

none：元素隐藏
block：显示为块级元素 带有换行符
inline：内联元素，没有换行符
inline-block：行内块元素

BFC，格式化上下文，清除浮动

解决高度塌陷，或者浮动元素被遮盖、或者margin后元素变大，不移动
开启bfc方法：
overflow：hidden

清除浮动
.clearfix::before, 
.clearfix::after {
    content: ''; 
    display: table; 
    clear: both; 
}

position的值，根据什么定位的、relative和absolute的区别

默认是position: static;
相对于自身定位不脱离文档流，position: relative;
相对于父元素或有relative的值的元素 脱离文档流 position: absolute;
相对于浏览器页面 固定定位：position: fixed;
区别：
relative只有 left top
absolute有left，top right buttom