一、CSS选择器及其优先级
| 选择器 | 格式 | 优先级权重 |
|---|---|---|
| id选择器 | #id | 100 |
| 类选择器 | .box | 10 |
| 属性选择器 | input[type="text"] | 10 |
| 伪类选择器 | p:first-child | 10 |
| 标签选择器 | div | 1 |
| 伪元素选择器 | p::after | 1 |
| 相邻兄弟选择器 | h1+p | 0 |
| 通用兄弟选择器 | h1~p | 0 |
| 子代选择器 | ul>li | 0 |
| 后代选择器 | li a | 0 |
| 通配符选择器 | * | 0 |
优先级
!important > 内联样式 > id选择器 > 类、伪类、属性选择器 > 标签、伪元素选择器
权重：
!important: 10000
内联样式: 1000
id选择器: 100
类、伪类、属性选择器: 10
标签、伪元素选择器: 1
相邻兄弟选择器(+)、通用兄弟选择器(~)、子选择器(>)、后代选择器、通配符选择器(*): 0
二、CSS display属性值及其作用
| 属性值 | 作用 |
|---|---|
| none | 元素不显示，并且会从文档流中移除。 |
| block | 块元素。默认宽度为父元素宽度，可设置宽高，换行显示。 |
| inline | 行内元素。默认宽度为内容宽度，不可设置宽高，同行显示。 |
| inline-block | 行内块元素。默认宽度为内容宽度，可设置宽高，同行显示。 |
| list-item | 像块元素一样显示，并添加样式列表标记。 |
| table | 元素作为块级表格来显示。 |
| inherit | 规定应该从父元素继承display属性的值。 |
三、CSS display的block、inline和inline-block的区别
- block：会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父级宽度。可以设置width、height、margin和padding属性。
- inline：元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化，设置宽高不生效。但可以设置水平方向的margin和padding属性，不能设置垂直方向的margin和padding属性。
- inline-block：既有block的宽度高度特性又具有inline的同行特性。
- 行内元素：
- 设置宽高属性无效。
- 可以设置水平方向的margin和padding属性，不能设置垂直方向的margin和padding属性。
- 不会自动换行。
- 块级元素：
- 可以设置width、height、margin和padding属性。
- 可以自动换行。
- 多个块状，默认排列从上到下。
四、CSS隐藏元素的方法有哪些？
- display: none; 渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
- visibility: hidden; 元素在页面中仍占据空间，但是不会响应绑定的监听事件。
- opacity: 0; 将元素的透明度设置为0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
- position: absolute; 通过绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
- z-index: 负值; 使其它元素遮盖住该元素，以此来实现隐藏。
- clip/clip-path 使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
- transform: scale(0,0); 将元素缩放为0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
五、CSS display: none;与visibility: hidden;的区别
（1）在渲染树中：
- display: none; 会让元素完全从渲染树中消失，渲染时不会占据任何空间。
- visibility: hidden; 不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见。
（2）是否继承属性
- display: none; 是非继承属性，子节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示。
- visibility: hidden; 是继承属性，子节点消失是由于继承了'hidden'，通过设置visibility: visible;可以让子孙节点显示。
（3）修改常规文档流中元素的display通常会造成文档的重排，但是修改visibility属性只会造成本元素的重绘。
（4）如果使用读屏器，设置display: none;的内容不会被读取，设置的visibility: hidden;内容会被读取。
六、CSS对盒模型的理解
CSS 中的盒子模型包括 IE 盒子模型和标准的 W3C 盒子模型
盒模型是由四个部分组成：margin、border、padding和content。
标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同。
- 标准盒模型的width和height属性的范围只包含了content
- IE盒模型的width和height属性的范围包含了border、padding和content
可以通过修改元素的border-sizing属性来改变元素的盒类型
- border-sizing: content-box; 表示标准盒模型（默认值）
- border-sizing: border-box; 表示IE盒模型（怪异盒模型）
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。