学习 - css - 《后端爬坑之路》

介绍一下CSS的盒子模型
line-height和heigh区别
CSS选择符有哪些？哪些属性可以继承？
CSS优先级算法如何计算？
用CSS画一个三角形
一个盒子不给宽度和高度如何水平垂直居中？
display有哪些值？说明他们的作用。
对BFC规范(块级格式化上下文：block formatting context)的理解？

介绍一下CSS的盒子模型

CSS的盒子模型有哪些：标准盒子模型、IE盒子模型
CSS的盒子模型区别：
    标准盒子模型：margin、border、padding、content
    IE盒子模型 ：margin、content（ border +  padding  + content ）
通过CSS如何转换盒子模型：
    box-sizing: content-box;    /*标准盒子模型*/
    box-sizing: border-box;      /*IE盒子模型*/

line-height和heigh区别

line-height是每一行文字的高，如果文字换行则整个盒子高度会增大（行数*行高）。 height是一个死值，就是这个盒子的高度。

CSS选择符有哪些？哪些属性可以继承？

CSS选择符：
    通配（*）
    id选择器（#）
    类选择器（.）
    标签选择器（div、p、h1...）
    相邻选择器(+)
    后代选择器(ul li)
    子元素选择器（ > ）
    属性选择器(a[href])

CSS属性哪些可以继承：
        文字系列：font-size、color、line-height、text-align...
***不可继承属性：border、padding、margin...

CSS优先级算法如何计算？

优先级比较：!important > 内联样式 > id > class > 标签 > 通配 

CSS权重计算：
第一：内联样式（style）  权重值:1000
第二：id选择器                   权重值:100
第三：类选择器                   权重值:10
第四：标签&伪元素选择器   权重值:1
第五：通配、>、+         权重值:0

用CSS画一个三角形

用边框画（border）,例如：
{
        width: 0;
        height: 0;

        border-left:100px solid transparent;
        border-right:100px solid transparent;
        border-top:100px solid transparent;
        border-bottom:100px solid #ccc;
}

一个盒子不给宽度和高度如何水平垂直居中？

<div class='container'>
    <div class='main'>main</div>
</div>
// 方式一
.container{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 300px;
        height: 300px;
        border:5px solid #ccc;
}
.main{
        background: red;
}
// 方式二
.container{
        position: relative;
        width: 300px;
        height: 300px;
        border:5px solid #ccc;
}
.main{
        position: absolute;
        left:50%;
        top:50%;
        background: red;
        transform: translate(-50%,-50%);
}

display有哪些值？说明他们的作用。

none 隐藏元素
block 把某某元素转换成块元素
inline 把某某元素转换成内联元素
inline-block 把某某元素转换成行内块元素
对BFC规范(块级格式化上下文：block formatting context)的理解？
``` BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

了解BFC ：块级格式化上下文。
BFC的原则：如果一个元素具有BFC，那么内部元素再怎么弄，都不会影响到外面的元素。
如何触发BFC： float的值非none overflow的值非visible display的值为：inline-block、table-cell… position的值为:absoute、fixed
BFC布局规则：
1. 内部的块会在垂直方向上一个接一个的放置
2. 垂直方向上的距离里由margin决定，在同一个BFC里的两个相邻块会重叠（大的 margin值决定）
3. 每个块的左外边框紧贴父级的左边框
4. 开启了BFC的块和浮动元素不会重叠会挨着浮动元素显示
5. BFC是一个独立的容器，BFC里面的子元素跟外面的子元素互不影响
6. 计算BFC高度的时候，浮动子元素也参与运算
```
<a name="YH2Kv"></a>
#### 清除浮动有哪些方式？
```
触发BFC
多创建一个盒子，添加样式：clear: both;

after方式 ul:after{

     content: '';
     display: block;
     clear: both;

}

<a name="SIOLY"></a>
#### 在网页中的应该使用奇数还是偶数的字体？为什么呢？
偶数 : 让文字在浏览器上表现更好看。
<a name="bFSm4"></a>
#### position有哪些值？分别是根据什么定位的？

static [默认] 没有定位 fixed 固定定位，相对于浏览器窗口进行定位。 relative 相对于自身定位，不脱离文档流。 absolute 相对于第一个有relative的父元素，脱离文档流。 sticky 粘性

relative和absolute区别

relative不脱离文档流、absolute脱离文档流
relative相对于自身、 absolute相对于第一个有relative的父元素

relative如果有left、right、top、bottom ==》left、top absolute如果有left、right、top、bottom ==》left、right、top、bottom

<a name="LPZZN"></a>
#### 双飞翼布局和圣杯布局
都是为了解决两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。<br />圣杯布局：为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。<br />双飞翼布局：为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。
<a name="IxGgH"></a>
#### css sprite是什么,有什么优缺点

是什么把多个小图标合并成一张大图片。
优缺点优点：减少了http请求的次数，提升了性能。缺点：维护比较差（例如图片位置进行修改或者内容宽高修改）
```
<a name="FZS7H"></a>
#### display: none;与visibility: hidden;的区别
```
占用位置的区别 display: none; 是不占用位置的 visibility: hidden; 虽然隐藏了，但是占用位置
重绘和回流的问题 visibility: hidden; 、 display: none; 产生重绘 display: none; 还会产生一次回流

产生回流一定会造成重绘，但是重绘不一定会造成回流。产生回流的情况：改变元素的位置(left、top…)、显示隐藏元素…. 产生重绘的情况：样式改变、换皮肤

产生回流一定会造成重绘，但是重绘不一定会造成回流。
<a name="EzfnT"></a>
#### opacity 和 rgba区别

共同性：实现透明效果

opacity 取值范围0到1之间，0表示完全透明，1表示不透明
rgba R表示红色，G表示绿色，B表示蓝色，取值可以在正整数或者百分数。A表示透明度取值0到1之间

区别：继承的区别 opacity会继承父元素的opacity属性，而RGBA设置的元素的后代元素不会继承不透明属性。 ```

css