css的盒子模型以及其他相关知识

1、css的盒子模型?

盒子模型分为两种 一种是W3C标准盒子模型 另一种是IE盒子模型 (ie6版本以下)

1. W3C标准盒子模型是 元素所占空间大小 = 内容+padding + border+margin 对应的是box-sizing：content-box
2. ie盒子模型元素所占空间大小 = 内容 + margin 其中内容包含了padding border以及内容 对应的是box-sizing：border-box

2、CSS选择器有哪些，哪些可以继承。

1. 标签选择器
2. class选择器
3. id选择器
4. 后代选择器
5. 子代选择器
6. 交际选择器
7. 并集选择器

可以继承的属性有 font-开头的 text-开头的 line-开头的；

不可以继承的样式有 width margin padding border background等等

3、CSS优先级如何计算

1. 标签选择器权重为1
2. class选择器权重为10
3. id选择器权重为100
4. important是最大权限

5、如何剧中div？

1. 给body设置text-align：center 缺点要将div元素转换成行内元素，并且会影响到body内的很多元素；

    body {
               text-align: center;
           }
           div {
               background-color: pink;
           }
   

2. 给盒子一个固定定位 缺点就是要写position属性

    div {
               position: fixed;
               left: 50%;
               margin-left: -150px；
               background-color: pink;
           }
   

3. 直接给div元素一个margin：auto；缺点要给元素设置宽高。

   div {
               margin: 0 auto;
               width: 300px;
               height: 300px;
               background-color: pink;
           }
   

4. 通过单行flex布局来实践 ，缺点就是要支持h5属性

    div {
               display: flex;
               justify-content: center;
               align-items: center;
           }
   

6、如何居中一个浮动的元素。

居中一个浮动元素（套一个大盒子给它margin:0px auto。）

也可以给给他一个定位

 div {
            position: relative;
            left: 50%;
            margin-left: -150px;
            float: left;
            width: 300px;
            height: 300px;
            background-color: pink;
        }

5、display属性有哪些值分别有什么作用？

display：none；可以隐藏一个元素。

display：block：可以显示一个元素， 也可以把行内元素装换成块级元素

display:inline-block;装换成行内快元素。

display：iniline：把其他元素转成行内元素；