本文介绍了CSS层叠样式表的基本概念，包括选择器（如通配选择器、元素选择器、交集选择器、并集选择器等）、语法规范、样式优先级以及元素的显示模式、盒模型、CSS单位和布局技巧。
概述
CSS：层叠样式表，可以理解为把样式像化妆一样，一层层的涂到Html上。
样式优先级
语法规范
CSS语法由两部分构成：
- 选择器：找到要添加样式的元素。
- 声明块：设置具体的样式（声明块是由一个或多个声明组成的），声明的格式为：属性名：属性值；
选择器
基本的选择器包括：
- 通配选择器
- 元素选择器
- 类选择器
- id选择器
通配选择器
- 作用：可以选中所以的HTML元素。
- 语法：
* {
属性名：属性值;
}
元素选择器
- 作用：为页面中某种元素统一设置样式。
- 语法：
标签名 { 属性名：属性值;}
- 备注：元素选择器无法实现差异化设置，例如代码中，所有的p元素效果都是一样的。
通用选择器总结
交集选择器
- 作用：选中同时符合多个条件的元素。
交集有并且的含义（通俗理解：即…又…的意思），例如：年轻且漂亮。
- 语法：选择器1选择器2选择器3…选择器n {}
- 示例：
/* 选中：类名为beauty的p元素，此种写法用的非常多 */
p.beauty {color:blue}
/* 选中：类名包含rich和beauty的元素 */
.rich.beauty { color: green;}
- 注意：
- 有标签名，标签名必须写在前面；
- id选择器理论上可以作为交集的条件，但实际应用中几乎不用；
- 交集选择器中不可能出现两个元素选择器，因为一个元素，不肯能就是p元素又是span元素；
- 用的最多的交集选择器是：元素选择器配合类名选择器，例如：p.beauty。
并集选择器
- 作用：选择多个选择器对应的元素，又称：分组选择器。
所谓并集就是或者的含义（通俗理解：要么…要么…的意思）
- 语法：选择器1，选取2，选取3…选择器n {}
- 示例：
.rich,
.beauty,
.pig,
.dog {
background-color: beige;
width: 200px;
}
- 注意：
- 并集选取，我们一般竖着写；
- 任何形式的选择器，都可以作为并集选择器的一部分；
- 并集选择器，通常用于集体声明，可以缩小样式表体积。
后代选择器
- 作用：选中指定元素中，符合要求的后代元素。
- 语法：选择器1 选择器2 选择器3 … 选择器n {}
选择器之间，用空格隔开，空格可以理解为xxx中的，其实就是后代的意思。选择器1234…n，可以是我们之前学的任何一种选择器。
- 示例：
ul li {
color: red;
}
- 注意：
- 后代选择器，最终选择的是后代，不选中祖先；
- 儿子、孙子、重孙子…都算后代。
- 结构一定要符合之前讲的HTML嵌套要求，例如：不能p中写 h1~h6。
子代选择器
- 作用：选择指定元素中，符合要求的子元素（儿子元素）。
子代选择器又称：子元素选择器、子选择器。
- 语法：选择器1>选择器2>选择器3>…选择器n {}
选择器之间，用>隔开，>可以理解为：“xxx的子代”，其实就是儿子的意思，选择器1234…n，可以是我们之前学的任何一种选择器。
- 注意：
- 子代选择器，最终选择的是子代，不是父级；
- 子、孙子、重孙子…统称后代！，子就是指儿子。
兄弟选择器
-
相邻兄弟选择器：
- 作用：选中指定元素后，符合条件的相邻兄弟元素。
所谓相邻，就是紧挨着她的下一个，简记：睡在我下铺的兄弟。
- 语法：选择器1+选择器2 {}
- 示例：
div+p {color:red;}
- 通用兄弟选择器：
- 作用：选中指定元素后，符合条件的所有兄弟元素。（简记：睡在我下铺的所有兄弟）
- 语法：选择器1~选择器2 {}
- 示例：
div~p { color:red; }
- 注意：两种兄弟选择器，选择的都是下面的兄弟，不会往上面选的。
属性选择器
- 作用：选中属性值符合一定要求的元素。
- 语法：
- [属性名] 选中具有某个属性的元素。
- [属性名=“值”]选中包含某个属性，且属性值等于指定值的元素。
- [属性名^=“值”]选中包含某个属性，且属性值以指定的值开头的元素。
- [属性名$=“值”]选中包含某个属性，且属性值以指定的值结尾的元素。
- [属性名*=“值”]选中包含某个属性，属性值包含指定值的元素。
伪类选择器
- 作用：选中特殊状态的元素。
如何理解伪？虚假的，不是真的。
如何理解“伪类”？像类(class)，但不是类，是元素的一种特殊状态。
动态伪类
- :link 超链接未被访问的状态；
- :visited超链接访问过的状态；
- :hover鼠标悬停在元素上的状态；
- :active元素激活的状态。
什么是激活？按下鼠标不松开。
注意：遵循LVHA的顺序写CSS，即：link、visited、hover、active。
- :focus获取焦点的元素
表单类元素才能使用 :focus伪类。
当用户：点击元素、触摸元素、或通过键盘的tab键等方式，选择元素是，就是获得焦点。
结构伪类
常用的
- :first-child 所有兄弟元素中的第一个。
- :last-child 所有兄弟元素中的最后一个。
- :nth-child(n) 所有兄弟元素中的第n个。
- :first-of-type 所有同类型兄弟元素中的第一个。
- :last-of-type 所有同类型元素中的最后一个。
- :nth-of-type(n) 所有同类型兄弟元素中的第n个。
关于n的值：
- 0或不写：什么都选不中；
n：选中所以子元素；
1~正无穷的整数：选中对应序号的子元素。
2n或even：选中序号为偶数的子元素。
2n+1或odd：选中序号为奇数的子元素。
-n+3：选中的是前3个。
注意：nth-child(公式)：an+b，顺序不能写错。
了解
- :nth-last-child(n) 所有兄弟元素中倒数第n个。
- :nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个。
- :only-child 选中没有兄弟的元素（独生子女）。
- :only-of-type 选择没有同类型兄弟的元素。
- :root 根元素。
- :empty 内容为空的元素（空格也算内容）。
否定伪类
:not(选择器) 排除满足括号中条件的元素。
UI伪类
- :checked 被选中的复选框或单选框。
- :enabled 可用的表单元素（没有disabled属性）。
- :disabled 不可用的表单元素（有disabled属性）。
目标伪类
:target 选中锚点指向的元素。
语言伪类
:lang() 根据指定的语言选择元素（本质是看lang属性的值）。
伪元素选择器
- 作用：选中元素中的一些特殊位置。
- 常用伪元素：
- ::first-letter 选中元素中的第一个文字。
- ::first-line 选中元素中第一行文字。
- ::selection 选中被鼠标选中的内容。
- ::placeholder 选中输入框的提示文字。
- ::before 在元素最开始的位置，创建一个子元素（必须用content属性指定内容）。
- ::after 在元素最后的位置，创建一个子元素（必须用content属性指定内容）。
选择器的优先级
通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值时，就发生了样式冲突。到底应用哪个样式，此时就需要看优先级了。
- 简单描述：
行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器
权重的详细计算
important写法
ul>li:first-child { color: red !important; }
优先级类比
CSS盒子模型
CSS长度单位
- px：像素
- em：相对元素font-size的倍数
- rem：相对根字体大小，html标签就是根，默认16px
- %：相对父元素计数
CSS中设置长度，必须加单位，否则样式无效！
元素的显示模式
- 块元素(block)
又称块级元素
特点：
- 在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。
- 默认宽度：撑满父元素。
- 默认高度：由内容撑开。
- 可以通过CSS设置宽高。
- 行内元素(inline)
又称：内联元素
特点：
- 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从做到右排列。
- 默认宽度：由内容撑开。
- 默认高度：由内容撑开。
- 无法通过CSS设置宽高。
- 行内块元素（inline-block）
又称内联块元素
特点：
- 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从做到右排列。
- 默认宽度：由内容撑开。
- 默认高度：由内容撑开。
- 可以通过CSS设置宽高。
注意：元素早期只有：行内元素、块内元素，区分条件也只有一条：“是否独占一行”，如果按照这种分类方式，行内块元素应该算作行内元素。
总结各元素的显示模式
- 块元素（block）
- 主体结构标签、
- 排版标签：
~
、
、、
、- 列表标签：
- 表格相关标签：
- 与
- 行内元素（inline）
- 文本标签：
换行，是行内元素，只是功能特殊，浏览器解析到它需要换行。- 与
- 行内块元素(inline-block)
- 图片：
- 单元格：
- 表单控件：
- 框架标签：
修改元素显示模式
通过css中的display属性可以修改元素的默认显示模式，常用值如下：
- none:元素会被隐藏；
- block：元素将作为块级元素显示；
- inline：元素将作为内联元素显示；
- inline-block：元素将作为行内元素显示；
盒子模型的组成
CSS会把所有的HTML元素都看成一个盒子，所有的样式也都是基于这个盒子。
- margin（外边距）：盒子与外界的距离。
- border（边框）：盒子的边框。
- padding（内边距）：紧贴内容的补白区域。
- content（内容）：元素中的文本或后代元素都是它的内容。
图示如下：
盒子的大小=content + 左右padding + 左右 border
注意：外边距margin不会影响盒子的大小，但会影响盒子的位置。
默认宽度
所谓的默认宽度，就是不设置width属性时，元素所呈现出来的宽度。
总宽度= 父的content宽度 - 自身的左右margin
内容区的宽度 = 父的content - 自身的左右margin - 自身的左右border - 自身的左右padding
盒子内边距（padding）
padding相关的属性名：
- padding-top：上内边距；
- padding-right：右内边距；
- padding-bottom：下内边距；
- padding-left：左内边距；
- padding：复合属性；
padding复合属性的使用规则：
- padding：10px；四个方向内边距都是10px；
- padding: 10px 20px；上下10px，左右20px；
- padding: 10px 20px 30px；上10px，左右20px，下30px；
- padding：10px 20px 30px 40px；上10px，右20px，下30px，左40px；
注意点：
- padding的值不能为负数。
- 行内元素的左右内边距是没问题的，上下内边距不能完美的设置。
- 块级元素、行内块元素，四个方向内边距都可以完美设置。
盒子的边框
盒子外边距（margin）
属性名称：
margin-left：做外边距
margin-right：又外边距
margin-top：上外边距
margin-bottom：下外边距
margin：复合属性，可以写1~4个值，规律同padding（顺时针）
margin注意事项
- 子元素的margin，是参考父元素的content计算的。（因为父亲的content种承装着子元素）
- 上margin、左margin：影响自己的位置；下margin、又margin：影响后面兄弟元素的位置。
- 块级元素、行内元素，均可以完美地设置4个方向的margin；但行内元素，左右margin可以完美设置，上下margin设置无效。
- margin的值也可以是auto，如果给一个块级元素设置左右margin都是auto，该块级元素会在父元素中水平居中。
- margin的值可以是负值。
margin塌陷问题
什么是margin塌陷？
第一个子元素的上margin会作用在父元素上，最后一个子元素的下margin会作用在父元素上。
如何解决margin塌陷？
- 方案1：给父元素设置不为0的padding。
- 方案2：给父元素设置宽度不为0的border。
- 方案3：给父元素设置css样式overflow: hidden。
margin合并问题
什么是margin合并？
上面的兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。
如何解决margin塌陷？
无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了。
处理内容溢出
属性名称：
overflow：溢出内容的处理方式。
属性值：
- visible：显示，默认。
- hidden：隐藏。
- scroll：显示滚动条，不论内容是否溢出。
- auto：自动显示滚动条，内容不溢出不显示。
overflow常用的值是hidden和auto，除了能处理溢出的显示方式，还可以解决很多疑难杂症。
样式的继承
有些样式会继承，元素如果本身设置了某个样式，就使用本身设置的样式；但是如果本身没有设置某个样式，则会从父元素开始一级一级继承（优先继承离得近的祖先元素）。
会继承的CSS属性
字体属性、文本属性（除了vertical-align）、文字颜色 等；
不会继承的CSS属性
边框、背景、内边距、外边距、宽高、溢出方式 等。
一个规律：能继承的属性，都是不影响布局的，简单的说：都是和盒子模型没关系的。
默认样式
元素一般都是有默认样式的，例如：
- 元素：下划线、字体颜色、鼠标小手。
-
~
元素：文字检查、文字大小、上下外边距。
-
元素：上下外边距。
-
-
、
- 元素：左内边距。
-
、
- 元素：8px外边距（4个方向）。
优先级：元素的默认样式 > 继承的样式，所有如果要重置元素的默认样式，选择器一定要直接选择到该元素。
布局小技巧
- 行内元素、行内块元素，可以被父元素当做文本处理。
即：可以像处理文本对齐一样去处理：行内、行内块在父元素中的对齐。
例如：text-align、line-height、text-indent等。
- 如何让子元素，在父亲中水平居中：
- 若子元素为块元素，给父元素加上：margin:0 auto。
- 若子元素为行内元素、行内块元素，给父元素假设：text-align:center。
- 如何让子元素，在父元素中 垂直居中：
- 若子元素为块元素，给子元素加上：margin-top，值为：（父元素content - 子元素盒子总高）/2。
- 若子元素为行内元素、行内块元素：
让父元素的height = line-height，每个子元素都加上：vertical-align:middle。
补充：若想绝对垂直居中，父元素font-size设置为0。
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
.outer {
width: 400px;
height: 400px;
background-color: gray;
text-align: center;
line-height: 400px;
font-size: 0px;
text-indent: 50px;
}
img {
width: 100px;
vertical-align: middle;
}
span{
font-size: 40px;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="outer">
<span>出来玩啊x</span>
<img src="../pics/aa.png" alt="">
</div>
</body>
元素空白问题
元素之间的空白问题
产生的原因：行内元素，行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。
解决方案：
- 方案一：去掉换行和空格（不推荐）。
- 方案二：给父元素设置font-size:0，再给需要显示文字的元素，单独设置字体大小（推荐）。
行内块的幽灵空白问题
产生原因：行内元素与文本的基线对齐，而文本的基线与文本最底端之间是由一定距离的。
解决方案：
- 方案1：给行内块设置vertical-align，值不为baseline即可，设置为middle、bottom、top均可。
- 方案2：若父元素中只有一张图片，设置图片为display:block。
- 方案3：给父元素设置font-size：0，如果该行内块内部还有文本，则需要单独设置font-size。
扫一扫
779
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
