CSS简介

概述

CSS：层叠样式表，可以理解为把样式像化妆一样，一层层的涂到Html上。

样式优先级

语法规范

CSS语法由两部分构成：
- 选择器：找到要添加样式的元素。
- 声明块：设置具体的样式（声明块是由一个或多个声明组成的），声明的格式为：属性名：属性值；
1
2
3

选择器

基本的选择器包括：

1. 通配选择器
2. 元素选择器
3. 类选择器
4. id选择器

通配选择器

• 作用：可以选中所以的HTML元素。
• 语法：

* {
	属性名：属性值;
}
1
2
3

元素选择器

• 作用：为页面中某种元素统一设置样式。
• 语法：

标签名 { 属性名：属性值;}
1

• 备注：元素选择器无法实现差异化设置，例如代码中，所有的p元素效果都是一样的。

通用选择器总结

交集选择器

• 作用：选中同时符合多个条件的元素。

交集有并且的含义（通俗理解：即…又…的意思），例如：年轻且漂亮。

• 语法：选择器1选择器2选择器3…选择器n {}
• 示例：

/* 选中：类名为beauty的p元素，此种写法用的非常多 */
p.beauty {color:blue}
/* 选中：类名包含rich和beauty的元素 */
.rich.beauty { color: green;}
1
2
3
4

• 注意：

1. 有标签名，标签名必须写在前面；
2. id选择器理论上可以作为交集的条件，但实际应用中几乎不用；
3. 交集选择器中不可能出现两个元素选择器，因为一个元素，不肯能就是p元素又是span元素；
4. 用的最多的交集选择器是：元素选择器配合类名选择器，例如：p.beauty。

并集选择器

• 作用：选择多个选择器对应的元素，又称：分组选择器。

所谓并集就是或者的含义（通俗理解：要么…要么…的意思）

• 语法：选择器1，选取2，选取3…选择器n {}
• 示例：

        .rich,
        .beauty,
        .pig,
        .dog {
            background-color: beige;
            width: 200px;
        }
1
2
3
4
5
6
7

• 注意：
  1. 并集选取，我们一般竖着写；
  2. 任何形式的选择器，都可以作为并集选择器的一部分；
  3. 并集选择器，通常用于集体声明，可以缩小样式表体积。

后代选择器

• 作用：选中指定元素中，符合要求的后代元素。
• 语法：选择器1 选择器2 选择器3 … 选择器n {}

选择器之间，用空格隔开，空格可以理解为xxx中的，其实就是后代的意思。选择器1234…n，可以是我们之前学的任何一种选择器。

• 示例：

        ul li {
            color: red;
        }
1
2
3

• 注意：
  1. 后代选择器，最终选择的是后代，不选中祖先；
  2. 儿子、孙子、重孙子…都算后代。
  3. 结构一定要符合之前讲的HTML嵌套要求，例如：不能p中写 h1~h6。

子代选择器

• 作用：选择指定元素中，符合要求的子元素（儿子元素）。

子代选择器又称：子元素选择器、子选择器。

• 语法：选择器1>选择器2>选择器3>…选择器n {}

选择器之间，用>隔开，>可以理解为：“xxx的子代”，其实就是儿子的意思，选择器1234…n，可以是我们之前学的任何一种选择器。

• 注意：

1. 子代选择器，最终选择的是子代，不是父级；
2. 子、孙子、重孙子…统称后代！，子就是指儿子。

兄弟选择器

• 相邻兄弟选择器：

  • 作用：选中指定元素后，符合条件的相邻兄弟元素。

  所谓相邻，就是紧挨着她的下一个，简记：睡在我下铺的兄弟。

  • 语法：选择器1+选择器2 {}
  • 示例：

div+p {color:red;}
1

• 通用兄弟选择器：
  • 作用：选中指定元素后，符合条件的所有兄弟元素。（简记：睡在我下铺的所有兄弟）
  • 语法：选择器1~选择器2 {}
  • 示例：

div~p { color:red; }
1

• 注意：两种兄弟选择器，选择的都是下面的兄弟，不会往上面选的。

属性选择器

• 作用：选中属性值符合一定要求的元素。
• 语法：
  1. [属性名] 选中具有某个属性的元素。
  2. [属性名=“值”]选中包含某个属性，且属性值等于指定值的元素。
  3. [属性名^=“值”]选中包含某个属性，且属性值以指定的值开头的元素。
  4. [属性名$=“值”]选中包含某个属性，且属性值以指定的值结尾的元素。
  5. [属性名*=“值”]选中包含某个属性，属性值包含指定值的元素。

伪类选择器

• 作用：选中特殊状态的元素。

如何理解伪？虚假的，不是真的。
如何理解“伪类”？像类(class)，但不是类，是元素的一种特殊状态。

动态伪类

1. :link 超链接未被访问的状态；
2. :visited超链接访问过的状态；
3. :hover鼠标悬停在元素上的状态；
4. :active元素激活的状态。

什么是激活？按下鼠标不松开。
注意：遵循LVHA的顺序写CSS，即：link、visited、hover、active。

5. :focus获取焦点的元素

表单类元素才能使用 :focus伪类。
当用户：点击元素、触摸元素、或通过键盘的tab键等方式，选择元素是，就是获得焦点。

结构伪类

常用的

1. :first-child 所有兄弟元素中的第一个。
2. :last-child 所有兄弟元素中的最后一个。
3. :nth-child(n) 所有兄弟元素中的第n个。
4. :first-of-type 所有同类型兄弟元素中的第一个。
5. :last-of-type 所有同类型元素中的最后一个。
6. :nth-of-type(n) 所有同类型兄弟元素中的第n个。
   关于n的值：

1. 0或不写：什么都选不中；
   n：选中所以子元素；
   1~正无穷的整数：选中对应序号的子元素。
   2n或even：选中序号为偶数的子元素。
   2n+1或odd：选中序号为奇数的子元素。
   -n+3：选中的是前3个。
   注意：nth-child(公式)：an+b，顺序不能写错。

了解

1. :nth-last-child(n) 所有兄弟元素中倒数第n个。
2. :nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个。
3. :only-child 选中没有兄弟的元素（独生子女）。
4. :only-of-type 选择没有同类型兄弟的元素。
5. :root 根元素。
6. :empty 内容为空的元素（空格也算内容）。

否定伪类

:not(选择器) 排除满足括号中条件的元素。

UI伪类

1. :checked 被选中的复选框或单选框。
2. :enabled 可用的表单元素（没有disabled属性）。
3. :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长度单位

1. px：像素
2. em：相对元素font-size的倍数
3. rem：相对根字体大小，html标签就是根，默认16px
4. %：相对父元素计数

CSS中设置长度，必须加单位，否则样式无效！

元素的显示模式

• 块元素(block)

又称块级元素
特点：

1. 在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。
2. 默认宽度：撑满父元素。
3. 默认高度：由内容撑开。
4. 可以通过CSS设置宽高。

• 行内元素(inline)

又称：内联元素
特点：

1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从做到右排列。
2. 默认宽度：由内容撑开。
3. 默认高度：由内容撑开。
4. 无法通过CSS设置宽高。

• 行内块元素（inline-block）

又称内联块元素
特点：

1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从做到右排列。
2. 默认宽度：由内容撑开。
3. 默认高度：由内容撑开。
4. 可以通过CSS设置宽高。
   注意：元素早期只有：行内元素、块内元素，区分条件也只有一条：“是否独占一行”，如果按照这种分类方式，行内块元素应该算作行内元素。

总结各元素的显示模式

• 块元素（block）

1. 主体结构标签、
2. 排版标签：

   ~

   、

   ---

   、

   、

   、
        
        
   

3. 列表标签：

   • 2. 表格相关标签：
     3. 与

• 行内元素（inline）

1. 文本标签：
   
   
   换行，是行内元素，只是功能特殊，浏览器解析到它需要换行。
2. 与

• 行内块元素(inline-block)

1. 图片：
2. 单元格：
3. 表单控件：
4. 框架标签：

修改元素显示模式

通过css中的display属性可以修改元素的默认显示模式，常用值如下：

• none:元素会被隐藏；
• block：元素将作为块级元素显示；
• inline：元素将作为内联元素显示；
• inline-block：元素将作为行内元素显示；

盒子模型的组成

CSS会把所有的HTML元素都看成一个盒子，所有的样式也都是基于这个盒子。

1. margin（外边距）：盒子与外界的距离。
2. border（边框）：盒子的边框。
3. padding（内边距）：紧贴内容的补白区域。
4. content（内容）：元素中的文本或后代元素都是它的内容。
   图示如下：
   
   盒子的大小=content + 左右padding + 左右 border

注意：外边距margin不会影响盒子的大小，但会影响盒子的位置。

默认宽度

所谓的默认宽度，就是不设置width属性时，元素所呈现出来的宽度。
总宽度= 父的content宽度 - 自身的左右margin
内容区的宽度 = 父的content - 自身的左右margin - 自身的左右border - 自身的左右padding

盒子内边距（padding）

padding相关的属性名：

• padding-top：上内边距；
• padding-right：右内边距；
• padding-bottom：下内边距；
• padding-left：左内边距；
• padding：复合属性；
  padding复合属性的使用规则：

1. padding：10px；四个方向内边距都是10px；
2. padding: 10px 20px；上下10px，左右20px；
3. padding: 10px 20px 30px；上10px，左右20px，下30px；
4. padding：10px 20px 30px 40px；上10px，右20px，下30px，左40px；

注意点：

1. padding的值不能为负数。
2. 行内元素的左右内边距是没问题的，上下内边距不能完美的设置。
3. 块级元素、行内块元素，四个方向内边距都可以完美设置。

盒子的边框

盒子外边距（margin）

属性名称：
margin-left：做外边距
margin-right：又外边距
margin-top：上外边距
margin-bottom：下外边距
margin：复合属性，可以写1~4个值，规律同padding（顺时针）

margin注意事项

1. 子元素的margin，是参考父元素的content计算的。（因为父亲的content种承装着子元素）
2. 上margin、左margin：影响自己的位置；下margin、又margin：影响后面兄弟元素的位置。
3. 块级元素、行内元素，均可以完美地设置4个方向的margin；但行内元素，左右margin可以完美设置，上下margin设置无效。
4. margin的值也可以是auto，如果给一个块级元素设置左右margin都是auto，该块级元素会在父元素中水平居中。
5. 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属性

边框、背景、内边距、外边距、宽高、溢出方式 等。
一个规律：能继承的属性，都是不影响布局的，简单的说：都是和盒子模型没关系的。

默认样式

元素一般都是有默认样式的，例如：

1. 元素：下划线、字体颜色、鼠标小手。

2. ~

   元素：文字检查、文字大小、上下外边距。

3. 元素：上下外边距。

4. • 、
     1. 元素：左内边距。
5. 元素：8px外边距（4个方向）。

优先级：元素的默认样式 > 继承的样式，所有如果要重置元素的默认样式，选择器一定要直接选择到该元素。

布局小技巧

1. 行内元素、行内块元素，可以被父元素当做文本处理。

即：可以像处理文本对齐一样去处理：行内、行内块在父元素中的对齐。
例如：text-align、line-height、text-indent等。

2. 如何让子元素，在父亲中水平居中：

• 若子元素为块元素，给父元素加上：margin:0 auto。
• 若子元素为行内元素、行内块元素，给父元素假设：text-align:center。

3. 如何让子元素，在父元素中 垂直居中：

• 若子元素为块元素，给子元素加上：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>出来玩啊xspan>
        <img src="../pics/aa.png" alt="">
    div>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

元素空白问题

元素之间的空白问题

产生的原因：行内元素，行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。
解决方案：

1. 方案一：去掉换行和空格（不推荐）。
2. 方案二：给父元素设置font-size:0，再给需要显示文字的元素，单独设置字体大小（推荐）。

行内块的幽灵空白问题

产生原因：行内元素与文本的基线对齐，而文本的基线与文本最底端之间是由一定距离的。
解决方案：

1. 方案1：给行内块设置vertical-align，值不为baseline即可，设置为middle、bottom、top均可。
2. 方案2：若父元素中只有一张图片，设置图片为display:block。
3. 方案3：给父元素设置font-size：0，如果该行内块内部还有文本，则需要单独设置font-size。