Web前端开发 CSS常用样式大全

Web前端开发 CSS常用样式大全

文章目录

• 1-1 CSS简介

  • 2 选择器及其功能

    • 2.1 基于标签名称的选择器
    • 2.2 基于属性值的筛选方法
    • 2.3 具体属性标识符的选择方式
    • 2.4 综合条件组合的选择机制
      • 2.4.1 后代元素的选择逻辑
      • 2.4.2 子代元素的筛选标准
      • 2.4.3 多选条件下的集合操作
      • 2.4.4 同时满足多个条件的选择模式
      • 2.4.5 基于伪类特性的元素匹配方法

  • 2.5 结构伪类选择器

  • 2.6 伪元素选择器

  • 3 CSS特性

  • • 3.1 继承性
    • 3.2 层叠性
    • 3.3 优先级

• 4 文字控制属性

  • • 4.1 字体尺寸（font-size）
    • 4.2 字体样式（font-style）
    • 4.3 行间距（line-height）
    • 单行文字垂直居中
    • 4.4 字体家族（font-family）
    • 4.5 字体整体属性
    • 文本起始偏移
    • 文本对齐方式
    • 文本装饰线
    • 颜色设置

• 5 背景属性

  • 5.1 背景图像（background-image）
  • 5.2 重复模式（repeat）
  • 5.3 位置设置（positioning）
  • 5.4 尺寸设置（size）
  • 5.5 固定位置（attachment）
  • 5.6 复合属性设置（backgrounds）

*6 显示设置（display settings）
*7 布局结构（box model）
* 7.1 边界样式（border style）
* 7.2 内侧间距（inner spacing）
* 7.3 大小计算（size calculation）
* 7.4 边际间距（outer spacing）
* 7.5 内容居中（content centered）
* 7.6 去除预设样式（remove default styles）
* 7.7 内容溢出处理（content overflow handling）
* 7.8 边际间距问题
* - 合并行为分析
- 外部间距坍塌情况

* 7.9 行内元素内外边距问题
* 7.10 圆角（border-radius）
* 7.11 盒子阴影（box-shadow）

• 8 浮动（float）

  • 8.1 基础应用
  • 8.2 页面区域布局
  • 8.3 去除浮点数
    • 8.3.1 单标签法
      • 双伪元素法
      • overflow属性方法

• 9 Flex布局

  • 9.1 Flex组件结构

    • 9.2 主轴对齐设置（justify属性值）
    • 9.3 横向或纵向排列（横向排列选项及自定义设置）
    • 9.4 正向/反向/水平/垂直排列（正向表示从左到右排列）
    • 9.5 可伸缩比率设置（弹性系数调节）
    • 9.6 允许元素环绕排列（排版时元素环绕显示效果）
    • 9.7 同一行列排列选项

  • 10 定位（position）

  • • 10.1 相对定位
    • 10.2 绝对定位
    • 10.3 定位居中
    • 10.4 固定定位
    • 10.5 堆叠层级（z-index）

• 11 CSS精灵

  • 12 CSS修饰属性
  • 12.1 垂直对齐方式(vertical align)
  • 12.2 过渡(transition)
  • 12.3 透明度(opacity)
  • 12.4 光标类型(cursor)

1 CSS简介

多级样式表（Cascading Style Sheets, CSS）是一种描述HTML文档外观的语言。该语言通过键值对的形式定义属性名称与属性值的关系来美化网页内容。在CSS中，默认情况下元素遵循特定的行为规范，在某些情况下这些规范会被显式地重新定义以满足特殊需求。

引入方式：

• 内部 样式表：学习使用
  • CSS代码写在<style>标签中

    <title>CSS 初体验</title>

    <style>
    	/* 选择器 { } */
    	p {
    		/* CSS 属性 */
    		color: red;
    	}
    </style>
    
    <p>体验CSS</p>

• 外部样式表：该种方式被采用
• CSS代码应放置于独立的.css文件中
• 在HTML文档中通过引入<link>标签来加载CSS代码

    <link rel="stylesheet" href="./my.css">

• 行内 样式：配合JavaScript使用
  • CSS写在标签的style属性 里

    <div style="color: red; font-size: 20px;">这是 div 标签</div>

Emmet写法：代码的简写 方式，输入缩写 VS Code 会自动生成对应的代码。

• HTML标签

• CSS：大多数简写方式为属性单词的首字母

2 选择器

作用：查找标签，设置样式。

2.1 标签选择器

使用标签名 作为选择器，选中同名标签 设置相同的样式 。

例：p、h1、div、a、img…

    <style>
    p {
        color: red;
    }
    </style>

通配符筛选器 （*）：用于搜索页面中的所有标签，并赋予统一样式。浏览器会自动搜索并应用相同样式到所有符合条件的元素。

    * {
    	color: red;
    }

通配符选择器可用于清除标签的默认样式 ，如标签默认的外边距、内边距。

2.2 类选择器

查找标签，差异化 设置标签的显示效果。

1. 定义类选择器：.类名
2. 使用类选择器：标签添加属性值 class="类名"

    <style>
    /* 定义类选择器 */
    .red {
        color: red;
    }
    </style>
    
    <!-- 使用类选择器 -->
    <div class="red">这是div标签</div>
    <div class="red size">div标签</div>

• 一个类选择器支持多种标签可用
  • 一个标签能够支持多种类名称之间通过空格分隔

多个单词可以用-连接

2.3 id选择器

获取标签并采用差异化的方式进行调整以影响其显示效果。这种方法通常与JavaScript配合使用，在CSS样式方面应用较少

1. 定义id选择器：#id名
2. 使用id选择器：标签添加属性值 id="id名"

    <style>
    /* 定义id选择器 */
    #red {
        color: red;
    }
    </style>
    
    <!-- 使用id选择器 -->
    <div id="red">这是div标签</div>

同一个id选择器在一个页面只能使用一次 。

2.4 复合选择器

基于两个或多个基础选择器以不同策略组合形成，并且能够更加精准和快速地定位目标元素（标签）。

2.4.1 后代选择器

选中某元素的后代元素 （该标签内的所有指定标签）。

写法：父选择器 子选择器 { CSS属性 }，父子选择器之间用空格 隔开。

    <style>
    div span {
        color: red;
    }
    </style>
    
    <span>span标签</span>
    <div>
    	<span>这是div的儿子span</span >
    </div>

2.4.2 子代选择器

选中某元素的子代元素 （最近的子级 ）。

写法：父选择器 > 子选择器 { CSS属性 }，父子选择器之间用>隔开。

    <style>
    div > span {
        color: red;
    }
    </style>
    
    <div>
    <span>这是div里面的span</span>
    <p>
        <span>这是div里面的p里面的span</span>
    </p>
    </div>

2.4.3 并集选择器

选中多组标签 设置相同 的样式。

写法：选择器1, 选择器2, ... , 选择器N { CSS属性 }，选择器之间用,隔开。

    <style>
    div, p, span {
        color: red;
    }
    </style>
    
    <div>div标签</div>
    <p>p标签</p>
    <span>span标签</span>

2.4.4 交集选择器

选中同时满足多个条件 的元素。

写法：选择器1选择器2 { CSS属性 }，选择器之间连写，没有任何符号 。

如果交集选择器中有标签选择器，标签选择器必须写在最前面 。

    <style>
    p.box {
        color: red;
    }
    </style>
    
    <p class="box">p标签，使用了类选择器box</p>
    <p>p标签</p>
    <div class="box">div标签，使用了类选择器box</div>

2.4.5 伪类选择器

伪类 表示元素状态 ，选中元素的某个状态设置样式。

写法：选择器:伪类 { CSS 属性 }

    <style>
    a:hover {	/* 鼠标悬停 */
        color: red;
    }
    .box:hover {
        color: green;
    }
    </style>
    
    <a href="#">a标签</a>
    <div class="box">div标签</div>

超链接伪类：

• :link：访问前
• :visited：访问后
• :hover：鼠标悬停
• :active：点击时（激活）

如果要给超链接设置以上四个状态，需按LVHA 的顺序书写。

    a {
      color: red;
    }
    a:hover {
      color: green;
    }

2.5 结构伪类选择器

根据元素的结构关系 查找元素。

通过E:first-child指令可以实现对起始的E元素定位。
通过E:last-child指令可以实现对末尾的E元素定位。
通过E:nth-child(N)指令可以实现对第N个（起始位置为1）子项的定位。

nth-child公式

    li:first-child {
    	background-color: green;
    }

2.6 伪元素选择器

创建虚拟元素 /伪元素 ，用来摆放装饰性的内容。

• E::before：在E元素的前端插入一个伪元素
• E::after：在E元素的后端插入一个伪元素

需设置pseudo-element的content属性来指定其内容。若无内容，则可用双引号留空。

    div::before {
    	content: "before伪元素";
    }
    div::after {
    	content: "after伪元素";
    }

• 伪元素默认为行内 （inline）显示模式
• 权重与标签选择器相同

3 CSS特性

3.1 继承性

子级默认继承父级的文字控制属性 。

注释：如果某个元素带有默认的文字样式设置，则该样式会被继承并导致失败。例如，默认颜色为蓝色的文本标签会继承背景颜色；而标题字体大小较大时可能会超出可用区域。

3.2 层叠性

• 相同类型的样式会在后面被前面定义样式所覆盖：后续定义的具体样式会被先前定义的具体样式所覆盖
  • CSS样式会有重叠时会同时生效：不同名称的具体CSS样式将同时生效

    <style>
    div {
        color: red;
        font-weight: 700;
    }
    div {
        color: green;
        font-size: 30px;
    }
    </style>
    
    <div>div标签</div>

注：选择器类型相同则遵循层叠性，否则按选择器优先级判断。

3.3 优先级

虽然被称为权重参数，在HTML/CSS中我们有时会遇到一种情况：当一个标签需要同时应用多种选择器时（即涉及多个不同的选中方式），每种选中方式都会按照特定的优先级（即所谓的匹配逻辑）执行筛选操作以确定最终结果

• 基础筛选工具

• 定义：按照指定规则对数据进行筛选操作 * 公式：通过特定符号组合实现数据匹配逻辑 * 表达式：< 标签名称 > < 类型名称 > < ID字段名 > < 文本内容 > < !important>
  （被选中的标签所覆盖的区域越大，则其筛选优先级越低）

• 复合选择器

• 规则：通过累加权重值来确定匹配程度。

• 公式：计算结果为 ( 行内样式项 , id选件数目 , 类别选件数目 , 标签选件数目 ) ，各级运算结果相互独立。

• 从左到右依次选取候选项进行比较，在同一优先级等级下候选项数量越多则其优先级等级越高；若数量相等，则继续向后进行后续比较

  • 重要性加权系数最大*\quad继承关系加权系数最小*

    <style>
    div {
        color: red;
    }
    .box {
        color: green;
    }
    </style>
    
    <div class="box">div标签</div>

4 文字控制属性

4.1 字体大小（font-size）

• 属性名：font-size
• 属性值：文字尺寸，PC端网页最常用的单位为px

    p {
    	font-size: 30px;
    }

谷歌浏览器默认字号为16px。

4.2 字体样式（font-style）

设置字体是否倾斜

• 属性名：font-style

• 属性值

  1. 正常（不倾斜）：normal
  2. 倾斜：italic

• 作用：清除文字默认的倾斜效果

4.3 行高（line-height）

• 属性名：line-height

• 属性值

  1. 数字 + px
  2. 数字（当前标签font-size属性值的倍数）

• 作用：设置多行文本的间距

    line-height: 30px;
    
    /* 当前标签字体大小为16px */
    line-height: 2;

采用直尺测量行高时的方法是从一行文字顶部至另一行同一位置的文字顶部。

4.4 单行文字垂直居中

垂直居中技巧：行高属性值line-height等于盒子高度属性值height

该技巧仅适用于单行文字垂直居中效果。

    div {
    	height: 100px;
    	background-color: skyblue;
    
    	/* 注：仅适用于单行文字垂直居中 */
    	line-height: 100px;
    }

4.5 字体族（font-family）

• 属性名：font-family
• 属性值：字体名

    font-family: 楷体;

几个字体名称可用逗号分隔, 处理顺序是从左到右依次进行. 在网页开发时, 推荐将无衬线字体设置为最后使用.

    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;

4.6 字体复合属性（font）

字体属性的简写方式，一个属性对应多个值。

设置方式：font:
其中包含以下属性：
- 斜体状态
- 加粗标记
- 字号大小
- 行高设置
- 字体类型
各属性值之间需严格按照顺序排列使用空格 隔开。

    div {
    	font: italic 700 30px/2 楷体;
    }

注：字号和字体值必须书写，否则font属性不生效 。

4.7 文本缩进（text-indent）

• 属性名：text-indent
• 属性值：
  1. 数字 + px
  2. 数字 + em （推荐。1em = 当前标签的字号大小 ）

    p {
    	text-indent: 2em;
    }

4.8 文本对齐方式（text-align）

• 属性名：text-align

• 属性值

  1. left：左对齐（默认）
  2. center ：居中对齐
  3. right：右对齐

• 作用：控制内容水平对齐方式

    text-align: center;

text-align本质是控制内容的对齐方式，属性应设置给内容的父级。

    <style>
    	div {
    		text-align: center;
    	}
    </style>
    
    <div>
    	<img src="./images/1.jpg" alt="">
    </div>

4.9 文本修饰线（text-decoration）

• 属性名：text-decoration
• 属性值如下：
  1. none：无作用
  2. underline：用于添加下划线
  3. line-through：用于实现删除线效果
  4. overline：用于添加上划线

4.10 文字颜色（color）

只要属性值属于颜色类别，则均可借助前述四种颜色来表示；具体而言，则可采用background-color。

5 背景属性

5.1 背景图（background-image）

使用背景图实现装饰性的图片效果。

• 属性名：background-image （bgi）
• 属性值：url(背景图URL)

    div {
    	width: 400px;
    	height: 400px;
    
    	background-image: url(./images/1.png);
    }

背景图默认有平铺（复制）效果 。

5.2 平铺方式（background-repeat）

• 属性名：background-repeat 属性（bgr）
  • 属性值：
    1. 无重复模式（对应于非周期性铺砌）
    2. 重复模式（默认模式）
    3. 水平方铺模式
    4. 垂直平方铺模式

    div {
    	width: 400px;
    	height: 400px;
    	background-color: pink;
    	background-image: url(./images/1.png);
    	
    	background-repeat: no-repeat;
    }

5.3 背景图位置（background-position）

• 属性名称为background-position（缩写形式为bgp）；其属性值由两个参数组成——第一个参数表示图像在水平方向上的放置位置；第二个参数则表示图像在垂直方向上的放置位置；具体可选取的值及其对应含义如下所示；left表示图像位于当前区域的左侧区域；right表示图像位于当前区域的右侧区域；center表示图像位于当前区域的居中区域；top表示图像位于当前区域的顶端区域；bottom表示图像位于当前区域的底端区域。

  • 坐标
    • 水平：正数向右；负数向左
    • 垂直：正数向下；负数向上

    div {
    width: 400px;
    height: 400px;
    background-color: pink;
    background-image: url(./images/1.png);
    background-repeat: no-repeat;
    
    background-position: center bottom;
    background-position: 50px -100px;
    background-position: 50px center;
    }

• 关键字取值的书写顺序可以进行交换。
  • 仅需指定一个关键字时，默认其余方向自动居中显示；如果仅提供数值，则水平与垂直方向均采用居中显示；若同时给出多个数值，则水平数值左右对齐、垂直数值上下对齐。

5.4 背景图缩放（background-size）

设置背景图大小

• 属性名称：background-size （bgz）
  • 常见取值范围

    • 关键字 cover：通过等比例缩放背景图片实现全面覆盖效果，并确保整个背景图像能完整显示在背面区域内（个别背景图像可能会因尺寸限制而无法全部呈现）

    • 关键字 contain：通过等比例缩放使背景图片完美适应背面区域的尺寸，并在装入过程中避免超出区域范围（可能导致背面区域超出范围的部分留空）

    • 百分比：根据盒子尺寸计算图片大小

    • 数字 + 单位（如px）

    div {
    	width: 500px;
    	height: 400px;
    	background-color: pink;
    	background-image: url(./images/1.png);
    	background-repeat: no-repeat;
    	
    	background-size: cover;
    	background-size: contain;
    }

当图像尺寸与容器大小相同时，在对背景图像进行缩放时采用cover或contain策略会使效果一致。

5.5 背景图固定（background-attachment）

使背景不会随着元素的内容滚动。

• 属性名：background-attachment （bga）
• 属性值：fixed

    body {
    	background-image: url(./images/bg.jpg);
    	background-repeat: no-repeat;
    	background-attachment: fixed;
    }

5.6 背景复合属性（background）

• 属性名称：background （bg）
  • 属性值：底色 底图 铺贴模式 位置设置 缩放参数 固定选项（空格分隔各属性值）

    div {
    	width: 400px;
    	height: 400px;
    
    	background: pink url(./images/1.png) no-repeat right center/cover;
    }

6 显示模式（display）

标签（元素）的显示方式。

作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容。

1. 块级元素 （block）
   • 独占一行
   • 宽度默认为父级的100%
   • 添加宽高属性生效

2. 行内元素 （inline）
   • 在同一行中可以并列显示多个元素
   • 宽度和高度属性无法起作用
   • 尺寸主要由内容决定

3. 行内块元素 （inline-block）

• 一行能够展示多个
• 通过设置尺寸参数使其生效
• 宽度和高度会根据内容自动调整

转换显示模式

• 属性名：display
• 属性值
  1. block ：块级
  2. inline-block ：行内块
  3. inline：行内

7 盒子模型

盒子模型：布局网页，摆放盒子和内容。

• 内容区域尺寸（宽高）: size (width and height)
  • 背景色: background color or bgc
  • 内边距: padding (located between the content and the border of the container)
  • 边框线: line style
  • 外边距: margin (located outside the container)

    div {
    	margin: 50px;
    	border: 5px solid brown;
    	padding: 20px;
    	width: 200px;
    	height: 200px;
    	background-color: pink;
    }

7.1 边框线（border）

• 属性名称

  • 四个方向分别为\textbf{border}（缩写为\textit{bd}）
  • 单方向边框线采用\textbf{border}-\textit{方位名词}的形式表示（简称为\textit{bd}加上方位名词的首字母）

• 属性名称：边框宽度、线条类型、颜色属性（无固定顺序）

• 常见的线条样式属性值：
  连续实线：solid
  虚线：dashed
  点线：dotted

    .c1 {
    	border: 5px solid brown;
    	width: 200px;
    	height: 200px;
    	background-color: pink;
    }
    .c2 {
    border-top: 2px solid red;
    border-right: 3px dashed green;
    border-bottom: 4px dotted blue;
    border-left: 5px solid orange;
    width: 200px;
    height: 200px;
    background-color: pink;
    }

7.2 内边距（padding）

设置内容与盒子边缘之间的距离。用法类似border。

• 属性名：填充量、填充方向名称
  • 填充多值方式：自上而下按顺时针方向赋值（顺序为上→右→下→左），若当前方向无对应数值，则与相对面的数值一致。如下表所示

    div {
    /* 四个方向 内边距相同 */
    padding: 30px;
    /* 单独设置一个方向内边距 */
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 40px;
    padding-left: 80px;
    width: 200px;
    height: 200px;
    background-color: pink;
    }

7.3 尺寸计算

默认情况：盒子尺寸 = 内容尺寸 + 边框尺寸 + 内边距尺寸

给盒子加border/padding会撑大盒子 ，解决方法如下：

• 手动计算并扣除border/padding的大小 *
  • 设置为内缩模式 : box-sizing: border-box;

7.4 外边距（margin）

拉开两个盒子之间的距离

• 属性名：margin
• 属性值、用法：同padding

7.5 版心居中

设置左右margin值为auto （盒子要有宽度）

    div {
    	margin: 0 auto;
    	width: 1000px;
    	height: 200px;
    	background-color: pink;
    }

7.6 清除默认样式

使用通配符选择器清除标签默认的样式，例如默认的内外边距。

    /* 清除默认内外边距 */
    * {
    	margin: 0;
    	padding: 0;
    	box-sizing: border-box;
    }
    /* 清除列表项目符号 */
    li {
    	list-style: none;
    }

7.7 元素溢出（overflow）

控制溢出元素的内容的显示方式。

• 属性名：overflow
• 属性值
  1. overflow hidden状态 ：表示设置为溢出隐藏状态
  2. scroll行为（不论是否发生溢出现象均会展示滚动条位置）
  3. auto状态下会触发scroll行为（仅在发生溢出现象时才会显示滚动条位置）

7.8 外边距问题

7.8.1 合并现象

场景：垂直 排列的兄弟元素，上下margin 会合并

现象：取两个margin中的较大值 生效

    .one {
    	margin-bottom: 50px;
    }
    .two {
    	margin-top: 20px;
    }

7.8.2 外边距塌陷

场景：父子级标签，子级添加上外边距 会产生塌陷 问题

现象：导致父级一起向下移动

    .son {
    	margin-top: 50px;
    	width: 100px;
    	height: 100px;
    	background-color: orange;
    }

解决方法：

• 移除子级边距的同时将父容器的padding属性进行赋值
  • 父容器的overflow属性设为hidden状态
  • 确保父容器的border-top属性被指定

7.9 行内元素内外边距问题

场景：行内元素添加margin、padding无法改变元素垂直位置

解决方法：给行内元素添加行高line-height 可改变垂直位置

    span {
    	/* margin 和 padding 属性，无法改变垂直位置 */
    	margin: 50px;
    	padding: 20px;
    	/* 行高可以改变垂直位置 */
    	line-height: 100px;
    }

7.10 圆角（border-radius）

设置元素的外边框为圆角。

• 属性名：border-radius
• 属性值：数字 + px（圆角半径） / 百分比

多标记赋值方式：按顺时针方向从左上角依次赋值；当某处未赋值时，则与其相对的位置取相同的数值（类似于填充操作）

• 正圆形状：给正方形盒子设置圆角属性值为宽高的一半 / 50%

    img {
    width: 200px;
    height: 200px;
    
    border-radius: 100px;
    border-radius: 50%;
    }

• 胶囊形状：给长方形盒子设置圆角属性值为盒子高度的一半

    div {
    width: 200px;
    height: 80px;
    background-color: orange;
    border-radius: 40px;
    }

7.11 盒子阴影（box-shadow）

给元素设置阴影效果

• 属性名称：box-shadow
• 属性值设置如下：
  • X轴偏移量和Y轴偏移量必须明确写出
  • 属性值包含以下参数：
    • X轴偏移量
    • Y轴偏移量
    • 模糊半径
    • 扩散半径
    • 颜色
    • 内外阴影选项（内外阴影需分别设置）
  • 默认情况下，默认采用外阴影模式
  • 若要添加内阴影效果，则需在设置中加入inset关键字

    div {
    width: 200px;
    height: 80px;
    background-color: orange;
    box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset;
    }

8 浮动（float）

default layout : also referred to as document flow, it refers to the default arrangement rules that elements are displayed in a typical webpage layout. For instance, block elements occupy independent row areas, while inline elements can display multiple items within the same line.

8.1 基本使用

让块元素水平排列。

• 属性名：float
• 属性值
  • left ：左对齐
  • right ：右对齐

    <style>
    /* 特点：顶对齐；具备行内块显示模式特点；浮动的盒子会脱标 */
    .one {
        width: 100px;
        height: 100px;
        background-color: brown;
    
        float: left;
    }
    
    .two {
        width: 200px;
        height: 200px;
        background-color: orange;
    
        /* float: left; */
        
        float: right;
    }
    </style>
    
    <div class="one">one</div>
    <div class="two">two</div>

特点：

• 浮动后的盒子采用顶部对齐方式
• 浮动后的盒子遵循行内块规则
• 该盒体采用脱标处理技术

8.2 产品区域布局

HTML标签

    <!-- 版心：左右，右面：8个产品 → 8个 li -->
    <div class="product">
    <div class="left"></div>
    <div class="right">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    </div>

CSS样式

    <style>
    * {
        margin: 0;
        padding: 0;
    }
    
    li {
        list-style: none;
    }
    
    .product {
        margin: 50px auto;
        width: 1226px;
        height: 628px;
        background-color: pink;
    }
    
    .left {
        float: left;
        width: 234px;
        height: 628px;
        background-color: skyblue;
    }
    
    .right {
        float: right;
        width: 978px;
        height: 628px;
        background-color: brown;
    }
    
    .right li {
        float: left;
        margin-right: 14px;
        margin-bottom: 14px;
        width: 234px;
        height: 300px;
        background-color: orange;
    }
    
    /* 第四个li和第八个li 去掉右侧的margin */
    .right li:nth-child(4n) {
        margin-right: 0;
    }
    /* 细节：如果父级宽度不够，浮动的盒子会掉下来 */
    </style>

8.3 清除浮动

浮动项目可能会脱离基准；如果父级没有足够的高度 ，则无法为子级提供足够的支撑空间；这可能导致页面布局出现异常情况

解决方法：清除浮动 （清除浮动带来的影响）

场景搭建

    <style>
    .top {
        margin: 10px auto;
        width: 1200px;
        /* height: 300px; */
        background-color: pink;
    }
    
    .left {
        float: left;
        width: 200px;
        height: 300px;
        background-color: skyblue;
    }
    
    .right {
        float: right;
        width: 950px;
        height: 300px;
        background-color: orange;
    }
    
    .bottom {
        height: 100px;
        background-color: brown;
    }
    </style>
    
    <div class="top">
    <div class="left"></div>
    <div class="right"></div>
    </div>
    <div class="bottom"></div>

8.3.1 额外标签法

在父元素内容的最后 添加一个块级 元素，设置CSS属性 clear: both

    <style>
    .clearfix {
        clear: both;
    }
    </style>
    
    <div class="top">
    	<div class="left"></div>
    	<div class="right"></div>
    	<div class="clearfix"></div>
    </div>

8.3.2 单伪元素法

准备after 伪元素，父级 使用clearfix类

    <style>
    	.clearfix::after {
    		content: "";
    		display: block;
    		clear: both;
    	}
    </style>
    
    <div class="top clearfix">
    <div class="left"></div>
    <div class="right"></div>
    </div>

8.3.3 双伪元素法

准备after 和before 伪元素，父级 使用clearfix类

    <style>
    	/* before解决外边距塌陷问题 */
    	.clearfix::before,
    	.clearfix::after {
    	  content: "";
    	  display: table;
    	}
    	
    	/* after清除浮动 */
    	.clearfix::after {
    	  clear: both;
    	}
    </style>
    
    <div class="top clearfix">
    <div class="left"></div>
    <div class="right"></div>
    </div>

8.3.4 overflow法

    .top {
    	margin: 10px auto;
    	width: 1200px;
    	/* height: 300px; */
    	background-color: pink;
    
    	overflow: hidden;
    }

9 Flex布局

Flex布局（灵活布局）是互联网界广泛采用的一种网络布局方案，在处理复杂层次化布局需求方面展现出卓越的能力

Flex模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。

9.1 Flex组成

设置方式：给父 元素设置display: flex，子元素可以自动挤压或拉伸

组成部分：

• 弹性容器
• 弹性盒子
• 主轴：默认在水平 方向
• 侧轴 / 交叉轴：默认在垂直 方向

9.2 主轴对齐方式（justify-content）

• 属性名：justify-content
• 属性值
  1. flex-start：弹性盒子从起始位置开始依次排布（默认值）
  2. flex-end：弹性盒子从结束位置开始依次排布
  3. center ：弹性盒子沿主轴居中排列
  4. space-between ：各弹性盒子沿主轴均匀分布于彼此之间
  5. space-around ：各弹性盒子沿主轴均匀分布在两侧及自身之间
  6. space-evenly ：各弹性盒子与容器边框及相邻容器间的间距相等

9.3 侧轴对齐方式（align-items、align-self）

• 属性名称

• align-items：所有弹性盒子在该弹性容器中的侧轴对齐状态（由该弹性容器进行配置）

• align-self：单独管理某一个特定的弹性盒子的侧轴对齐状态（由该特定弹力盒自行设定）

• 属性值

1. stretch：弹性盒子沿着侧轴线被拉伸至完全覆盖容器区域（若未设置侧轴方向尺寸则会自动扩展）
2. center：弹性盒子沿侧轴进行居中排列
3. flex-start：弹性盒子将依次从起始位置开始布局
4. flex-end：弹性盒子将依次从结束位置开始布局

9.4 修改主轴方向（flex-direction）

主轴默认在水平方向，侧轴默认在垂直方向

• 属性名：flex-direction
  • 属性值
    1. 行：横向排列，默认从左到右
    2. 列 ：纵向排列，默认自上而下
    3. row-reverse：表示行逆序排列
    4. column-reverse：表示列逆序排列

9.5 弹性伸缩比（flex）

控制弹性盒子的主轴方向的尺寸。

• 属性名：flex
• 属性值：整数数字，表示占用父级剩余尺寸的份数 。

9.6 弹性盒子换行（flex-wrap）

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。

• 属性名：flex-wrap
• 属性值
  • wrap：换行
  • nowrap：不换行（默认）

9.7 行内对齐方式（align-content）

• 属性名：align-content
• 属性值
  1. flex-start：弹性盒子从起始位置开始依次排列（默认值）
  2. flex-end：弹性盒子从终止位置开始依次排列
  3. 居中 ：弹性盒子沿着主轴居中排列
  4. 间距均匀分布于盒子之间 ：弹性盒子沿主轴均匀排列
  5. 围绕中心对齐 ：弹性盒子均匀分布在容器周围
  6. 间距均等分布于两侧及容器间 ：弹性盒子均匀分布在容器周围并保持与容器之间的间距相等

10 定位（position）

灵活的改变盒子在网页中的位置

1. 定位模式：position
2. 边偏移：设置盒子的位置
   • left
   • right
   • top
   • bottom

10.1 相对定位

• position: relative

特点：

• 元素不会浮出状态，并占据其原本的位置。
• 显示模式的特性得以保留。
• 调整边距则会导致其在原有位置上发生偏移。

    div {
    	position: relative;
    	top: 100px;
    	left: 200px;
    }

10.2 绝对定位

• position: absolute

使用场景：子级绝对定位，父级相对定位（子绝父相 ）

特点：

• 不生成标记
  • 显示模式属于块级布局
  • 设置边距偏移会使得最邻近已定位祖先元素发生移动
  • 当所有祖先均未被定位时，则会根据整个页面的位置进行调整

    .father {
    	position: relative;
    }
    
    .father span {
    	position: absolute;
    	top: 0;
    	right: 0;
    }

10.3 定位居中

实现步骤：

1. 确定性定位
2. 水平和垂直边偏移各占50%
3. 子级向左或向上移动自身尺寸的一半（左右或上下外边距为尺寸的一半）

• transform: translate(-50%, -50%)

    img {
    	position: absolute;
    	left: 50%;
    	top: 50%;
    
    	/* margin-left: -265px;
    	margin-top: -127px; */
    
    	/* 50%即为自身宽高的一半 */
    	transform: translate(-50%, -50%);
    }

10.4 固定定位

• position: fixed

场景：元素的位置在网页滚动时不会改变

特点：

• 无视觉占用的元素不会被显示
• 显示模式具有行内块布局
• 边框偏移会根据浏览器窗口调整

    div {
    	position: fixed;
    	top: 0;
    	right: 0;
    
    	width: 500px;
    }

10.5 堆叠层级（z-index）

默认效果：按照标签书写顺序，后来者居上

作用：设置定位元素的层级顺序，改变定位元素的显示顺序

• 属性名：z-index
• 属性值：整数数字 （默认值为0，取值越大，层级越高）

    .box1 {
    	background-color: pink;
    	/* 取值是整数，默认是0，取值越大显示顺序越靠上 */
    	z-index: 1;
    }
    
    .box2 {
    	background-color: skyblue;
    	left: 100px;
    	top: 100px;
    
    	z-index: 2;
    }

11 CSS精灵

CSS Sprites是一种实现网页背景图片合并效果的技术。它通过将多张背景图片合并至同一文件中，并利用backing-position属性精确设置各背景图片的位置来实现效果。

优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度

实现步骤：

请创建一个盒子，并确保其尺寸与小图完全一致。
建议您先创建一个盒子。
设置盒子的背景图像为精灵图。
请在设置完成后，请添加background-position属性，并调整background-position属性值以实现预期效果。
具体操作步骤如下：

1. 通过PxCook工具获取目标图像的左上角坐标信息。
2. 取其负数作为background-position属性值（并将其设为left-top位置）。

PxCook （像素大厨） 是一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别。

开发面板（自动智能识别）
设计面板（手动测量尺寸和颜色）

使用方法：建立项目 → 设置 项目名称、类型（Web） → 单击按钮【创建项目

创建项目

12 CSS修饰属性

12.1 垂直对齐方式（vertical-align）

• 属性名称：vertical-align
  • 属性值
    1. default alignment at the baseline
    2. top alignment
    3. central alignment (default)
    4. bottom alignment

12.2 过渡（transition）

为一个元素在不同状态之间切换的时候添加过渡效果

• 属性名：transitions（复合属性）
• 属性值：time-consuming animation duration (s) * Animate properties can be CSS-specific or all （The transition effect is applied to all properties that differ between the two states）
• The transition property is assigned to the element itself

    img {
    	width: 200px;
    	height: 200px;
    	transition: all 1s;
    }
    
    img:hover {
    	width: 500px;
    	height: 500px;
    }

12.3 透明度（opacity）

设置整个元素的透明度 （包含背景和内容）

• 属性名：opacity
• 属性值：[0,1]
  • 0：完全透明（元素不可见）
  • 1：不透明
  • (0,1)内的小数：半透明

12.4 光标类型（cursor）

鼠标悬停在元素上时指针显示样式

• 属性名：cursor
• 属性值
  1. default：默认值通常是箭头符号
  2. pointer：小手图标提示用户可进行点击操作
  3. text：文字样式选项中显示工字型布局
  4. move：十字光标功能允许用户对文本进行位置调整