CSS定义：层叠样式表（Cascading Style Sheets,缩写为CSS),是一种样式表语言，用来描述HTML文档的呈现（美化内容）。
书写位置：title标签下方添加style双标签，style标签里面书写CSS代码。样式如下：
书写规则：选择器{属性名：属性值；}
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>初识 CSS</title> <style> /* CSS 代码 */ /* 选择器 { CSS 属性} */ /* 属性名和属性值成对出现 → 键值对 */ p { /* 文字颜色 */ color: red; /* 字号 */ font-size: 30px; } </style> </head> <body> <p>体验 CSS</p> </body>
CSS引入方式
内部样式表：学习使用
- CSS代码写在style 标签里面
外部样式表：开发使用
- CSS代码写在单独的CSS文件中（.css)
- 在HTML使用link标签引入
行内样式：配合JavaScript使用
- CSS 写在标签的 style 属性值里
代码示例：
.html
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 引入方式</title> <!-- link 引入外部样式表； rel：关系，样式表 --> <link rel="stylesheet" href="./my.css"> </head> <body> <p>这是 p 标签</p> <!-- 行内，style=" CSS" --> <div style="color: green; font-size: 30px;">这是 div 标签</div> </body>.css
/* 这个文件放 CSS 代码 */ /* 选择器 { CSS 属性 } */ p { color: red; }
选择器
作用：查找标签，设置样式。
基础选择器 ： 标签选择器 、类选择器 、 id选择器 、 通配符选择器
标签选择器
标签选择器：使用标签名作为选择器→选中同名标签设置相同的样式（无法差异化）。
例如：p,h1,div,a,img......
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>标签选择器</title> <style> /* 特点：选中同名标签设置相同的样式，无法差异化同名标签的样式 */ p { color: red; } </style> </head> <body> <p>这是 p 标签</p> <p>1111</p> <p>2222</p> </body>效果图：
类选择器
作用：查找标签，差异化设置标签的显示效果。
步骤：
定义类选择器→.类名
使用类选择器→标签添加class="类名"
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>类选择器</title> <style> /* 定义 */ .red { color: red; } .size { font-size: 50px; } </style> </head> <body> <!-- 使用 --> <!-- 一个类选择器可以给多个标签使用 --> <p class="red">111111</p> <p>222222</p> <!-- 一个标签可以使用多个类名，class属性值写多个类名，类名用空格隔开 --> <div class="red size">div 标签</div> </body>效果图：
注意：
- 类名自定义，不要用纯数字或中文，尽量用英文命名
- 一个类选择器可以供多个标签使用 .
- 一个标签可以使用多个类名，类名之间用空格隔开
id选择器
作用：查找标签，差异化设置标签的显示效果。
场景：id选择器一般配合JavaScript使用，很少用来设置CSS样式
步骤：
. 定义id选择器→#id名
. 使用id选择器→标签添加id="id名"
规则： 同一个id选择器在一个页面只能使用一次
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>id选择器</title> <style> /* 定义 */ #red { color: red; } </style> </head> <body> <!-- 使用 --> <div id="red">div 标签</div> </body>通配符选择器
作用：查找页面所有标签，设置相同样式。（多用于开发初期，清除标签样式）
通配符选择器：*,不需要调用，浏览器自动查找页面所有标签，设置相同的样式
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>通配符选择器</title> <style> * { color: red; } </style> </head>练手案例：画盒子
预实现效果：
代码实现：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>画盒子</title> <style> .red { /* 宽度 */ width: 100px; /* 高度 */ height: 100px; /* 背景色 */ background-color: brown; } .orange { width: 200px; height: 200px; background-color: orange; } </style> </head> <body> <div class="red">div1</div> <div class="orange">div2</div> </body>
文字控制属性
字体大小
属性名： font-size
属性值： 最常用的单位px，文字尺寸
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字体大小</title> <style> /* 经验：谷歌浏览器文字有默认大小 16px */ p { /* font-size 属性必须有单位，否则属性不生效 */ font-size: 30px; } </style> </head> <body> <p>测试字体大小</p> <div>测试默认字体大小</div> </body>效果图：
字体粗细
属性名：font-weight
属性值：
数字（开发使用）
正常 400 加粗 700
关键字
正常 normal 加粗 bold
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字体粗细</title> <style> h3 { font-weight: 400; } div { font-weight: 700; } </style> </head> <body> <h3>h3 标题</h3> <div>div 标签</div> </body>效果图：
字体样式（倾斜）
作用：清除文字默认的倾斜效果
属性名：font-style
属性值：
正常（不倾斜）:normal
倾斜：italic
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字体倾斜</title> <style> em { font-style: normal; } div { font-style: italic; } </style> </head> <body> <em>em 标签</em> <div>div 标签</div> </body>行高
行高的测量方法：从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）。
作用：设置多行文本的间距
属性名：line-height
属性值：
- 数字+px
- 数字（当前标签font-size属性值的倍数）
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>行高</title> <style> p { font-size: 20px; /* line-height: 30px; */ /* 行高值是数字，表示是当前标签字体大小的倍数 */ line-height: 2; } </style> </head> <body> <p>今年受成本驱动、需求拉动以及全球粮价上涨等各种因素叠加影响，我国粮食价格整体上扬，小麦、玉米、大豆价格高位波动，水稻价格运行平稳，优质优价特征明显，农民择机择时售粮，实现种粮收益最大化。但种粮成本持续攀升成为影响农民增收的“拦路虎”。</p> </body>字体族
属性名：font-family
属性值：字体名
font-family:楷体；
拓展（了解）:font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找
注：font-family属性最后设置一 个字体族名 网页开发建议使用无衬线字体
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字体族</title> <style> div { font-family: 楷体; } </style> </head> <body> <div>测试文字</div> </body>font复合属性
使用场景：设置网页文字公共样式
复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。 font:是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写）
注意：字号和字体值必须书写，否则font属性不生效
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>font 属性</title> <style> /* 文字倾斜、文字加粗、字体大小是30px、行高2倍、楷体 */ div { /* font: italic 700 30px/2 楷体; */ /* font 属性必须写字号和字体，否则 属性不生效 */ font: 30px 楷体; /* font: italic 700 30px/2; */ } </style> </head> <body> <div>测试 font 属性</div> </body>文本缩进
属性名：text-indent
属性值：
. 数字+px
. 数字+em (推荐：1em=当前标签的字号大小）
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本缩进</title> <style> p { text-indent: 2em; font-size: 30px; } </style> </head> <body> <p>今年受成本驱动、需求拉动以及全球粮价上涨等各种因素叠加影响，我国粮食价格整体上扬，小麦、玉米、大豆价格高位波动，水稻价格运行平稳，优质优价特征明显，农民择机择时售粮，实现种粮收益最大化。但种粮成本持续攀升成为影响农民增收的“拦路虎”。这是因为，在去年高粮价的刺激下，今年土地租金以及化肥、农药、柴油等农资价格大幅上涨，种粮成本随之增加。加之今年粮食生产遭遇去年北方罕见秋雨秋汛、今年“南旱北涝”等极端天气，虽然没有带来灾害性后果，但一些农户为抗灾付出更多生产成本，种粮农户收益空间进一步收窄。</p> </body>文本对齐方式
作用：控制内容水平对齐方式
属性名：text-align
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本对齐方式</title> <style> h1 { /* 本质：居中的是文字内容，不是标签 */ /* text-align: left; */ text-align: center; /* text-align: right; */ } </style> </head> <body> <h1>标题文字</h1> </body>练手案例：图片居中
预实现效果：
代码实现：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片对齐方式</title> <style> div { text-align: center; } </style> </head> <body> <div> <img src="./雷神.png" alt=""> </div> </body>文本修饰线
属性名：text-decoration
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本修饰线</title> <style> a { /* 无，去掉修饰线 */ text-decoration: none; } div { /* 下划线 */ text-decoration: underline; } p { text-decoration: line-through; } span { text-decoration: overline; } </style> </head> <body> <a href="#">a 标签，去掉下划线</a> <div>div 标签，添加下划线</div> <p>p 标签，添加删除线</p> <span>span 标签，添加顶划线</span> </body>效果图：
文字颜色
属性名：color
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文字颜色</title> <style> h1 { background-color: aqua; /* color: red; */ /* color: rgb(0,255,0); */ /* color: rgba(0,0,0,0.8); */ /* color: #0000ff; */ color: #00f; } </style> </head> <body> <h1>h1 标签</h1> </body>
复合选择器
后代选择器
后代选择器：选中某元素的后代元素。
选择器写法：父选择器 子选择器{CSS属性},父子选择器之间用空格隔开。
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>后代选择器</title> <style> /* div 里面的 span 文字颜色是红色 */ /* 后代选择器，选中所有后代，包含儿子、孙子、重孙子... */ div span { color: red; } </style> </head> <body> <span>span 标签</span> <div> <span>这是div 的儿子 span</span> <p> <span>孙子 span</span> </p> </div> </body>效果图：
子代选择器
子代选择器：选中某元素的子代元素（最近的子级）。
选择器写法：父选择器>子选择器{CSS属性},父子选择器之间用>隔开。
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>子代选择器</title> <style> /* div 的儿子 span 文字颜色是红色 */ div > span { color: red; } </style> </head> <body> <div> <span>儿子 span</span> <p> <span>孙子 span</span> </p> </div> </body>效果图：
并集选择器
并集选择器：选中多组标签设置相同的样式。
选择器写法：选择器1,选择器2,…选择器N{CSS属性},选择器之间用，隔开。
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>并集选择器</title> <style> /* div、p、span 文字颜色是红色 */ div, p, span { color: red; } </style> </head> <body> <div>div 标签</div> <p>p 标签</p> <span>span 标签</span> </body>注：最后一个选择器span后没有逗号","
效果图：
交集选择器
交集选择器：选中同时满足多个条件的元素。
选择器写法：选择器1选择器2{CSS属性},选择器之间连写（例如下图的p.box），没有任何符号。
注：如果交集选择器中有标签选择器，标签选择器必须书写在最前面。
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>交集选择器</title> <style> /* 第一个 p 标签文字颜色是红色 */ /* 既又的关系：既是 p 标签，又是有 box 类 */ p.box { color: red; } </style> </head> <body> <p class="box">p 标签，使用了类选择器 box</p> <p>p 标签</p> <div class="box">div 标签，使用了类选择器</div> </body>效果图：
伪类选择器
伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式。
鼠标悬停状态：选择器 :hover{CSS属性}
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>伪类选择器</title> <style> /* 任何标签都可以设置鼠标悬停的状态 */ a:hover { color: red; } /* div:hover */ .box:hover { color: green; } </style> </head> <body> <a href="#">a 标签，超链接</a> <div class="box">div 标签</div> </body>伪类超链接
四个超链接状态：
注：如果要给超链接设置以上四个状态，需要按LVHA的顺序书写。
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>超链接伪类</title> <style> /* a:link { color: red; } a:visited { color: green; } a:hover { color: blue; } a:active { color: orange; } */ /* 工作中，一个 a 标签选择器设置超链接的样式， hover状态特殊设置 */ a { color: red; } a:hover { color: green; } </style> </head> <body> <a href="#">a 标签，测试伪类</a> </body>结构伪类选择器
作用：根据元素的结构关系查找元素。（E为标签名）
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>结构伪类选择器-基本使用</title> <style> /* 第一个 */ li:first-child { background-color: red; } /* 最后一个 */ li:last-child { background-color: pink; } /* 任意个 */ li:nth-child(3) { background-color: gold; } /* li:nth-child(1) { background-color: green; } */ </style> </head> <body> <ul> <li>li 1</li> <li>li 2</li> <li>li 3</li> <li>li 4</li> <li>li 5</li> <li>li 6</li> <li>li 7</li> <li>li 8</li> </ul> </body>效果图：
:nth-child(公式）
作用：根据元素的结构关系查找多个元素。
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>结构伪类选择器-公式用法</title> <style> /* 偶数 */ /* li:nth-child(2n) { background-color: green; } */ /* 奇数 */ /* li:nth-child(2n+1) { background-color: green; } */ /* 倍数 */ /* li:nth-child(5n) { background-color: green; } */ /* n 从0开始 */ /* 第5个以后的标签 */ /* li:nth-child(n+5) { background-color: green; } */ /* 第5个以前的标签 */ li:nth-child(-n+5) { background-color: green; } </style> </head>伪元素选择器
作用：创建虚拟元素（伪元素）,用来摆放装饰性的内容。
注：
- 必须设置 content:" "属性，用来设置伪元素的内容，如果没有内容，则引号留空即可
- 伪元素默认是行内显示模式
- 权重和标签选择器相同
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>伪元素选择器</title> <style> div { width: 300px; height: 300px; background-color: pink; } div::before { content:"I"; width: 100px; height: 100px; background-color: brown; display: block; } div::after { content:"You"; width: 100px; height: 100px; background-color: orange; display: inline-block; } </style> </head> <body> <!-- 标签内容：I爱You --> <div>爱</div> </body>效果图：
CSS三大特性
继承性
继承性：子级默认继承父级的文字控制属性。
特殊点：如果子级标签有自己的样式则不继承父级的
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS特性-继承性</title> <style> body { font-size: 30px; color: red; font-weight: 700; } </style> </head> <body> <div>div 标签</div> <p>p 标签</p> <span>span 标签</span> <!-- 如果标签自己有样式则生效自己的样式，不继承 --> <a href="#">a 标签</a> <h1>h1 标签</h1> </body>效果图：
层叠性
特点：
- 相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性
- 不同的属性会叠加：不同的CSS属性都生效
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS特性-层叠性</title> <style> /* 覆盖；叠加 */ div { color: green; font-size: 30px; } div { color: red; font-weight: 700; } </style> </head> <body> <div>div 标签</div> </body>效果图：
优先级
优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。
规则：选择器优先级高的样式生效。
公式：通配符选择器<标签选择器<类选择器<id选择器<行内样式< !important (选中标签的范围越大，优先级越低）
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 特性-优先级</title> <style> /* 技巧：选择器选中标签的范围越大，优先级/权重 越低 */ div { color: green; } /* !important 提权功能，提高权重/优先级到 最高，慎用 */ * { color: red !important; } .box { color: blue; } #test { color: orange; } </style> </head> <body> <div class="box" id="test" style="color: purple;">div 标签</div> </body>优先级-叠加计算规则
叠加计算：如果是复合选择器，则需要权重叠加计算。
公式：(每一级之间不存在进位） (行内样式，id选择器个数，类选择器个数，标签选择器个数）
规则：
- 从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较 !important 权重最高
- 继承权重最低
背景属性
背景图
网页中，使用背景图实现装饰性的图片效果。
属性名：background-image(bgi)
属性值：url(背景图URL)
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>背景图</title> <style> /* 盒子是 400 * 400 */ div { width: 400px; height: 400px; /* 背景图默认是平铺（复制）的效果 */ background-image: url(./images/1.png); } </style> </head> <body> <div>div 标签</div> </body>效果图：
背景图平铺方式
属性名： background-repeat (bgr)
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>背景图平铺方式</title> <style> div { width: 400px; height: 400px; background-color: pink; background-image: url(./images/1.png); /* 不平铺：盒子的左上角显示一张背景图 */ background-repeat: no-repeat; /* background-repeat: repeat; */ /* background-repeat: repeat-x; */ /* background-repeat: repeat-y; */ } </style> </head> <body> <div>div 标签</div> </body>背景图位置
属性名：background-position(bgp)
属性值：水平方向位置 垂直方向位置
坐标（数字+px,正负都可以）
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>背景图位置</title> <style> div { width: 400px; height: 400px; background-color: pink; background-image: url(./images/1.png); background-repeat: no-repeat; /* 左上角 */ /* background-position: 0 0; */ /* background-position: left top; */ /* background-position: right bottom; */ /* 水平：正数向右，负数向左 */ /* background-position: 50px 0; */ /* background-position: -50px 0; */ /* 垂直：正数向下，负数向上 */ /* background-position: 0 100px; */ /* background-position: 0 -100px; */ /* background-position: 50px center; */ /* 特殊写法 */ /* background-position: bottom left; */ /* 关键字可以只写一个，另一个方向居中 */ /* background-position: bottom; */ /* 只写一个数字表示水平方向，垂直方向居中 */ background-position: 50px; } </style> </head> <body> <div>div 标签</div> </body>背景图缩放
作用：设置背景图大小
属性名：background-size(bgz)
常用属性值：
关键字
- cover: 等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
- contain:等比例缩放背景图片以完全装入背景区，可能背景区部分空白
百分比：根据盒子尺寸计算图片大小
数字+单位（例如：px)
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>背景图缩放</title> <style> div { width: 500px; height: 300px; background-color: pink; background-image: url(./images/1.png); background-repeat: no-repeat; /* contain：如果图的宽高跟盒子尺寸相等停止缩放，可能导致盒子有露白 */ /* background-size: contain; */ /* cover：图片完全覆盖盒子，可能导致图片显示不全 */ /* background-size: cover; */ /* 100% 图片的宽度跟盒子宽度一样，图片的高度按照图片比例等比缩放 */ background-size: 100%; } </style> </head> <body> <div>div 标签</div> </body>背景图固定
作用： 背景不会随着元素的内容滚动
属性名：background-attachment (bga)
属性值：fixed
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>背景图固定</title> <style> body { background-image: url(./images/bg.jpg); background-repeat: no-repeat; background-position: center top; background-attachment: fixed; } </style> </head> <body> <p>测试文字，撑开body，让浏览器有滚动条</p> <p>测试文字，撑开body，让浏览器有滚动条</p> ...... <p>测试文字，撑开body，让浏览器有滚动条</p> </body>背景复合属性
属性名：background(bg)
属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（空格隔开各个属性值，不区分顺序）
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>background属性</title> <style> div { width: 400px; height: 400px; /* background: pink url(./images/1.png) no-repeat center bottom/cover; */ background: pink url(./images/1.png) no-repeat center bottom/contain; } </style> </head> <body> <div>div 标签</div> </body>
显示模式
块级元素
特点：独占一行 ； 宽度默认是父级的100% ；添加宽高属性生效
行内元素
特点：一行共存多个；宽高由内容撑开；添加宽高属性不生效
行内块元素
特点：一行共存多个；宽高默认由内容撑开；添加宽高属性生效
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>显示模式</title> <style> /* 块级：独占一行；宽度默认是父级的100%；加宽高生效 */ div { width: 100px; height: 100px; } .div1 { background-color: brown; } .div2 { background-color: orange; } /* 行内：一行共存多个；尺寸由内容撑开；加宽高 不 生效 */ span { width: 200px; height: 200px; } .span1 { background-color: brown; } .span2 { background-color: orange; } /* 行内块：一行共存多个；默认尺寸由内容撑开；加宽高生效 */ img { width: 100px; height: 100px; } </style> </head> <body> <!-- 块元素 --> <div class="div1">div 标签1</div> <div class="div2">div 标签2</div> <!-- 行内元素 --> <span class="span1">span11111111</span> <span class="span2">span1</span> <!-- 行内块元素 --> <img src="./images/1.png" alt=""> <img src="./images/1.png" alt=""> </body>效果图：
转换显示模式
属性名：display
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>显示模式转换</title> <style> /* 块级：独占一行；宽度默认是父级的100%；加宽高生效 */ div { width: 100px; height: 100px; /* display: inline-block; */ display: inline; } .div1 { background-color: brown; } .div2 { background-color: orange; } /* 行内：一行共存多个；尺寸由内容撑开；加宽高 不 生效 */ span { width: 200px; height: 200px; /* display: block; */ display: inline-block; } .span1 { background-color: brown; } .span2 { background-color: orange; } /* 行内块：一行共存多个；默认尺寸由内容撑开；加宽高生效 */ img { width: 100px; height: 100px; display: block; } </style> </head>效果图：
盒子模型
盒子模型-组成
盒子模型重要组成部分：
. 内容区域-width & height
. 内边距-padding(出现在内容与盒子边缘之间）
. 边框线-border
. 外边距-margin(出现在盒子外面）
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子模型-组成</title> <style> div { width: 200px; height: 200px; background-color: pink; /* 内容与盒子边缘之间 */ padding: 20px; border: 1px solid #000; /* 出现在盒子外面，拉开两个盒子之间的距离 */ margin: 50px; } </style> </head> <body> <div>div 标签</div> </body>效果图：
盒子模型-边框线
属性名：border(bd)
属性值： 边框线粗细 线条样式 颜色 (不区分顺序）
代码示例：
<style> div { width: 200px; height: 200px; background-color: pink; /* 实线 */ /* border: 1px solid #000; */ /* 虚线 */ /* border: 2px dashed red; */ /* 点线 */ border: 3px dotted green; } </style>单方向边框线
属性名：border-方位名词（bd+方位名词首字母，例如，bdl)
属性值：边框线粗细 线条样式 颜色（不区分顺序）
代码示例：
<style> div { width: 200px; height: 200px; background-color: pink; border-top: 1px solid #000; border-right: 2px dashed red; border-bottom: 5px dotted green; border-left: 10px solid orange; } </style>效果图：
盒子模型-内边距
作用：设置内容与盒子边缘之间的距离。
属性名： padding/padding-方位名词
代码示例：
<style> div { width: 200px; height: 200px; background-color: pink; /* padding: 20px; */ padding-top: 10px; padding-right: 20px; padding-bottom: 40px; padding-left: 80px; } </style>padding的多值写法
代码示例：
<style> div { width: 200px; height: 200px; background-color: pink; /* 四值：上 右 下 左 */ /* padding: 10px 20px 40px 80px; */ /* 三值：上 左右 下 */ /* padding: 10px 40px 80px; */ /* 两值：上下 左右 */ padding: 10px 80px; /* 记忆方法：从上开始顺时针转一圈，如果当前方向没有数值，取值跟对面一样 */ } </style>盒子模型-尺寸计算
默认情况：
盒子尺寸=内容尺寸+border尺寸+内边距尺寸
结论：给盒子加border/padding会撑大盒子
解决方法：
手动做减法，减掉border/padding的尺寸
内减模式：box-sizing:border-box
代码示例：
<style> div { width: 200px; height: 200px; /* 手动减法 */ /* width: 160px; height: 160px; */ background-color: pink; padding: 20px; /* 內减模式：不需要手动减法，加padding和border不会撑大盒子 */ box-sizing: border-box; } </style>盒子模型-外边距
作用：拉开两个盒子之间的距离
属性名：margin
提示：与padding属性值写法、含义相同
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>版心居中</title> <style> div { /* 版心居中要求：盒子要有宽度 */ width: 1000px; height: 200px; background-color: pink; /* 外边距 不会 撑大盒子 */ /* margin: 50px; */ /* margin-left: 100px; */ /* margin: 50px 100px; */ margin: 0 auto; } </style> </head> <body> <div>版心内容</div> </body>效果图：
清除默认样式
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>清除默认样式</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } /* 去掉列表的项目符号 */ li { list-style: none; } </style> </head> <body> <h1>标题</h1> <p>ppppp</p> <ul> <li>li</li> </ul> </body>效果图：
盒子模型-元素溢出
作用：控制溢出元素的内容的显示方式。
属性名：overflow
代码示例：
<style> div { width: 200px; height: 200px; background-color: pink; overflow: hidden; /* overflow: scroll; */ /* overflow: auto; */ } </style>外边距问题-合并现象
场景：垂直排列的兄弟元素，上下margin会合并
现象：取两个margin中的较大值生效
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>外边距-合并现象</title> <style> .one { width: 100px; height: 100px; background-color: brown; margin-bottom: 80px; } .two { width: 100px; height: 100px; background-color: orange; margin-top: 50px; } </style> </head> <body> <div class="one">one</div> <div class="two">two</div> </body>外边距问题-塌陷问题
场景：父子级的标签，子级的添加上外边距会产生塌陷问题
现象：导致父级一起向下移动
解决方法：
- 取消子级margin,父级设置padding
- 父级设置 overflow:hidden （原理：先固定父级盒子的位置）
- 父级设置 border-top（原理：先固定父级盒子的位置）
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>外边距-塌陷问题</title> <style> .father { width: 300px; height: 300px; background-color: pink; /* padding-top: 50px; box-sizing: border-box; */ /* 溢出隐藏 */ /* overflow: hidden; */ border-top: 1px solid #000; } .son { width: 100px; height: 100px; background-color: orange; margin-top: 50px; } </style> </head> <body> <div class="father"> <div class="son">son</div> </div> </body>行内元素-内外边距问题
场景：行内元素添加margin和padding,无法改变元素垂直位置（水平位置可以改变）
解决方法：给行内元素添加line-height可以改变垂直位置
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>行内元素的垂直内外边距</title> <style> span { margin: 50px; padding: 20px; line-height: 100px; } </style> </head> <body> <span>span标签</span> <span>span标签</span> </body>效果图：
盒子模型-圆角
作用：设置元素的外边框为圆角。
属性名：border-radius
属性值：数字+px/百分比
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>圆角-基本使用</title> <style> div { margin: 50px auto; width: 200px; height: 200px; background-color: orange; /* border-radius: 20px; */ /* 记忆：从左上角顺时针赋值，没有取值的角与对角取值相同 */ /* 四值：左上 右上 右下 左下 */ /* border-radius: 10px 20px 40px 80px; */ /* 三值：左上 右上+左下 右下 */ /* border-radius: 10px 40px 80px; */ /* 两值：左上+右下 右上+左下 */ border-radius: 10px 80px; } </style> </head> <body> <div></div> </body>效果图：
常见应用 - 正圆、胶囊形状
给正方形盒子设置圆角属性值为宽高的一半/50%
给长方形盒子设置圆角属性值为盒子高度的一半
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>圆角-特殊场景</title> <style> img { width: 200px; height: 200px; /* border-radius: 100px; */ /* 最大值是50%。超过50%没有效果 */ border-radius: 50%; } div { width: 200px; height: 80px; background-color: orange; border-radius: 40px; } </style> </head> <body> <!-- 正圆形 -- 头像 --> <img src="./images/1.jpg" alt=""> <!-- 胶囊状 --> <div></div> </body>盒子模型-阴影
作用：给元素设置阴影效果
属性名： box-shadow（复合属性）
属性值：X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影
注意：
- X轴偏移量 和 Y 轴偏移量 必须书写
- 默认是外阴影，内阴影需要添加 inset
代码示例：
<style> div { margin: 50px auto; width: 200px; height: 80px; background-color: orange; box-shadow: 2px 5px 10px 1px rgba(0,0,0,0.5) inset; } </style>效果图：
标准流
标准流也叫文档流，指的是标签在页面中默认的排布规则。
例如：块元素独占一行，行内元素可以一行显示多个。
浮动
基本使用
作用：让块元素水平排列。
属性名：float
属性值
left:左对齐
right:右对齐
特点：
浮动后的盒子顶对齐
浮动后的盒子具备行内块特点
浮动后的盒子脱标，不占用标准流的位置
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>浮动-基本使用</title> <style> /* 特点：顶对齐；具备行内块显示模式特点；浮动的盒子会脱标 */ .one { width: 100px; height: 100px; background-color: brown; float: left; } .two { width: 200px; height: 200px; background-color: orange; /* float: left; */ } </style> </head> <body> <div class="one">one</div> <div class="two">two</div> </body>效果图：
区域布局
预实现效果：
代码实现：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>浮动-产品布局</title> <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> </head> <body> <!-- 版心：左右，右面：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> </body>清除浮动
场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）
解决方法：清除浮动（清除浮动带来的影响）
方法一：额外标签法
在父元素内容的最后添加一个块级元素，设置CSS属性clear:both
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>清除浮动-额外标签法</title> <style> .father { 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; } /* 额外标签法 */ .clearfix { clear: both; } </style> </head> <body> <div class="father"> <div class="left"></div> <div class="right"></div> <div class="clearfix"></div> </div> <div class="bottom"></div> </body>方法二：单伪元素法
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>清除浮动-单伪元素法</title> <style> .father { 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; } /* 单伪元素法 */ .clearfix::after { content: ""; display: block; clear: both; } </style> </head> <body> <div class="father clearfix"> <div class="left"></div> <div class="right"></div> </div> <div class="bottom"></div> </body>方法三：双伪元素法（推荐）
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>清除浮动-双伪元素法</title> <style> .father { 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; } /* before 解决外边距塌陷问题 */ /* 双伪元素法 */ .clearfix::before, .clearfix::after { content: ""; display: table; } /* after 清除浮动 */ .clearfix::after { clear: both; } </style> </head> <body> <div class="father clearfix"> <div class="left"></div> <div class="right"></div> </div> <div class="bottom"></div> </body>方法四：overflow
父元素添加CSS属性overflow:hidden
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>清除浮动-overflow</title> <style> .father { margin: 10px auto; width: 1200px; /* height: 300px; */ background-color: pink; overflow: hidden; } .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> </head> <body> <div class="father"> <div class="left"></div> <div class="right"></div> </div> <div class="bottom"></div> </body>
flex布局
Flex布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。 Flex模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。
Flex-组成
设置方式：给父元素设置display:flex（df）,子元素可以自动挤压或拉伸
组成部分：
- 弹性容器
- 弹性盒子
- 主轴：默认在水平方向
- 侧轴/交叉轴：默认在垂直方向
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>flex布局-组成</title> <style> /* 弹性容器 */ .box { display: flex; height: 300px; border: 1px solid #000; } /* 弹性盒子：沿着主轴方向排列 */ .box div { width: 200px; /* height: 100px; */ background-color: pink; } </style> </head> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>1</div> <div>2</div> <div>3</div> <div>1</div> <div>2</div> <div>3</div> </div> </body>效果图：
主轴对齐方式
属性名：justify-content
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>flex布局-主轴对齐方式</title> <style> .box { display: flex; /* justify-content: flex-start; */ /* justify-content: flex-end; */ /* 居中 */ /* justify-content: center; */ /* 父级剩余的尺寸分配成间距 */ /* 弹性盒子之间的间距相等 */ /* justify-content: space-between; */ /* 间距出现在弹性盒子两侧 */ /* 视觉效果：弹性盒子之间的间距是两端间距的2倍 */ /* justify-content: space-around; */ /* 各个间距都相等 */ justify-content: space-evenly; height: 300px; border: 1px solid #000; } .box div { width: 200px; height: 100px; background-color: pink; } </style> </head> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> </div> </body>侧轴对齐方式
属性名
align-items:当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
align-self:单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>flex布局-侧轴对齐方式</title> <style> .box { display: flex; /* 弹性盒子在侧轴方向没有尺寸才能拉伸 */ /* align-items: stretch; */ /* align-items: center; */ /* align-items: flex-start; */ align-items: flex-end; height: 300px; border: 1px solid #000; } /* 第二个div，侧轴居中对齐 */ .box div:nth-child(2) { align-self: center; } .box div { width: 200px; height: 100px; background-color: pink; } </style> </head> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> </div> </body>效果图：
修改主轴方向
主轴默认在水平方向，侧轴默认在垂直方向
属性名： flex-direction
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>flex布局-修改主轴方向</title> <style> .box { display: flex; /* 修改主轴方向 垂直方向；侧轴自动变换到水平方向 */ flex-direction: column; /* 主轴在垂直，视觉效果：垂直居中 */ justify-content: center; /* 侧轴在水平，视觉效果：水平居中 */ align-items: center; width: 150px; height: 120px; background-color: pink; } img { width: 32px; height: 32px; } </style> </head> <body> <div class="box"> <img src="./images/1.png" alt=""> <span>媒体</span> </div> </body>效果图：
弹性伸缩比
作用：控制弹性盒子的主轴方向的尺寸。
属性名：flex
属性值：整数数字，表示占用父级剩余尺寸的份数。
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>flex布局-弹性伸缩比</title> <style> /* 默认情况下，主轴方向尺寸是靠内容撑开；侧轴默认拉伸 */ .box { display: flex; flex-direction: column; height: 300px; border: 1px solid #000; } .box div { /* height: 100px; */ background-color: pink; } .box div:nth-child(1) { width: 200px; } .box div:nth-child(2) { flex: 1; } .box div:nth-child(3) { flex: 2; } </style> </head> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> </div> </body>弹性盒子换行
弹性盒子可以自动挤压或拉伸， 默认情况下，所有弹性盒子都在一行显示。
属性名：flex-wrap
属性值
wrap:换行
nowrap:不换行（默认）
代码示例：<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>flex布局-弹性换行</title> <style> .box { display: flex; flex-wrap: wrap; /* 不换行 */ /* flex-wrap: nowrap; */ justify-content: space-between; height: 300px; border: 1px solid #000; } .box div { width: 450px; height: 100px; background-color: pink; } </style> </head> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> </div> </body>效果图：
行对齐方式
属性名：align-content
代码示例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>flex布局-行对齐方式</title> <style> .box { display: flex; flex-wrap: wrap; justify-content: space-between; /* 调整 行对齐方式：对单行弹性盒子不生效 */ /* align-content: flex-start; */ /* align-content: flex-end; */ /* align-content: center; */ /* align-content: space-between; */ /* align-content: space-around; */ /* 没有代码提示 */ align-content: space-evenly; height: 400px; border: 1px solid #000; } .box div { width: 200px; height: 100px; background-color: pink; } </style> </head> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div> </body>
2031
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
