CSS基础知识点-01

【01】标准CSS盒模型和IE盒模型的区别

盒模型的区别在于设置width和height时，所对应的范围不同。标准盒模型宽高属性的范围只包含content，而IE盒模型的宽高属性范围包含了border、padding和content。

一般来说，我们可以通过修改元素的box-sizing属性来改变元素的盒模型。

拓展1：有两种盒子模型：IE盒模型（border-box）、W3C标准盒模型（content-box）

拓展2：盒模型有四部分构成：分为内容content、内边距padding、边框border和外边距margin

拓展3：在ie8+浏览器中使用哪个盒模型可以由box-sizing（CSS新增的属性）控制，默认值为content-box，即标准盒模型；如果将box-sizing设为border-box则启用IE盒模型。如果在ie6，7，8中DOCTYPE缺失会将盒子模型解释为IE盒子模型。若在页面中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C标准盒模型。

【02】::before和:after中双冒号和单冒号的区别

CSS3规定使用单冒号表示伪类，双冒号表示伪元素。但有时会发现，伪元素使用了单个冒号，这是由于旧版本的W3C规范并未对此进行特别区分，因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。

【03】CSS中哪些属性可以继承

属性在定义中会给出该属性是否具有继承性，一个具有继承性的属性会在没有指定值的时候，使用其父元素同属性的值来作为自己的值。

当属性不是继承属性时，可以通过将其值设置为inherit来使其继承父元素同名属性的值。inherit关键字用于显式地指定继承性，可用于任何继承性/非继承性属性。

如下所示，为有继承性的属性。

1、字体相关属性：如font、font-family、font-weight、font-size、font-style等
2、文本相关属性：如color、text-indent、text-align等
3、表格布局属性：如caption-side、border-collapse、empty-cells
4、列表属性：list-style-type、list-style-image、list-style-position、list-style
5、光标属性：cursor
6、元素可见性：visibility
7、还有一些不常用的：speak，page，设置嵌套引用的引号类型quotes等属性

【04】伪类和伪元素的区别

CSS引入伪类和伪元素专门用来修饰不在文档树中的部分，即格式化文档树以外的信息。

什么是伪类？

伪类没有单独的标签，只有触发特殊条件时才能看到，存在于DOM文档树，逻辑上存在，但在文档树中却无须标识的“幽灵”分类。

伪类本质上是为了弥补常规CSS选择器的不足，以便获取更多的信息。比如，当用户悬停在指定元素时，可以通过:hover为该元素添加样式。

什么是伪元素？

伪元素创建了一个有内容的虚拟容器。伪元素是虚拟元素，仅逻辑上存在，本身并不存在于DOM文档树中（元素结构存在，可以被CSS正常操作，但没有html结构）。比如通过::before在元素前增加文本，并为其添加样式，用户虽可以看到这些文本，但这些文本实际上是不在文档树中的。

一个标签诞生时，其逻辑的最前面位置和最后面位置，各有一个伪元素，平常看不到，可以通过伪元素选择器选中并修改。

伪元素可当作正常inline元素来操作。content属性是伪元素独有的，可以修改伪元素的内容。

区别？

根本区别：是否创造了新的元素，新创造的元素即为 "伪元素" 。

伪类一般匹配元素的一些特殊状态，，如hover、link等，而伪元素一般匹配的特殊的位置，比如after、before等。

注意

CSS3规定伪元素使用两个冒号，伪类使用一个冒号，用以区分伪类和伪元素。

但有时会发现，伪元素使用了单个冒号，这是由于旧版本的W3C规范并未对此进行特别区分，因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。

【05】CSS选择器的种类

id选择器
类选择器
标签选择器（div,h1,p）
后代选择器（h1 p）
相邻后代选择器（子）选择器（ul>li）
兄弟选择器（li~a）
相邻兄弟选择器（li+a）
属性选择器（a[rel="external"]）
伪类选择器（a:hover,li:nth-child）	
伪元素选择器（::before、::after）
通配符选择器（*）

【06】CSS优先级算法如何计算

权重越大，优先级越高。

相同权重的声明，根据样式的引入顺序，后声明的优先级高。

【07】关于伪类LVHA的解释

a标签有四种状态，分别是链接访问前、链接访问后、鼠标滑过、激活。

a标签的四种状态分别对应四种伪类：:link、:visited、:hover、:active。

当链接未访问时

当鼠标划过a链接时，满足:link和:hover两种状态，要改变a标签的颜色，就必须将:hover伪类在:link伪类后面声明。

当鼠标点击激活a链接时，同时满足:link、:hover、:active三种状态，要显示a标签激活时的样式，必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序

当链接访问过时：情况基本同上，只不过需要将:link换成:visited

注意：这个顺序能不能变？可以，但也只有:link和:visited可以交换位置，因为一个链接要么访问过要么没访问过，不可能同时满足，也就不存在覆盖的问题。

a:link { color: red; }
a:visited { color: green; }
a:hover { color: blue; }
a:active { color: black; }

【08】CSS3新增伪类有哪些

fatherElem:nth-child(n)：选中父元素下的第n个子元素
fatherElem:nth-last-child(n)：作用同上，不过从后开始查找
fatherElem:last-child：选中最后一个子元素
fatherElem:only-child：匹配属于父元素中唯一子元素的元素
elem:nth-of-type(n)：匹配elem类型中的第n个同级兄弟元素
elem:first-of-type：匹配elem类型中的第1个同级兄弟元素，相当于:nth-of-type(1)
elem:last-of-type：匹配elem类型中的最后1个同级兄弟元素
elem:only-of-type：如果父元素中有唯一一个elem类型的子元素，则选中该子元素
elem:empty：匹配不包含子元素和内容的elem类型的元素
elem:target：匹配当前活动的elem元素
fatherElem:not(elem)：匹配非elem类型的每个子元素
:enabled：匹配每个启用的表单元素
:disabled：匹配每个禁用的表单元素
:checked：用于单选按钮和复选框，匹配已被选中的元素，只有opera浏览器支持

【09】如何居中div

（1）水平居中

方法一：给div设置一个宽度，然后添加margin:0 auto。

div {
  width: 200px;
  margin: 0 auto;
}

方法二：利用text-align:center和font-size:0。

.container {
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  font-size: 0;
}

.box {
  display: inline-block;
  width: 500px;
  height: 400px;
  background-color: pink;
}

注意：文本节点默认会占据一些宽度，font-size等于0可以取消这些莫名奇妙的宽度。

（2）水平+垂直居中

方法一：利用绝对定位和margin: auto（未知容器的宽高）

div {
  position: absolute;
  width: 300px;
  height: 300px;
  margin: auto; /*添加top/left/bottom/right都为0后，可以对应方向实现平分*/ 
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: pink; /*方便看效果*/
}

方法二：利用绝对定位和margin: -100px 110px;（已知容器的宽高）

/*确定容器的宽高宽500高300的层设置层的外边距
div{*/
    position: absolute;
    width: 500px;
    height: 300px;
    top: 50%;
    left: 50%;
    margin: -150px -250px;/*外边距为自身宽高的一半*/
   background-color: pink;/*方便看效果*/
}

方法三：利用绝对定位和transform属性（未知容器的宽高）

/*未知容器的宽高，利用`transform`属性*/
div {
  position: absolute;
  width: 500px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: pink; /*方便看效果*/
}

方法四：利用弹性布局

/*利用flex布局实际使用时应考虑兼容性*/
.container {
  display: flex;
  align-items: center; /*垂直居中*/
  justify-content: center; /*水平居中*/
}
.containerdiv {
  width: 100px;
  height: 100px;
  background-color: pink; /*方便看效果*/
}

（3）总结：

1.设置div宽度后，利用margin:0 auto来实现元素的水平居中
2.利用text-align:center和font-size:0来实现元素的水平居中
3.绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心，可以实现水平和垂直方向上的居中
4.绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心，可以实现水平和垂直方向上的居中
5.绝对定位，设置四个方向的值都为0，设置margin:auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中
6.使用弹性布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中

对于宽高不定的元素：

（4）（5）（6）方法，可以实现元素的垂直和水平的居中

【10】display有哪些值

1、block：块级元素。默认宽度为父标签宽度，可设置宽高，换行显示
2、inline：行级元素。默认宽度为内容宽度，不可设置宽高，同行显示
3、inline-block：行级块元素。默认宽度为内容宽度，可设置宽高，同行显示
4、none：元素不显示，并从文档流中移除
5、inherit：规定应该从父元素继承display属性的值
6、table：当前标签作为块级表格来显示
7、list-item：当前标签当作块级列表来显示，并添加样式列表标记