目录
CSS 简介
层叠样式表（Cascading Style Sheets）的简称。也是一种标记语言。
CSS 主要可以设置 HTML 页面中的文本内容（字体、大小、对齐方式）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
CSS 作用主要是让 HTML 专注的去做结构呈现，样式内容交给给 CSS ，即 结构（HTML
） 和 样式（CSS）相分离。
CSS 语法规范
CSS 规则由两个主要的部分组成：选择器以及一条或者多条声明。
h1 {color:red; font-size:25px}上面的代码中
h1 为选择器，
color 和 font-size 为属性，
red 和 25px 为值，
color:red 和 font-size:25px 为声明，之间用 ; 分隔
选择器：给谁改样式
声明：改成什么样式
<style>
/* 选择器 {样式} */
/* 给谁修改样式 {改成什么样式}*/
p{
/* 修改为 20 个像素 */
font-size: 20px;
/* 修改为 红色 */
color:red;
}
</style>
- 选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
- 属性和属性值是以 “ 键值对 ” 的形式出现
- 属性是对指定的对象设置样式属性，例如字体大小，文本颜色等
- 属性和属性值之间用英文 “ : ” 分开
- 多个键值对之间用英文 “ ; ” 区分
CSS 代码风格
1、样式格式书写
- 紧凑格式
h1 { color: deeppink; font-size: 20px }- 展开格式
h1{
color: red;
font-size: 20px;
}第二种风格更加直观。
2、样式大小写
html 不区分大小写。建议小写。
3、空格规范
- 属性值前面、冒号后面都保留一个空格
h1 {
color: red;
}- 选择器（标签）和大括号中间保留空格
h1 {}CSS 选择器
选择器的分类
基础选择器和复合选择器两大类
- 基础选择器是由单个选择器组成
- 基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器
基础选择器
标签选择器
指 HTML标签名称 作为选择器，按标签名称分类，为页面中某一类标签指定的统一的 CSS 样式。
-
语法：
标签名 { 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; }-
作用：
标签选择器可以把某一类标签全部选择出来，比如所有<div>标签。
-
优点：
能快速的为页面中同类型的标签统一设置样式。
-
缺点：
不能设计差异化样式，只能选择全部的当前标签。
类选择器
单独选一个或者某几个标签进行样式设置。
-
语法：
.类名 { 属性1: 属性值1; 属性2: 属性值2; }结构需要使用 class 属性 来调用 class 类的信息
<div class="类名"><div>
注意：
- 类选择器使用 “ . ” (英文符号) 进行标识，后面紧跟类名（自定义）。
- 可以理解为给标签起一个名字。
- 长名字或者词组可以使用中横线（-）来作为选择器命名。
- 不要使用纯数字、中文等名称，尽量使用英文字母来表示。
- 命名要有意义。
- 命名规范。
多类名：
给一个标签指定多个类名，达到更多选择的目的。一个标签有多个类名。多类名的使用方式
<div class="red font20"><div>
- 在标签class属性中写多个类名。
- 多个类名之间用空格分开。
- 这个标签就可以具有这些类名的样式。
使用场景
- 可以把一些标签元素相同的样式（共同的部分）放到一个类里面。
- 这些标签可以通过调用这个公共的类，然后再调用自身独特的类。
- 节省CSS代码，同一修改方便。
id 选择器
id选择器可以为标有特定的id的HTML元素指定特定的样式。
HTML 元素以 id属性 来设置id选择器，CSS 中 id 选择器以 ”#“ 来定义
-
语法：
#id名 { 属性1: 属性值1; 属性2: 属性值2; }
注意：
只能调用一次。
通配符选择器
在 CSS 中，通配符选择器使用 ” * “ 定义，他表示选取页面中的所有元素（标签）
-
语法：
* { 属性1: 属性值1; 属性2: 属性值2； }
通配符选择器不需要调用，自动就给所有标签使用样式
CSS 字体属性
字体系列
CSS 使用 font-family 属性定义文本字体系列。
p { font-family: "微软雅黑"; }
div { font-family: Arial, "Microsoft Yahei", "微软雅黑"; }- 各个字体之间必须使用英文状态下的逗号隔开。
- 一般情况下，如果有空格隔开的多个单词组成的字体，加引号。
- 尽量使用系统默认自带的字体，保证任何用户的浏览器中都能正常显示。
- 常见的几种字体，body { font-family: 'Microsoft YaHei', tahoma, arial, 'Hiragino Sans GB'; }
字体大小
CSS 使用 font-size 属性定义字体大小。
p {
font-size: 20px;
}- px （像素）大小是网页的常用的单位。
- 谷歌浏览器默认字体大小为 16px。
- 不同的浏览器可能默认显示的字号大小不一致。
- 可以给 body 指定整个页面文字的大小。
字体粗细
CSS 使用 font-weight 属性设置文本字体的粗细。
p {
/* 这个 700 后面不需要单位 */
font-weight: 700;
}| 属性值 | 描述 |
| normal | 默认值 |
| bold | 定义粗体 |
| 100 - 900 | 400 = normal，700=bold （不跟单位） |
文字样式
CSS 是使用 font-style 属性设置文本的风格。
p {
font-style: normal;
}| 属性值 | 作用 |
| normal | 默认值，；浏览器会显示标准的字体样式。 |
| italic | 浏览器会显示倾斜的字体样式。 |
字体复合属性
字体复合属性可以把以上文字样式综合来写。可以节省代码。
body {
font: font-style font-weight font-size/line-height font-family;
}只能以这个顺序来写。
/* 复合属性 */
div {
/* font-style: italic;
font-weight: 700;
font-size: 16px;
font-family: "黑体"; */
/* 上面的代码很繁琐 */
/* 下面是格式 */
/* font: font-style font-weight font-size/line-height font-family; */
font: italic 700 20px "黑体";
}- 使用 font 属性时，必须按上面的语法格式中的顺序写，属性之间用空格分开
- 不需要设置的属性可以省略，但必须保留 font-size 和 font-family 属性，否则 font 属性不起作用
CSS 文本属性
文本颜色
CSS 使用 color 属性用于定义文本的颜色。
div {
color: red;
}| 表示 | 属性值 |
| 预定义的颜色值 | red、green、blue、... |
| 十六进制 | #FF0000、#FF6600、... |
| RGB代码 | rgb(255, 0, 0) 或者 rgb(100%, 0%, 0%) |
对齐方式
text-align 属性用于设置元素内文本内容的水平对齐方式。
div {
text-align: center;
}| 属性值 | 解释 |
| left | 左对齐（默认） |
| right | 右对齐 |
| center | 居中 |
装饰文本
text-decoration 属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等。
div {
text-decoration: underline;
}| 属性值 | 描述 |
| none | 默认，没有修实线（去掉链接下划线） |
| underline | 下划线，链接自带下划线 |
| overline | 上划线 |
| line-through | 删除线 |
文本缩进
text-indent 属性用来指定文本的第一行的缩进，通常是将段落首行缩进
div {
text-indent: 10px;
}通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，长度可以为负的
p {
text-indent: 2em;
}em 是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的 1 个文字大小
行间距
line-height 属性用于设置行间距（行高），可以控制文字行与行之间的距离。
p {
line-height: 26px;
}文本有文本高度、上间距、下间距。
修改行高是修改上间距和下间距，文本高度是 16px，多出来的被上间距和下间距平分。
CSS 的引入方式
按照 CSS 样式书写的位置（或者引入的方式），CSS 样式表可以分为三类。
1、行内样式表（行内式）
2、内部样式表（嵌入式）
3、外部样式表（链接式）
内部样式表
写到 HTML 页面内部，将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中。
这个标签理论上可以放到 HTML 文档的任何地方，但一般放在文档的 <head> 标签中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
p {
line-height: 50px;
}
</style>
<title>Document</title>
</head>
<body>
<p>这是一段测试</p>
</body>
</html>- 可以控制整个 HTML 页面。
- 代码结构清晰，但并没有完全分离。
- 使用内部样式设定 CSS，通常也被称为 嵌入式引入，这种方式是常用的方法。
行内样式表
行内样式表是元素标签内部的style属性中设置 CSS 样式。适合修改简单样式。
<div style="color: red; font-size: 12px;">这是一段测试</div>- style 就是标签的属性。
- 在双引号中间，写法要符合 CSS 规范。
- 可以控制当前的标签样式。
- 简单样式的时候可以使用，不推荐。
- 使用行内样式表设定 CSS，通常也称为 行内式引入。
外部样式表
实际开发中都是外部样式表，适合样式多的情况，样式单独写到 CSS 文件中去，之后将CSS引入到 HTML 页面中使用。
引入方式：
- 新建一个后缀为 .css 的样式文件，把所有 CSS 代码都放在其中。
- 在 HTML 页面中，使用 <link>标签引入这个文件。
<link rel="stylesheet" href="css文件路径">| 属性 | 作用 |
| rel | 定义当前文档与被链接文档之间的关系，这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。 |
| href | 定义所链接外部样式表文件的URL，可以式相对路径，也可以是绝对路径。 |
Chrome 调试工具
在 Chrome 内按 F12，或者右击页面空白处-检查。
使用调试工具：
- ctrl+滚轮 可以放大开发者工具代码大小。
- 左边是 HTML 元素结构，右边是 CSS 样式。
- 右边 CSS 样式可以改变数值（左右箭头或者直接输入）和查看颜色.
- ctrl + 0 复原浏览器大小。
- 如果点击元素，发现右侧没有样式引入，可能是类名或者样式引入错误。
- 如果有样式，但样式前面有 黄色感叹号 提示，则是样式书写错误。
Emmet 语法
前生是 Zen coding，它使用缩写来提高 html/CSS 编写速度。Vscode 内部已经继承语法。
快速生成HTML结构语法
- 生成标签，直接输入标签名然后按 tab 键，生成对应标签。
- 如果想要生成多个相同的标签 加上 * 就可以，比如 div*3，就生成 3 个标签。
- 如果有父子关系的标签，可以使用 > 比如 ul> li 就可以了。
- 如果有兄弟关系的标签，使用 + 就可以了比如 div+p。
- 如果生成带有 类名 或者 id 名字的，直接写 .demo 或者 #two 按 tab 键就可以。
- 如果生成的 div 类名是有顺序的，可以使用自增符号 $ 如 .demo$*5 就有 5 个demo排序。
- 如果想在生成标签内部写内容可以使用 {} 表示。
<!DOCTYPE html>
<html lang="ch-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- div*5 不需要空格进行分隔-->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<!-- ul>li 按tab 父子关系-->
<ul>
<li></li>
</ul>
<!-- div+p 按tab 兄弟关系 -->
<div></div>
<p></p>
<!-- .nav 按tab 快速生成带nav class 的div标签 -->
<div class="nav"></div>
<!-- #banner 按tab 快速生成带banner id 的div标签 -->
<div id="banner"></div>
<!-- p.one （class） p#one （id）生成 p 的标签-->
<p class="one"></p>
<p id="one"></p>
<!-- .demo$*5 生成有顺序的含 class 的标签 -->
<!-- $ 是自增符 -->
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>
<!-- p.name$*3 修改标签的方式和上面的相同 -->
<p class="name1"></p>
<p class="name2"></p>
<p class="name3"></p>
<!-- 修改为 id -->
<p id="name1"></p>
<p id="name2"></p>
<!-- div{文字} 像生成的标签里面默认显示几个文字 -->
<div>这是一段测试</div>
<div>这是一段测试</div>
<div>这是一段测试</div>
<!-- p{文字} 换标签 -->
<p>这是一段测试</p>
<p>这是一段测试</p>
<p>这是一段测试</p>
<p>这是一段测试</p>
<!-- div{&}*5 配合 $ 自增符号实现文本内容自增 -->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</body>
</html>快速生成 CSS 样式语法
- w200 按 tab 可以生成 width: 200px;
- lh26 按 tab 可以生成 line-height: 26px;
- tac 按 tab 可以生成 text-align: center;
快速格式化代码
标签对齐 shift + alt + f （visual studio code）
- 文件->【首选项】->【设置】
- 搜索 emmet.include;
- 在setting,json 下的【用户】中添加一下语句
"editor.formatOnType":true,
"editor.formOnSave":true新版本搜索 format 找到 setting.json
复合选择器
- 复合选择器可以更精准、更高效的选择目标元素（标签）
- 复合选择器是由两个或者多个基础选择器，通过不同的方式组合而成的
- 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪选择器 等
后代选择器
后代选择器又称为 包含选择器，可以选择父类元素里面子元素，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签嵌套时，内层标签就成为外层标签的后代。
-
语法：
元素1 元素2 { 样式声明 }表示选择元素1 里面的所有元素2（后代元素） 修改样式，元素1 和 元素2 用空格分开。元素1 必须是父级 ，元素2 必须是子级。元素2 只要是 元素1 的后代（子、孙）就可以。被修改的只有后代元素。
-
测试：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /* 把 ol 里的 li 选出来改为 red */ /* 父标签 子标签 { } */ ol li { color: red; } ol ul li { color: blue; } /* 类的方式就直接写后代子级 */ .nav li a { color: yellow; } </style> <title>Document</title> </head> <body> <ol> <li>ol 子标签</li> <li>ol 子标签</li> <li>ol 子标签</li> <ul type="disc"> <li>这是一段测试</li> </ul> </ol> <ul> <li>ul 子标签</li> <li>ul 子标签</li> <li>ul 子标签</li> <li><a herf="#">这是一段测试</a></li> </ul> <ul class="nav"> <li>ul 子标签</li> <li>ul 子标签</li> <li>ul 子标签</li> <li><a herf="#">这是一段测试</a></li> </ul> </body> </html>效果
子选择器
子元素选择器只能作为某个元素的最近一级子元素，选最近的子标签。
语法：
元素1 > 元素2 { 样式声明 }表示元素1 里面的所有直接后代（子元素）元素2
div>p { 样式声明 }
- 元素1 和 元素2 中间用大于号隔开
- 元素1 是父级，元素2 是子集，最终选择的是 元素2
- 元素2 必须是 元素1 的亲儿子，其他的不归他管(儿子选择器)
测试：
<!DOCTYPE html> <html lang="ch-CN"> <head> <meta charset="UTF-8"> <style> .nav>a { color: blue; } </style> <title>Document</title> </head> <body> <div class="nav"> <a href="#">这是一段测试（蓝色）</a> <p><a href="#">这是一段测试（默认）</a></p> </div> </body> </html>
并集选择器
可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。
并集选择器是各选择器通过英文逗号连接而成，任何选择器都可以作为并集选择器的一部分。
语法：
元素1, 元素2 { 样式声明 }上面语法表示选择元素1 和 元素2.
例如：
ul, div { 样式声明 }
- 元素1 和 元素2 中间用 逗号 分隔。
- 逗号可以理解为 和。
- 并集选择器通常用于集体声明。
测试：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 并集选择器 */ /* 约定语法规范 —— 竖着写 */ /* 最后一个选择器不需要加 , */ div, p, .nav li { color: red; } </style> </head> <body> <div>1这是一段测试()</div> <p>2这是一段测试()</p> <span>3这是一段测试</span> <ul class="nav"> <li>·这是一段测试()</li> <li>·这是一段测试()</li> <li>·这是一段测试()</li> </ul> </body> </html>
- 约定并集选择器的选择元素竖着写。
- 最后一个选择器不需要加逗号。
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接加特殊效果、或者给第一个，第 n 个元素。
伪选择器书写最大的特点是用冒号（:）表示，比如 :hover、:first-child。
有链接伪类、结构伪类等。
-
链接伪类：
<!-- 选择所有未被访问的链接 --> a:link <!-- 选择所有已被访问的链接 --> a:visited <!-- 选择鼠标指针位于其上的链接 --> a:hover <!-- 选择活动链接（鼠标活动为弹起的链接） --> a:active测试：
<!DOCTYPE html> <html lang="ch-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 选择所有未被访问的链接 --> <!-- a:link --> <!-- 选择所有已被访问的链接 --> <!-- a:visited --> <!-- 选择鼠标指针位于其上的链接 --> <!-- a:hover --> <!-- 选择活动链接（鼠标活动为弹起的链接） --> <!-- a:active --> <style> /* 未访问的链接 */ a:link { color: orange; text-decoration: none; } /* 已访问的链接 */ a:visited { color: blue; } /* 鼠标经过链接时 */ a:hover { color: skyblue; } /* 按下链接时 */ a:active { color: red; } </style> </head> <body> <a href="#">baidu</a> <a href="#">baidu</a> </body> </html>注意事项：
- 确保生效，按照 LVHA 的循环顺序声明 :link :visited :hover :active。
:focus 伪类选择器
用于选取获得焦点的表单元素。
焦点就是光标，一般情况 <input> 类表单元素才可以获取，因此这个选择器主要针对表单元素。
input: focus { background-color: yellow; }测试：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 获得光标的 input标签 的元素进行修改 */ input:focus { background-color: yellow; } </style> </head> <body> <input type="text" value="输入"> </body> </html>
CSS 的元素显示模式
元素显示模式就是以什么方式进行显示，HTML 元素一般可以分为两大类，块元素 和 行内元素。
①块元素
常见的块元素有 <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li> 等，<div> 是最典型的块元素。
特点：
- 独占一行。
- 高度、宽度、外边距以及内边距都可以控制。
- 宽度默认是容器（父级宽度）的 100%。
- 是一个容器及盒子、里面可以放行内的或者块级元素。
注意：
- 文字类的元素内不能使用块级元素。
- <p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放 <div>。
- 同理，<h1>~<h6> 等都是文字类块级标签，里面也不能放其他块级元素。
②行内元素
常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是典型的行内元素，有的地方也将行内元素称为内联元素。
特点：
- 相邻行内元素在一行上，一行可以显示多个。
- 高、宽直接设置是无效的。
- 默认宽度就是他本身内容的宽度。
- 行内元素只能容纳文本或者其他行内元素。
注意：
- 链接里面不能放链接
- 特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全。
③行内块元素
在行内元素中有几个特殊的标签——<img />、<input />、<td>，同时具有块元素 和 行内元素的特点。
特点：
- 和相邻行内元素（行内块）在一行上，但是他们之间有空格间隙，一行可以显示多个（行内元素特点）。
- 默认宽度就是他本身内容的高度（行内元素特点）
- 高度、行高、外边距以及内边距都可以控制（块级元素特点）
元素显示模式总结
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
| 块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以直接设置高度 | 他本身内容的宽度 | 容纳文本或者其他行内元素 |
| 行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 他本省内容的宽度 |
⑤元素显示模式转换
特殊情况下，我们需要元素模式的切换，一个模式的元素需要另一个模式的特性
比如：想要增加链接<a>的触发范围。
<!DOCTYPE html>
<html lang="ch-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 行内元素转换为块元素 */
/* display: block */
a {
background-color: rgb(31, 173, 126);
text-decoration: none;
/* 设置触发可以触发链接的范围 */
width: 100px;
height: 50px;
/* 将行内元素转换为块级元素 */
display: block;
}
/* 块元素转换为行内元素 */
/* display: inline */
div {
width: 100px;
height: 50px;
background-color: rgb(206, 255, 127);
/* 块元素转换为行内元素 */
display: inline;
}
/* 转换为行内块元素 */
/* display: inline-block */
span {
width: 100px;
height: 30px;
background-color: rgb(231, 186, 126);
/* 转换成行内块元素 */
display: inline-block;
}
</style>
</head>
<body>
<a href="#">这是行内元素</a>
<a href="#">这是行内元素</a>
<div>这是块级元素</div>
<div>这是块级元素</div>
<span>行内元素</span>
<span>行内元素</span>
</body>
</html>效果：
导航案例
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* a 转换为块级元素 */
a {
width: 230px;
height: 50px;
display: block;
background-color: rgb(155, 147, 147);
font-size: 14px;
color: #fff;
text-decoration: none;
text-indent: 2em;
}
/* 鼠标经过变色 */
a:hover {
background-color: #ff6700;
}
</style>
</head>
<body>
<a href="#">手机</a>
<a href="#">电视</a>
<a href="#">笔记本</a>
<a href="#">路由器</a>
<a href="#">儿童</a>
<a href="#">耳机</a>
<a href="#">电脑</a>
</body>
</html>效果：
⑦单行文字垂直居中的代码
解决方案：让文字的行高等于盒子的高度就可以实现当前盒子内垂直居中
<!DOCTYPE html>
<html lang="ch-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* height 的高度要等于 line-height 的高度 */
div {
width: 100px;
height: 50px;
background-color: rgb(96, 165, 150);
line-height: 50px;
}
</style>
</head>
<body>
<div>居中</div>
</body>
</html>效果：
原理：
运用上空隙和下空隙将文字挤到中间。
如果行高下小于盒子高度，文字会偏上，行高大于盒子高度，文字会偏下。
CSS 的背景
设置背景颜色、背景图片、背景平铺、背景图片位置、背景图片固定等。
①背景颜色
background-color 属性定义了元素的背景颜色。
属性值：transparent | color
transparent 是透明的意思，背景透明。
color 指定颜色。
默认就是是透明的
②背景图片
background-image 属性描述了元素的背景图片，实际开发常见于 logo 或者一些装饰性的小图片或者超级大的图片。
优点：便于控制位置（精灵图也是一种运用场景）
属性值： none | url地址
none 无背景图片。
url 使用绝对或者相对地址指定图片。
③背景平铺
background-repeat 属性实现背景图片平铺。
属性值：repeat | no-repeat | repeat-x | repeat-y
repeat 平铺。
no-repeat 不平铺。
repeat-x 沿着x轴平铺。
repeat-y 沿着y轴平铺。
repeat平铺效果
no-repeat 不平铺效果
repeat-x 沿着x轴平铺效果
repeat-y 沿着y轴平铺效果
默认情况下图片都是平铺的。
页面元素既可以添加背景颜色也可以添加背景图片，但不是背景图片会压住背景颜色。
④背景图片位置
background-position 属性可以修改图片在背景中的位置。
background-position: x y;参数：x坐标、y坐标。可以使用 方位名词 或者 精准单位。
| 参数值 | 说明 |
| length | 百分比 | 由浮点数和单位标识符组成的长度值 |
| position | top | center | bottom | left | right 方位名词 |
1、参数是方位名词
- 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left、top、和 top、left 效果一致。
- 如果指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。
2、参数是精准单位
- 如果参数值是精准坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标。
- 如果指定一个数值，那该数值一定是 x 轴，另一个默认垂直居中。
3、参数是混合单位
- 如果指定的两个单位是精度单位和方位名词混合使用，则第一个值是 x 轴，第二个值是 y 轴。
⑤背景图片固定（背景附着）
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
属性： scroll | fixed
| 参数 | 作用 |
| scroll | 背景图片是随对象内容滚动 |
| fixed | 背景图像固定 |
⑥背景复合写法
简写北京属性的代码，可以将这些属性合并简写在同一个属性 background 中，减少代码量。
属性 background：颜色、地址、平铺、滚动、位置；
⑦背景色半透明
background：rgba(0, 0, 0, 0.3)
最后一个参数是 alpha 透明度，取值范围在 0~1 之间。、
0 代表全透明、1代表不透明。
习惯将 0.3 的 0 省略掉，改写为 .3。
背景半透明是指盒子背景半透明，盒子里面的内容不受影响。
IE9+ 版本才支持。
CSS三大特性
①层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突样式，层叠性主要是解决样式冲突。
- 样式冲突，遵循原则：就近原则，那个样式里结构近，就执行哪个样式。
- 含有其他样式，存在样式不冲突的情况，就不会覆盖。
②继承性
子标签会继承父标签的某些样式，如文本颜色和字号。
降低 CSS 样式的复杂性。
子元素可以继承父元素的样式 （text-，font，line- 这些元素开头的都可以继承，以及 color 属性）
⚠行高继承
行高可以跟单位也可以不跟单位的
body {
font: 12px/1.5 Microsoft YaHei;
}这里达到1.5的意思是当前元素文字大小 font-size 的 1.5 倍
子元素没有设置行高，则会继承父元素的行高为 1.5
此时子元素的行高为当前子元素的大小 *1.5
body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小调整行高。
③优先级
选择器相同，则执行层叠性。
选择器不同，则根据选择器权重执行
| 选择器 | 权重 |
| 继承 或者 * | 0，0，0，0 |
| 元素选择器 | 0，0，0，1 |
| 类选择器、伪类选择器 | 0，0，1，0 |
| ID 选择器 | 0，1，0，0 |
| 行内样式 style=" " | 1，0，0，0 |
| !important | 无穷大 |
权重没有进位的问题，元素选择器是没有办法超过类选择器。
继承的权重是 0 ，如果该元素没有直接选中，不管父类元素权重多高，子元素得到的权重都是 0。
权重叠加
组合选择器有权重叠加的问题，相应的权重相加，得到的结果谁大。
div ul li ------------- 0，0，0，3
.nav ul li ------------- 0，0，1，2
a:hover ------------- 0，0，1，1
.nav a ------------- 0，0，1，1
盒子模型
网页元素基本都是盒子。
盒子摆放到相应位置。
盒子内部添加元素。
盒子模型组成
就是把 HTML 页面中的布局元素看作一个矩形的盒子，也就是一个盛装内容的容器，CSS 盒子模型本质上就是一个盒子，封装周围的 HTML 元素，包括：边框、外边距、内边距、和实际内容。
border 边框
content 内容
padding 内边距
margin 外边距
盒子边框（border）
border 可以设置的边框，边框有三部分组成 边框宽度（粗细）、边框样式、边框颜色
border 属性： border-width || border-style || border-color
属性 作用 border-width 定义边框粗细、单位为 px border-style 边框的样式 border-color 边框颜色 边框简写（没有顺序）包括粗细像素、边框样式、边框颜色。
border: 1px solid red;边框分开写（只设置上边框）其他的同理。
border-top: 1px solid red;
表格的细线边框（border-collapse）
border-collapse 控制浏览器绘制表格边框的方式，控制相邻单元格的边框。
- collapse 单词就是合并的意思。
- border-collapse: collapse；表示相邻边框合并在一起。
边框会影响盒子实际大小
- 测量盒子大小的时候，不测边框。
- 测量的时候包含边框，则需要 width/height 减去边框宽度。
盒子内边距（padding）
padding 属性用于设置内边距， 边框与内容之间的距离。
假如盒子里放文字，就会出现文字与盒子边框靠的太近的效果。
属性 作用 padding-left 左内边距 padding-right 右内边距 padding-top 上内边距 padding-bottom 下内边距 ⚠指定padding后发生两件事
- 内容和边框有了距离，添加了内边距。
- padding 也会影响盒子的实际大小。
解决方案就是将 width/height 减去 padding 得到大小
内边距复合写法
padding 属性（简写属性）可以有一到四个值。
值的个数 表达意思 padding: 5px; 1 个值，上下左右各有 5px 内边距。 padding: 5px 10px; 2 个值，上下内边距是 5px 左右内边距是 10px padding: 5px 10px 20px; 3 个值，上 5px、左右 10px、下 20px padding: 5px 10px 20px 30px; 4 个值，上 5px、右 10px、下 20px、 左 30px （顺时针）
运用场景：导航栏，让盒子内字之间的距离是一样的。
如果盒子本身没有指定 width/height 属性，则此时 padding 不会撑开盒子大小。
盒子外边距（margin）
margin 属性控制盒子与盒子之间的距离。
属性 作用 margin-left 左外边距 margin-right 右外边距 margin-top 上外边距 margin-bottom 下外边距 margin 简写方式和 padding 一致。
应用：
外边距可以让盒子水平居中，但必须满足两个条件：
- 盒子必须指定了宽度（width）。
- 盒子左右的外边距都设置为 auto。margin: 0px auto;
以上方法是让块级元素水平居中，行内块元素或者行内元素水平居中给其父类添加 text-align: center 即可
外边距合并
嵌套块元素垂直外边距的塌陷。
对于两个嵌套关系（父子关系）的块级元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
简单理解为：父元素和子元素谁的外边距大最后就会是谁的效果。
解决方案：
- 为父元素定义上边框
- 为父元素定义上内边距
- 为父元素添加 overflow: hidden
第三种效果方法方法最好
清除内外边距
网页元素很多都带有默认的内外边距，而且在不同的浏览器默认的也不一致，因此在布局前要清楚网页元素的内外边距。
* { margin: 0; /* 清除内边距 */ padding: 0; /* 清除外边距 */ }注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以了。
圆形边框（border-radius）
border-radius 属性添加圆角效果。
语法：
border-radius: length;radiis 半径（圆的半径）原理：椭圆与与边框的交集形成圆角效果。
- 参数可以是数值也可以是百分比的形式。
- 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽的一般即可，或者直接 50%。
- 如果是一个矩形，设置为高度的一般可以成圆角的输入框。
- 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角。
盒子阴影
使用 box-shadow 属性为盒子添加阴影。
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
值 描述 h-shadow 必须。水平阴影的位置，允许负值 v-shadow 必须。垂直阴影的位置，允许负值 blur 可选。模糊距离 spread 可选。阴影尺寸 color 可选。阴影的颜色 inset 可选。
将外部阴影（outset）改为内部阴影、
只能写这个inset参数，写outset参数会导致阴影失效
注意：
1、默认的外部阴影（outset），但是不可以写这个单词，否则2会导致阴影无效。
2、盒子阴影不占空间，不会影响其他盒子排列。
<style> div { width: 200px; height: 100px; background-color: pink; margin: 100px auto; } /* 鼠标经过盒子就会有一个盒子阴影效果 */ div:hover { /* 水平模糊位置 垂直阴影位置 模糊距离 阴影尺寸 颜色 外部阴影(可有) */ box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3); } </style>
文字阴影
使用 text-shadow 属性将阴影应用于文本。
语法：
text-shadow: h-shadow v-shadow blur color;
值 描述 h-shadow 必须，水平阴影位置，允许负值 v-shadow 必须，垂直阴影位置，允许负值 blur 可选，模糊的距离 color 可选，阴影的颜色 <head> <meta charset="UTF-8"> <title>Document</title> <style> div { font-size: 50px; color: orange; font-size: 700; text-shadow: 5px 5px 5px rgba(0, 0, 0, .2); } </style> </head>
CSS 浮动
css 提供了三种传统的布局方式，简单来说就是盒子排放顺序。
- 普通流（标准流）
- 浮动流
- 定位
标准流（普通流/文档流）
- 块级元素独占一行，从上向下顺序排序。（常见 div、hr、h1、ul、table、form等）
- 行内元素会按照顺序，从左到右排列，碰到父元素边缘自动换行。（sapn、a、i、em等）
以上都是标准布局，标准流是最基本的。
如何让多个块级盒子（div）水平排列成一行？
可以使用 display: inline-block 但是在一行中间会有一些空白间隙，很难控制。
如何实现两个盒子的左右对齐？
需要浮动去解决这些问题。
浮动（float）
浮动最典型的应用：可以让多个块级元素一行内排列显示。
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
float 定义：该属性用于创建浮动框，将其移动到一边，知道左边缘或右边缘触及包含块或另一个浮动的边缘。
语法：
选择器{float: 属性值;}
属性值 描述 none 元素不浮动（默认值） left 元素向左浮动 right 元素向右浮动
浮动特性
- 浮动元素会脱离标准流（脱标）
- 浮动的元素会一行内显示并且元素顶部对齐
- 浮动的元素会具有行内块元素的特性
设置浮动的重要特性：
- 脱离标准普通流的控制（流）移动到指定位置（动），（俗称脱标）
- 浮动的盒子不再保留原先的位置，位置让其他原有的标准流占用。
1、加上浮动后可以理解为是朝向自己走来，后面就可以上升。浮动的盒子在标准流盒子的上面的。
2、如果多个盒子都设置了浮动，则他们会按照属性值一行内显示并且顶端对齐排列。
浮动的元素是相互靠在一起的，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
3、浮动元素会具有行内块元素特性，不管任何元素都可以浮动，不管原先是什么模式的元素，添加浮动后具有行内块元素相似的特性。
浮动元素经常和标准流父级搭配使用
为了约束浮动元素，网页布局一般采取的策略是：
先用标准流达到父级元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。
浮动布局注意点
1、浮动和标准流的父盒子搭配
先用标准流的父类元素排列上下位置，之后内部子元素采取浮动排列左右位置。
2、一个元素浮动了，理论上其余的兄弟元素也要浮动
一个盒子里面有多个盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题，浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
3、理想中的状况，让子盒子撑开父类，有多少孩子，父盒子就有多高。
但会导致父元素高度会变成 0，后面的盒子会直接跟上父元素，不是想要的效果，所以需要清除浮动。
清除浮动
为什么要清除浮动？
父类盒子很多情况下不方便设置高度，但子盒子浮动不占有位置，最后父类盒子高度为 0 时，就会影响下面的标准流盒子。
清除浮动的本质
- 清除浮动元素造成的影响
- 如果父盒子本身有高度，则不需要清除浮动
- 清除浮动后，父级就会根据浮动的盒子自动检测高度，父级有了高度，就不会影响下面的标准流了
清除浮动
语法：
选择器 { clear: 属性值; }
属性值 描述 left 不允许左侧有浮动元素（清除左侧浮动的影响） right 不允许右侧有浮动元素（清除右侧浮动的影响） both 同时清除左右两侧浮动的影响 实际使用中只使用 clear: both;
清除浮动的策略是：闭合浮动
清除浮动的方法
- 额外标签法，也称隔墙法，是 W3C 推荐的做法
- 父类添加 overflow 属性
- 父类添加 after 伪元素
- 父类添加双伪元素
1、额外标签法
在浮动元素末尾添加一个空的标签，例如 <div style="clear:both"></div>，或者其他标签（如 <br /> 等）
- 优点：通俗易懂，书写方便
- 缺点：添加许多无意义的标签，结构化较差
⚠ ：要求这个新标签，新增的盒子必须是块级元素。不能是行内元素
2、父级添加 overflow 属性
可以给父级添加 overflow 属性，将其属性设置为 hidden、auto或者scroll。
- 优点：代码简洁
- 缺点：无法显示溢出的部分
3、after 伪元素法
是额标签法的升级版，也是给父元素添加。
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6\7 专用 */ *zoom: 1; }
- 优点：没有添加标签，结构简单
- 缺点：照顾低版本浏览器
4、双伪元素
也是给父元素添加
.clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; }
- 优点：代码更简洁
- 缺点：照顾低版本浏览器
总结：
清除浮动方式 优点 缺点 额外标签法 通俗易懂，书写方便 添加很多无意义的标签，结构化差 父级overflow:hidden; 书写简单 溢出隐藏 父级after伪元素 结构语义化正确 兼容问题 父级双伪元素 结构语义正确 兼容问题
PS 切图
常见图片格式
- jpg 图像格式，JPEG（JPG）对色彩的信息保留较好，高清，颜色较多，产品类图片常使用jpg格式
- gif 图像格式，GIF 格式最多只能存储 256 色，所以通常用来显示简单的图形及字体，但可以保存透明背景和动画效果，实际经常用于一些小动画效果
- png 图像格式，是一种网络图形格式，结合了 GIF 和 JPEG 的特点，具有存储丰富的特点，能够保持透明背景，适合切成背景透明的图片
- PSD 图像格式，是 Photoshop 的专用格式，里面可以存放图层、通道、遮罩等多种设计稿，最大的优点可以复制上面的文字，获得图片，可以测量大小和距离
ps 有很多的切图方式：图层切图、切片切图、PS 插件切图等。
CSS 属性书写顺序
建议遵循一下顺序：
- 布局定位属性：display / position / float / clear / visibility / overflow
- 自身属性：width / height / margin / padding / border / background
- 文本属性：color / font / text-decoration / text-align / vertical-align / white-space / break-word
- 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background: line-gradiednt...
案例
.jdc { display: block; position: relative; float: left; width: 100px; height: 100px; margin: 0 auto; padding: 20px 0; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; color: #333; background: rgba(0, 0, 0, .5); border-radius: 10px; }
页面布局整体思路
- 必须确定页面的版心（可视区）可以测量得知
- 分析页面中的行模块，以及每个行模块中的列模块
- 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置
- 制作 HTML 结构。我们还是遵循，现有结构，后有样式的原则，结构永远最重要
- 先理清楚布局结构，在写代码
1804
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
