CSS 知识总结

本文将以问答形式对 CSS 知识做一个总结。

CSS 基础知识

CSS 的全称是什么？

Cascading Style Sheets.

CSS 有几种引入方式？

1. 内联样式

   <h1 style="color:red;">这是内联样式</h1>

2. 内部样式

   <style>
     h1 {
       color:red;
     }
   </style>
   
   <h1>这是内部样式</h1>

3. 外联样式

   /* 用 link 标签引入样式表 */
   <link rel="stylesheet" type="text/css" href="index.css">
   
   /* 用 @import 引入样式表 */
   <style>
     @import url("index.css")
     @import "index.css"
   </style>

<link> 标签和 @import 有什么区别？

1. link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
2. link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
3. link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
4. link支持使用Javascript控制DOM去改变样式；而@import不支持。

什么是相对路径和绝对路径？

• 相对路径是相对于文件本身的 URL。
• 绝对路径是相对于根节点的 URL。
• html 中引入资源的相对路径与网页的 URL 有关，而 css 中则与 css 资源本身 URL 有关。但使用绝对路径时，不管是在 html 中，还是 css 中，都只与网页 URL 的根路径有关。

CSS 选择器

class 和 id 的使用场景？

• class用于主区块里面的详细内容，同一个class可以重复出现，一个标签可以有几个不同的class。
• id多使用于主要块级元素，id一个页面中只能出现一次，有些独一无二元素也可用id。

css 选择器常见的有几种？

1. 基础选择器
2. 组合选择器
3. 属性选择器
4. 伪类选择器
5. 伪元素选择器

选择器的优先级是怎样的？对于复杂场景如何计算优先级？

选择器的优先级从高到低分别是：

1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2. 作为style属性写在元素标签上的内联样式
3. id选择器
4. 类选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通配符选择器
9. 浏览器自定义

复杂场景优先级计算规则是：

1. 行内样式计数1000；
2. id选择器计数100；
3. 类、属性、伪类选择器计数10；
4. 标签、伪元素选择器计数1；
5. 通过以上计数计算选择前的优先级结果，数字越大优先级越高。

a:link a:hover a:active a:visited 的顺序是怎样的？为什么？

a:link -> a:visited -> a:hover -> a:active

• 鼠标经过的“未访问链接”同时拥有 a:link、a:hover、a:active 三种属性，后面的属性会覆盖前面的属性定义，所以 a:link 必须放在 a:hover 的前面，a:hover必须放在a:active` 的前面。
• 鼠标经过的“已访问链接”同时拥有 a:visited、a:hover、a:link 三种属性，后面的属性会覆盖前面的属性定义，此时 a:visted 和 a:link 必须放在 a:hover的前面。

列出你知道的伪类选择器

• E:first-child: 匹配作为长子（第一个子女）的元素E
• E:link: 匹配所有未被点击的链接
• E:visited: 匹配所有已被点击的链接
• E:active: 匹配鼠标已经其上按下、还没有释放的E元素
• E:hover: 匹配鼠标悬停其上的E元素
• E:focus: 匹配获得当前焦点的E元素
• E:lang(c): 匹配lang属性等于c的E元素
• E:enabled: 匹配表单中可用的元素
• E:disabled: 匹配表单中禁用的元素
• E:checked: 匹配表单中被选中的radio或checkbox元素
• E::selection: 匹配用户当前选中的元素
• E:root: 匹配文档的根元素，对于HTML文档，就是HTML元素
• E:nth-child(n): 匹配其父元素的第n个子元素，第一个编号为1
• E:nth-last-child(n): 匹配其父元素的倒数第n个子元素，第一个编号为1
• E:nth-of-type(n): 与:nth-child()作用类似，但是仅匹配使用同种标签的元素
• E:nth-last-of-type(n): 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
• E:last-child: 匹配父元素的最后一个子元素，等同于:nth-last-child(1)
• E:first-of-type: 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
• E:last-of-type: 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
• E:only-child: 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
• E:only-of-type: 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
• E:empty: 匹配一个不包含任何子元素的元素，文本节点也被看作子元素
• E:not(selector): 匹配不符合当前选择器的任何元素

div:first-child div:first-of-type div :first-child div :first-of-type 的作用和区别（注意空格的作用）

div:first-child 和 div :first-child 的对比

div:first-child 选中的是页面中所有 <div> 中的第一个 <div> 元素。而 div :first-child 选中的是所有 <div> 内的第一个子元素，无论这个子元素是什么。
演示

div:first-of-type 和 div :first-of-type 的对比

div:first-of-type 选中的是页面中所有 <div> 中的第一个 <div> 元素。而 div :first-of-type 选中的是所有 <div> 内的所有子元素类型的第一个子元素，比如这个 <div> 里有5个 <p> 标签和15个 <span> 标签，那么就选中 <p> 标签中的第一个和 <span> 标签中的第一个。
演示

CSS 常见属性

块级元素和行内元素分别有哪些？列出4条以上的特性区别

块级元素

div h1 h2 h3 h4 h5 h6 p hr
form ul dl ol pre table
li dd dt tr td th

行内元素

em strong span a br img
button iput label select textarea
code script

特性区别：

• 块级(block-level); 行内(内联、inline-level)
• 块级可以包含块级和行内，行内只能包含文本和行内
• 块级占据一整行空间，行内占据自身宽度空间
• 宽高设置、内外边距的差异

什么是 CSS 继承？哪些属性能继承，哪些不能继承？

CSS继承指父元素的CSS属性被其子孙元素继承。

不可继承的：

display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。

所有元素可继承：

visibility和cursor。

内联元素可继承：

letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。

终端块状元素可继承：

text-indent和text-align。

列表元素可继承：

list-style、list-style-type、list-style-position、list-style-image。

表格元素可继承：

border-collapse。

如何让块级元素水平居中？如何让行内元素水平居中？

块级元素水平居中：

1. 设一个固定的宽度
2. margin: 0 auto;

行内元素水平居中：对其父元素设置 text-align: center; 即可

px、em、rem 有什么区别？

• px 是像素单位，也是一个固定值单位。
• em 是倍数单位，根据其父元素的大小计算其大小，是一个不固定值的单位。
• rem 是倍数单位，根据 HTML 文档的根元素 <html> 的大小计算其大小，是一个不固定值的单位。

IE 盒模型和 W3C 盒模型有什么区别？

IE盒模型和W3C盒模型的区别是宽和高的组成：

• IE 盒模型的宽和高由 border 、padding 、content 三个元素相加而成；
• W3C 盒模型的宽和高就是 content 的宽和高，不受 border 和 padding 影响。

line-height: 2 和 line-height: 200% 有什么区别？

• line-height: 2 是以元素本身的字体大小计算行高值，随着该元素字体大小的变化而变化，自适应性更好；
• line-height: 200% 是以父元素的字体大小计算行高值，不会跟随本元素变化，当本元素的字体过大时，由于行高不变文字会挤在一起，自适应性差。

inline-block 有什么特性？如何去除缝隙？高度不一样的 inline-block 元素如何顶端对齐?

inline-block 既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)，又呈现 block 特性 (可设置宽高，内外边距)。

去除缝隙的方法：

• 在两个 inline-block 间不加空白或折行；
• 如果有空白或折行，将父元素的 font-size 设为 0，再对 inline-block 元素分别设置 font-size 值。

顶端对齐：给父元素设置 vertical-align: top

让一个元素“看不见”有几种方式？有什么区别？

• opacity: 0;: 透明度为0，整体透明，但仍然占用位置；
• visibility: hidden;: 和 opacity:0 类似；
• display:none;: 消失，不占用位置；
• background-color: rgba(0，0，0，0); 背景色透明；

浮动定位BFC边距合并

浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?

浮动元素的特征

1. 浮动元素会脱离正常文档流，文档流中的其他正常块级元素将不再感知浮动元素的存在；
2. 浮动元素会向左或向右移动，直到碰到父元素的边框或其他的浮动元素为止。

对父容器的影响

浮动元素会引起父容器的高度塌陷问题。

对其他浮动元素的影响

当有多个元素浮动时，浮动元素会按浮动方向的顺序依次排列，当父容器的宽度不够容纳所有的浮动元素时，超出父容器宽度的浮动元素将被挤下去，如果某个浮动元素的高度超出其他浮动元素，被挤下去的浮动元素会被这个更高的浮动元素卡住。

对普通元素的影响

由于浮动元素会脱离正常的文档流，其他的普通元素将不再感知浮动元素的存在，原本排列在浮动元素后面的元素将占据浮动元素所占的位置，浮动元素也将覆盖在普通元素的上方。

对文字的影响

与普通元素不同，文字仍然能够感知到浮动元素的存在，所以文字将围绕浮动元素排列。

清除浮动指什么? 如何清除浮动?

清除浮动指通过 clear 属性解决浮动元素的父容器的高度塌陷问题。

清除浮动的方法：

1. 在父容器最后添加一个空的
   ，对其使用clear属性，清除浮动；
2. 创建BFC，由于BFC包含浮动的特性，可以达到清除浮动的效果。

两种方法各有优缺点，其中创建BFC又有很多种方法，每一种方法也有各自的优缺点，所以在清除浮动时一定要谨慎选择最适合的一种。

有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？

定位方式分为相对定位、绝对定位和固定定位。

• relative相对定位，是相对于自身在文档流中的位置，根据top/right/bottom/left值进行偏移，以实现定位，参考点是元素自身，使用场景是该元素需要保留在文档流中的位置时。
• absolute绝对定位，绝对定位元素会脱离文档流，所以其参考点是离它最近的position值不为static的上级元素，如果找不到，最后将参考html根元素，然后根据其top/right/bottom/left值进行偏移实现定位，使用场景是需要根据其父元素确定位置时。
• fixed固定定位，是以浏览器窗口为参考点，通过top/right/bottom/left值偏移确定位置的定位方式，使用场景是需要某个元素在浏览器窗口内固定位置不动时。

z-index 有什么作用? 如何使用?

z-index属性可以控制元素的叠放顺序，z-index值越高，元素的位置越靠近使用者。

position:relative 和负 margin 都可以使元素位置发生偏移?二者有什么区别

• relative 的偏移只是视觉效果上的偏移，元素本身的位置并没有发生变化，对其他元素的位置也不会产生影响。
• 负 margin 会使元素的位置发生变化，对其他元素的位置也会产生影响。

BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明

BFC全称 Block formatting contexts ，即块级格式化上下文。

生成BFC可以通过以下几种方式：

1. 根元素；
2. float属性不为none；
3. display属性为inline-block、table-cell、table-caption之一；
4. overflow属性不为visible
5. position属性为relative、absolute、fixed之一。

BFC的作用：

1. BFC会阻止垂直外边距（margin-top、margin-bottom）折叠；
2. BFC不会重叠浮动元素；
3. BFC可以包含浮动。

在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？

当两个元素的垂直外边距相遇时，会合并成一个外边距。

合并后的外边距的大小取合并前两个元素的垂直外边距较大的一个。

根据BFC阻止垂直外边距折叠的特性，将相邻元素放在不同的BFC中，即可防止相邻元素外边距合并。