提示：文章完成后，目录可以自动生成，如何生成可以参考右边的帮助文档
文章目录
- 前言
- 一、CSS样式规则
- 二、CSS引入方式
-
- 1.行内风格表 (不推荐)
- 2.内部样式表(内联样式)
- 3.外部风格表
- 4.总结三种样式表
- 三、CSS字体属性
- 四、CSS文本属性
-
- 4.1 color 文本颜色
- 4.2 text-align 文本对齐
- 4.3 text-decoration 文本修饰
- 4.4 text-transform 文本转换
- 4.5 text-indent 文本缩进
- 4.6 text-shadow 文本阴影
- 4.7 direction 文本方向
- 4.8 letter-spacing 字符间距
- 4.9 word-spacing 字间距
- 4.10 line-height 行高
- 4.11 word-break
- 4.12 white-space
- 4.12 overflow
- 4.13 text-overflow
- 五、CSS注释
- 六、基本选择器
-
- 6.1 标签选择器(元素选择器)
- 6.2 id选择器
- 6.3 类选择器
- 6.4 多种名选择器
- 6.5 通配符选择器
- 6.6 伪类选择器
-
- (1) 链接伪类选择器
- (2) 假结构选择器（CSS3）
- (3) 目标伪类选择器
- 七、CSS复合选择器
-
- 7.1 交集选择器
- 7.2 并集选择器
- 7.3 兄弟选择器
- 7.4 后代选择器
- 7.5 子元素选择器
- 7.6 属性选择器
- 7.7 伪元素选择器（CSS3）
- 八、CSS三大特性
-
- （1）CSS层叠性
- （2）CSS继承性
- （3）CSS优先级
- 九、标签显示模式
-
- (1)块级元素（block-level）
- (2)行内元素（inline-level）
- (3)行内块元素（inline-block）
- (4)标签显示模式转换 display
- 十、CSS背景（background）
-
- 10.1 背景颜色（background-color）
- 10.2 背景图片（background-image）
- 10.3 背景平铺（background-repeat）
- 10.4 背景位置（background-position）
- 10.5 背景附着（background-attachment）
- 10.6 背景简写
- 10.7 透明的背景色（CSS3）
- 10.8 背景缩放（CSS3）
- 10.9 多背景（CSS3）
- 10.10 渐变背景色（CSS3）
- 10.11 凹凸文字
- 10.12 空心文字
- 10.13 精灵图(雪碧图)
- 十一 盒子模型（CSS重点）
-
- 11.1 盒模型简介
- 11.2 盒子模型（Box Model）
-
- (1) 标准盒模型
- (2) IE盒模型
- (3) 总结
- (4) 盒子边框（border）
- (5) 内边距（padding）
- (6) 外边距（margin）
- (7) 外边距合并
- (8) 盒子阴影
- 十二 浮动（Float）
-
- 12.1 什么是文档流？
- 12.2 浮动是什么？
- 12.3 清除浮动
- 十三 定位
-
- 13.1 元素的定位属性
- 13.2 叠放次序（z-index）
- 十四 布局布局
- 十五 CSS3转换 transform
-
- 2D转换
- 3D转换
- 十六 CSS3过渡 transition
- 十七 CSS3动画 animation
-
- 17.1 使用方法
-
- (1) 语法from to
- (2) 百分比
- 17.2 动画运动(animation-timing-function)
- 17.3 动画延时(animation-delay)
- 17.4 循环次数animation-iteration-count
- 17.5 反向运动animation-direction
- 17.6 animation-play-state暂停或停止
- 十八 CSS3多列显示
-
- （1）column-count（CSS3）
- （2）column-width（CSS3）
- （3）column-span(CSS3)
- （4）column-gap（CSS3）
- （5）column-rule（CSS3）
- （6）columns（CSS3）
- (7)实现多列div布局
- 十九 CSS3 弹性盒子(Flex Box)
- 二十 CSS3多媒体查询 Media Queries
-
- (1)多媒体查询语法
- （2）CSS3多媒体类型
- (3)常用条件
- (4)媒体查询有两种方式
- 二十一 移动端布局
-
- (1)布局概念
- (2)基本概念
-
- 1、物理像素
- 2.设备像素比(device pixel ratio)
- 3.视网膜屏幕Retina
- 4、视口 viewport
-
- (1)布局视角layout viewport
- (2)布局视角layout viewport
- （3）理想视口ideal viewport
- （4）meta视口标签
- 5、rem单位
- 二十二 calc计算属性
-
- （1）calc() 只作用于属性值
- （2）CSS很多长度都可以与calc()一起使用
- （3）calc()的数学运算符
前言
CSS用于控制网页的样式和布局, 修饰页面效果，可以配合脚本语言动态的对网页各元素进行格式化，提升用户体验性，接下来让我们详细看看CSS是如何将网页美容的。
一、CSS样式规则
CSS规则主要由两个主要部分构成：，以及。
- 选择器用于指定css样式作用的HTML对象，花括号内是对该对象设置的具体样式。
- 属性和属性值之间以“键值对”的形式出现。
- 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
- 属性和属性值之间用英文“：”连接。
- 多个键值对之间使用英文“；”区分。
p { /*选择器*/
color: red; /*声明*/
font-size: 14px; /*声明*/
}
二、CSS引入方式
1.行内样式表 (不建议使用)
直接在标签的属性中使用style声明，在style属性中添加css声明即可。
<!--在标签内部再嵌套一个内嵌标签来设置样式-->
<p>这是一个<span style="color: red;">行内样式表</span>的css</p>
2.内部样式表（内联样式）
定义在head或body标签中,使用style标签
<style type="text/css">
p {
background-color: blue;
color: red;
}
</style>
3.外部样式表
定义在外部的css文件中，需要在head中引入相应的css文件 (1）
<html>
<head>
<title>CSS外部样式引入</title>
/*关联外部的css样式文件*/
<link type="text/css" rel="stylesheet" href="../css/text.css" />
</head>
<body>
</body>
</html>
/*type:定义链接文档的类型，在这里需要指定为"text/css",表示链接的外部文件为css样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet"，表示被链接的文档是一个样式表文件。
href：定义所链接外部样式表文件的url，可以是相对路径，也可以是绝对路径。*/
(2）
p {
background-color: blue;
color: red;
}
4.三种样式表总结
3种样式表的优先级：
1、行内样式表 > 内部样式表 = 外部样式表
2、当内部样式表和外部样式表同时存在时，采用 来使用样式
三、CSS字体属性
| 字体属性 | 描述 |
|---|---|
| font-size：字号大小 | 用于设置字号 |
| font-family：字体 | 用于设置字体 |
| font-weight：字体粗细 | 用于设置字体粗细 |
| font-style：字体风格 | 用于定义字体风格如设置斜体、倾斜或正常字体 |
| font-variant | 规定字体异体 |
font-style 可用属性值如下：
- ：默认值，浏览器会显示标准的字体样式。
- ：浏览器会显示斜体的字体样式。
- ：浏览器会显示倾斜的字体样式。
font-variant 可用属性值如下：
- ：默认值。浏览器会显示一个标准的字体。
- ： 浏览器会显示小型大写字母的字体。
- ： 规定应该从父元素继承 font-variant 属性的值。
四、CSS文本属性
| 文本属性 | 描述 |
|---|---|
| color | 用于指定文本的颜色 |
| text-align | 指定元素文本的水平对齐方式 |
| text-decoration | 用于对文本添加修饰，如下划线、删除线等 |
| text-transform | 用于转换文本的大小写 |
| text-indent | 规定文本块(块级中的文本)中首行文本的缩进 |
| text-shadow | 用于设置文本的阴影效果 |
| direction | 用于指定文本的方向 |
| letter-spacing | 用于增加或减少字符间的空白（字符间距）主要用于汉字 |
| word-spacing | 用于增加或减少单词与单词之间的空白 主要用于英文段落 |
| line-height | 用于设置文字行与文字行之间的距离 |
| word-break | 规定自动换行的处理方法 |
4.1 color 文本颜色
color属性有3种表现形式：
- color-name：使用颜色名称，如：red, transparent
- hex-number：使用十六进制数表示，取值是0~f，每个颜色使用两位表示，如：#ff0000表示红色 0-9 a:10 b:11 c:12 d:13 e:14 f:15
- rgb-number：使用rgb颜色值表示，取值0~255，如rgb(255,0,0)，rgba(100%, 0%, 0%, .5)
- rgba：在rgb上多了一给a，表示透明度，取值0~1完全透明完全不透明
<style type="text/css">
h1 {
color: red;
}
h2 {
color: #00ff00;
}
h3 {
color: rgb(0, 0, 255);
}
h4 {
color: ; rgba(100%, 0%, 0%, .5)
}
</style>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题3</h4>
4.2 text-align 文本对齐方式
text-align用于指定元素文本的水平对齐方式，取值有left、right、center、justify（两端对齐文本）
<head>
<style type="text/css">
h1 {
text-align: left; /*左对齐*/
}
h2 {
text-align: center; /*居中对齐*/
}
h3 {
text-align: right; /*右对齐*/
}
p {
text-align: justify; /*分散对齐，主要针对英文段落中出现空格时，由于两边对齐，空格的大小会有变化*/
}
</style>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<p>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>
</body>
4.3 text-decoration 文本修饰
text-decoration用于对文本添加修饰，如下划线、删除线等。有如下取值：
- none：默认，定义标准的文本，没有任何修饰。
- underline：定义在文本下方的一条线
- overline：定义在文本上方的一条线
- line-through：定义穿过文本的一条线
<style type="text/css">
h1 {
text-decoration: none;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
h4 {
text-decoration: underline;
}
h5 {
/* 文字闪烁，只在火狐中支持 */
text-decoration: blink;
}
</style>
4.4 text-transform 文本转换
text-transform用于转换文本的大小写（主要用于英文），其取值有：
- none：默认
- capitalize：文本中每个单词以大写字母开头
- uppercase：所有单词字母都大写
- lowercase：所有单词字母都小写
4.5 text-indent 文本缩进
text-indent 属性规定文本块(块级中的文本)中首行文本的缩进。取值有：
- 数值：表示像素值
- 百分比：基于父元素宽度的百分比的缩进。
负值是允许的。如果值是负数，将第一行左缩进。 小技巧： 首行缩进2字符使用 2em
4.6 text-shadow 文本阴影
text-shadow用于设置文本的阴影效果。语法格式是
text-shadow: h-shadow v-shadow blur color;
text-shadow: h-shadow v-shadow blur color;
h-shadow：必需。水平阴影的位置。允许负值。horizontal， X轴往右是正值
v-shadow：必需。垂直阴影的位置。允许负值。 vertical，Y轴向下是正值
blur：可选。模糊的距离。
color：可选。阴影的颜色。
4.7 direction 文本方向
CSS中属性决定了文字渲染方向
direction 用于指定文本的方向。取值如下：
-
ltr：默认的，文本方向从左到右 left to right
-
rtl：文本方向从右到左。right to left
4.8 letter-spacing 字符间距
letter-spacing 属性增加或减少字符间的空白（字符间距），使用数值表示，可以是负数。主要用于汉字
如果用于英文段落 增加/减少字母之间的空白
4.9 word-spacing 字间距
word-spacing属性增加或减少单词与单词之间的空白，允许使用负值。主要用于英文段落 如果作用于中文，挨在一起的中文会被识别为一个单词
4.10 line-height 行高
line-height 用于设置文字行与文字行之间的距离。取值如下：
-
number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
-
length：设置固定的行间距 px em 。
-
%：基于当前字体尺寸的百分比行间距。
：在一行的盒子内，我们设定行高等于盒子的高度，就可以是文字垂直居中。
4.11 word-break
规定自动换行的处理方法。通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。
| 属性值 | 描述 |
|---|---|
| normal | 使用浏览器默认的换行规则。 |
| break-all | 允许在单词内换行(主要用于英语) |
| keep-all | 保持同行显示，不是中文日语韩语(CJK)其实和normal一样(主要用于CJK) |
keep-all: 可以理解为 break-all：
4.12 white-space
设置元素对内容中的空格的处理方式
| 值 | 描述 |
|---|---|
| normal | 默认。文本空白 换行会被浏览器忽略。 |
| pre | 保留文本原样式 比如空格或换行 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到br标签为止。 |
| pre-wrap | 保留空白符序列，保留换行符。如果文本超出容器宽度处没有换行符自动换行 |
| pre-line | 合并空白符序列，保留换行符。如果文本超出容器宽度处没有换行符自动换行 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
4.12 overflow
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
如果父元素宽高能够包含子元素 auto就不会出现滚动条 scroll 就会出现滚动条
4.13 text-overflow
用来控制超长溢出的文字内容的显示方式
| 值 | 描述 |
|---|---|
| clip | 修剪文本。 |
| ellipsis | 显示省略符号来代表被修剪的文本。 |
单行文本溢出
div{
width: 100px;
height: 100px;
border: 1px solid black;
/* 强制一行显示*/
white-space: nowrap;
/* 超出部分隐藏 */
overflow: hidden;
/* 超出部分省略号 */
text-overflow: ellipsis;
}
多行文本溢出显示省略号，有较大的兼容性，适合用于webkit浏览器或移动端（移动端内核大部分是webkit内核）
- -webkit-line-clamp：限制在一个块元素显示的文本的行数。为实现效果，它需要组合其他的WebKit属性。常见结合属性以下两点：
- display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
- -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
div{
width: 100px;
/* 不要设置高度 */
overflow: hidden;
text-overflow: ellipsis;
/* 1.必须结合的属性，将对象作为弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 2.是一个 不规范的属性，它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他外来的WebKit属性 */
-webkit-line-clamp: 2;
/* 3.必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
五、CSS注释
css规则是使用 /*需要注释的内容*/ 进行注释的。 快捷键 ctrl + / 或者ctrl + shift + /
六、基础选择器
6.1 标签选择器（元素选择器）
标签选择器是指用HTML，按标签名称分类，为页面中某一类标签指定统一的CSS样式。 基本语法格式:
标签名{属性1：属性值1; 属性2：属性值2; ...}
优点：能快速为页面中统一样式 缺点：不能设计差异化样式。
span {
color: red;
}
div {
background-color: red;
}
6.2 id选择器
id选择器使用“”进行标识，后面紧跟id名。
#id名{属性1：属性值1; 属性2：属性值2; ...}
<标签名 id="id值"></标签名>
注意：元素的id值是唯一的，只能对应于文档中某一个具体的元素。
6.3 类选择器
类选择器使用“”（英文点）进行标识，后面紧跟类名。
.类名{属性1：属性值1; 属性2：属性值2; ...}
<标签名 class="类名"></标签名>
相对于ID选择器，类选择器的类名可以是多个，并且一个类名可以对应多个元素，可以为元素对象定义单独或相同的样式。
6.4 多类名选择器
可以给标签指定多个类名，类名之间用空格隔开。
<style>
.red {
color: red;
}
.weight {
font-weight: bold;
}
</style>
<div class="red">红色</div>
<div class="red weigth">红色加粗</div>
6.5 通配符选择器
通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能。 基本语法格式:
* {属性1：属性值1; 属性2：属性值2; ...}
通常使用它来清楚HTML元素的默认边距。
* {
margin: 0; /*定义外边距*/
padding: 0; /*定义内边距*/
}
6.6 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。 伪类选择器使用“”冒号来表示
(1) 链接伪类选择器
链接伪类选择器主要针对于a标签
a:link /*未访问的链接*/
a:visited /*已访问的链接*/
a:hover /*鼠标移动到链接上*/
a:active /*选定的链接*/
注意：
- a:hover 必须在 a:link 和 a:visited 之后。
- a:active 必须在 a:hover 之后，需要严格按顺序才能看到效果。
- visited只能修改颜色，在未访问状态下设置了背景颜色的条件下 可以设置背景颜色 其他不能做改变
记忆方法： o e t e
(2) 结构伪类选择器（CSS3）
-
获取第一个子元素
在 HTML 中，文本本身是 HTML 元素的父节点，HEAD 和 BODY 是 HTML 元素的子节点。
-
获取最后一个子元素。注意：IE8不支持X:last-child。
-
选取某个元素的一个或者多个特定的子元素。可以使用（n从1开始）、（、）或<2n-1>（n从0开始，当表达式的值小于等于0时，将不选择任何子元素）。
-
选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始获取。可以使用数字（n从1开始）、关键字（even偶数、odd奇数）或公式（n从0开始）。
-
选择特定元素的第一个子元素
-
选择特定元素的最后一个子元素
-
只计算父元素中指定的某种类型的子元素
-
只计算父元素中指定的某种类型的子元素，从这个元素的最后一个元素开始获取
-
匹配没有任何兄弟元素的元素
-
匹配所有元素 这个元素没有其他相同类型的兄弟元素
-
选择的元素里面没有任何的内容或子节点
-
匹配文档的根节点 html
(3) 目标伪类选择器
:target选择器用于选取页面中的某个target元素。该元素的id被当做页面的超链接来使用。
七、CSS复合选择器
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的。
7.1 交集选择器
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器或者id选择器，两个选择器之间不能有空格。
<p class="blue">这是一个段落</p>
p.blue {
color: blue;
}
7.2 并集选择器
并集选择器是各个选择器通过而成的，任何形式的选择器，都可以作为并集选择器的一部分，其中用并集选择器设置的样式是所有选择器会执行的样式
<p class="p1">这是一个段落</p>
<p class="p2>这是一个段落</p>
<p class="p3">这是一个段落</p>
.p1,.p2,.p3{
color: blue;
}
7.3 兄弟选择器
兄弟选择器是CSS3.0新增的一个选择器，语法格式： **A~B **或者
<div>
<p>这是一个段落</p>
</div>
<p>我是相邻的兄弟元素</p>
<p>这是一个段落</p>
<style>
div+p {
color: red;
}
div~p {
background-color: blue;
}
</style>
7.4 后代选择器
后代选择器又称为包含选择器，用来选择元素或元素组的后代。其写法就是把外层标签写在前面，中间用分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
<div class="red">
<p>red</p>
</div>
<p>这是一个段落</p>
<p>这是一个段落</p>
<style>
.red p {
color: red;
}
</style>
7.5 子元素选择器
子元素选择器只能选择作为其元素子元素的元素。其写法就是父亲标签写在前面，子级标签写在后面，中间跟一个“”进行连接。 注意：这里的子元素表示，不包含孙子、重孙子之类。
<ul class="header">
<li>一级菜单
<ul>
<li>
<ul>
<li>三级菜单</li>
</ul>
</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
<style>
.header li { /*后代选择器*/
color: red;
}
.header > li { /*子元素选择器*/
color: blue;
}
</style>
7.6 属性选择器
| 选择器 | 含义 |
|---|---|
| 存在attr属性即可 | |
| 属性值完全等于val | |
| 属性值里包含val字符并且在“任意”位置 | |
| 属性值里包含val字符并且在“开始”位置 | |
| 属性值里包含val字符并且在“结束”位置 |
7.7 伪元素选择器（CSS3）
- 块级文本的第一个单词或字
- 块级文本的第一行
- 可改变选中文本的样式
- 在E元素内部的开始位置和结束位置创建一个元素，该元素为行内元素，且必须结合content属性使用。
注意：before与after表示在的前端和后端插入内容。 表示选择到input中的placeholder，为其设置样式
八、CSS三大特性
（1）CSS层叠性
是浏览器处理冲突的一个能力。如果一个css属性通过两个选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
（2）CSS继承性
含义：指我们设置上级(父级)的CSS样式，上级（父级）及以下的子级（下级）都具有此属性。 特殊性：
-
并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承。
-
在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承 。
-
a标签的颜色和下划线的设置不能继承，必须对a标签本身进行设置。
-
h标签的字体大小/加粗效果不能修改，必须对h标签本身进行修改。(字体放大两倍)
（3）CSS优先级
含义：优先级表示当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定
1.同类型选择器：就近原则 2.不同类型选择器：按照： 3.多个选择器混合时：通过计算权重判断 （1）
（2）
（3）
（4）
（5）
（6）
九、标签显示模式
HTML标签一般分为块标签和行内标签两种类型
（1）块级元素（block-level）
每个块元素通常都会独自占据一整行或多整行，可以对其设置高度、宽度、对齐等属性。常见块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<form <li>等。
特点：
-
总是从新行开始 — 换行
-
宽度、高度、外边距以及内边距都可以控制
-
宽度默认是容器的100%
-
可以容纳—嵌套 内联元素和其他块元素
（2）行内元素（inline-level）
行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性。 常见的行内元素有：<a>、<label>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等。
特点：
- 和相邻行内元素在一行上。
- 宽、高无效，但水平方向的padding和margin可以设置 ，垂直方向padding有效 但是margin不可以。
- 默认宽度就是它本身内容的宽度。
- 行内元素只能容纳文本或其他行内元素（a特殊）。
注意：
- 只有文字才能组成段落，因此p标签中不能放块级元素。
- 链接里面不能在放链接。
（3）行内块元素（inline-block）
在行内元素中有几个特殊的标签<img />、<input />，可以对它们设置宽高和对齐属性，称为行内块元素。
特点： （1）和相邻行内元素（行内块）在一行上，但是之间会有空白间隙。 （2）默认宽度就是它本身内容的宽度。 （3）宽高、内外边距都可以控制。
（4）标签显示模式转换 display
块转行内：display:inline; 行内转块：display:block; 块、行内元素转换为行内块：display:inline-block;
十、CSS背景（background）
| background-color | 背景颜色 |
|---|---|
| 背景图片地址 | |
| 是否平铺 | |
| 背景位置 | |
| 背景固定还是滚动 | |
| 背景的合写（复合属性） | : 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 |
10.1 背景颜色（background-color）
background-color属性设置一个元素的背景颜色。元素的背景是元素的总大小，包括填充和边界（但不包括边距）。 指定背景颜色透明时可使用transparent作为属性值。
background-color: blue;
background-color: transparent; /* 透明 */
10.2 背景图片（background-image）
background-image属性设置一个元素的背景图像。元素的背景是元素的总大小，包括填充和边界（但不包括边距）。默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。
语法格式：
background-image: url('图片路径'); /*设置图片显示*/
10.3 背景平铺（background-repeat）
设置如何平铺对象的 background-image 属性。默认情况下，重复background-image的垂直和水平方向。
语法格式：
background-repeat: repeat-x; //表示向水平方向平铺
| 值 | 描述 |
|---|---|
| repeat | 背景图像将向垂直和水平方向重复 | 默认值 |
| repeat-x | 只有在水平方向会重复背景图像 |
| repeat-y | 只有在垂直方向会重复背景图像 |
| no-repeat | 不会重复 |
10.4 背景位置（background-position）
background-position属性设置背景图像的起始位置 第一个值表示水平方向，值增大时，意味着背景图片向右移动 减小 往左 第二个值垂直方向，值增大时，背景图片向下移动，减小往上移动
语法：
/*取值有left、right、top、bottom、center，如果仅指定一个关键字，其他值将会是"center"*/
/* 水平有left center right, 出垂直有top center bottom */
background-position: center; 关键词
background-position: 30% 20%; 百分比
background-position: 50px 100px; 固定值
(容器的宽度-图片的宽度)*百分比 = 图片最左边到容器左边的距离
(容器的高度-图片的高度)*百分比 = 图片最上边到容器上边的距离
10.5 背景附着（background-attachment）
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。
语法：
background-attachment:fixed; //表示视口固定，不会随着元素的内容滚动。
| 值 | 说明 |
|---|---|
| scroll | 背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的）| 默认值 |
| fixed | 背景相对于视口固定，不会随着元素的内容滚动。 |
10.6 背景简写
background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
10.7 背景颜色透明（CSS3）
CSS3支持背景半透明的语法格式：
background: rgba(0, 0, 0, 0.5);
alpha的取值范围在0~1之间 同样可以给文字和边框透明，都是使用rgba的格式来写
color: rgba(255, 0, 0, 0.5);
border: 1px solid rgba(255, 0, 0, 0.5);
10.8 背景缩放（CSS3）
通过background-size设置背景图片的尺寸 1.可以设置长度单位（px）或百分比（设置百分比时，参照盒子的宽高）。 当设置一个值时，第二个值为auto，横向展示为设置的值 ， 或者设置的百分比 * 盒子的宽度，纵向会按照原图宽高度等比缩放。
2.设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。 特点：会充满整个盒子，但是图片不一定能够显示完整
3.设置为contain时，会自动调整缩放比例，保证图片始终完整显示在背景区域。 特点：图片一定能显示完整，但是可能就不能充满盒子
10.9 多背景（CSS3）
以逗号分隔可以设置多背景，可用于自适应布局。 不同的背景图像用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者。前面的会堆叠在后面的上面
10.10 背景颜色渐变（CSS3）
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 CSS3 定义了两种类型的渐变（gradients）：
- 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
- 径向渐变（Radial Gradients）- 由它们的中心定义
从上到下的线性渐变
background: linear-gradient(red, yellow);
从左到右的线性渐变
background: linear-gradient(to right, blue, green);
// 或者
background: linear-gradient(to left, blue, green);
对角方向的线性渐变
background: linear-gradient(to bottom right, blue, green);
颜色结点均匀分布的径向渐变
background: radial-gradient(red, green, yellow);
颜色结点不均匀分布的径向渐变
background: radial-gradient(red 20%, green 30%, yellow 50%);
形状为圆形的径向渐变
background: radial-gradient(circle, red, green, yellow);
10.11 凹凸文字
<div class="tu">我是凸起的文字</div>
<div class="ao">我是凹下的文字</div>
<style> body { background-color: white; /* 背景色和文字颜色一样，并且这种颜色需要和阴影的颜色形成色差 看得出视差效果 */ font: bold 5em "micro" } div { margin: 30px; color:white; /* color: blue; */ /* color: red; */ /* color: green; */ } /* 左上阴影为白色，右下阴影为黑色 */ .tu { text-shadow: -1px -1px 1px white, 1px 1px 1px #000; } /* 左上阴影为黑色，右下阴影为白色 */ .ao { text-shadow: -1px -1px 1px #000, 1px 1px 1px white; } </style>
10.12 空心文字
<style>
p {
font-size: 50px;
/* 伪空心元素，与背景色有关*/
-webkit-text-fill-color: white;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 1px;
}
</style>
</head>
<body>
<p>我是空心的文字</p>
</body>
10.13 精灵图（雪碧图）
为了节省网络资源，通常网页上小图标和图片都合成在一张图片上，到使用的时候再切图 查到目标图标大小，设置宽高，通过position调整位置，找到目标图标
十一 盒子模型（CSS重点）
11.1 盒子模型简介
盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成
11.2 盒子模型（Box Model）
盒子模型分为两种：、
(1) 标准盒模型
(2) IE盒模型
(3) 总结
W3C的盒模型方式被称为“content-box”，IE的被称为“border-box”，使用box-sizing: border-box;就是为了在设置有padding值和border值的时候不把宽度撑开。
(4) 盒子边框（border）
边框就是元素最外层的包装。CSS边框属性允许你指定一个元素边框的样式和颜色。 语法：
border： border-width border-style border-color
- ：用于指定边框的粗细。
- ：用于定义边框的样式。 属性值：none无（默认）、solid（单实线）、dashed（虚线）、dotted（点线）、double（双实线）
- ：用于设置边框的颜色。 border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。
使用 CSS3 border-radius 属性，你可以给任何元素制作 “圆角”。radius 半径（距离）
(5) 内边距（padding）
padding属性用于设置内边距。是指边框与内容之间的距离。 上右下左内边距
| 值的个数 | 表达意思 |
|---|---|
| 1个值 | padding: 四周内边距 |
| 2个值 | padding: 上下、左右内边距 |
| 3个值 | padding: 上、左右、下内边距 |
| 4个值 | padding: 上、下、左、右内边距 |
(6) 外边距（margin）
margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。 上右下左 ：行内元素可以设置水平方向的内外边距，但不能设置垂直方向的内外边距。 margin: 0 auto
(7) 外边距合并
就是说垂直距离不是margin-bottom与margin-top之和，而是 解决方案：
- 想办法只给一个盒子加外边距
- BFC规范
当两个块级元素嵌套时，如果内部的块设置有margin-top属性，而且父元素没有下边解决方法所述的特征，那么内部块的margin-top属性会绑架父元素，使其作用给父元素。 ：
- 设置父元素或者自身的display:inline-block; （BFC规范）
- 设置父元素的border:1px solid #fff;(>0) ；或者border-top(一定要包含border-top方向) 此方法如果不想影响元素高度 加上box-sizing:border-box;
- 设置父元素的padding:1px;(>0); 或者padding-top(一定要包含padding-top方向) 此方法如果不想影响元素高度 加上box-sizeing:border-box;
- 给父元素设置overflow:hidden; （BFC规范）
- 给父元素或者自身设置position:absolute;（BFC规范）
- 设置父元素非空，填充一定的内容。（在父元素与当前子元素之间 加点具有高度的元素或内容分开父元素与当前子元素）
(8) 盒子阴影
语法格式：
box-shadow: 水平位置 垂直位置 模糊距离 阴影尺寸扩大/缩小阴影 阴影颜色 内/外阴影;
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置，允许负值 |
| v-shadow | 必需。垂直阴影的位置，允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的尺寸 |
| color | 可选。阴影的颜色 |
| inset | 可选。将外部阴影（outset）改为内部阴影 |
十二 浮动（Float）
12.1 什么是文档流？
文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中
12.2 什么是浮动？
元素的浮动是指设置了浮动属性的元素会的控制，浮动的框可以向左或向右移动，但是会影响到正常文档流中的文字排版。 本语法如下
选择器 {
float: 属性值;
}
| 属性值 | 描述 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
| none | 元素不浮动（默认值） |
12.3 清除浮动
clear属性
这个属性主要有三个值:
-
left清除前面的左浮动元素带给我的影响 -
right清除前面的右浮动元素带给我的影响 -
both同时清除前面的左右浮动元素带给我的影响. 一般情况下选择这个值比较方便. 给父元素设置after伪类清除：设置父元素中的最后一个子元素 （推荐）.clear:after{ display: block; content: ""; clear: both; }
十三 定位
13.1 元素的定位属性
元素的定位属性主要包括和两部分
| 边偏移属性 | 描述 |
|---|---|
| bottom | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| top | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| left | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
position属性的常用值
| 属性值 | 描述 |
|---|---|
| static | 默认值，自动定位。 |
| relative | 相对位置，相对于其原文档流的位置进行定位 |
| absolute | 绝对定位，相对于其上一个已经定位的父元素进行定位 |
| fixed | 固定定位，相对于浏览器窗口是固定位置 |
13.2 叠放次序（z-index）
当多个元素同时设置定位时，定位元素之间有可能发生重叠。
要想调整重叠定位元素的堆叠顺序，可以使用z-index层叠等级属性，其取值可为正整数、负整数、0.。
同级:
1 不加z-index 后来者居上 2 加z-index 值越大越在上面 如果值相等 还是后来者居上
嵌套:
1 不加z-index 默认子元素在上 2 只给子元素加z-index值<0 可实现父元素为上 3 如果给父元素也添加z-index 父元素无论怎样 子元素都将在父元素上
嵌套+同层级： 1 如果父元素有其他兄弟元素 如果两者都没加z-index 后来者居上 2 两者父元素都没加z-index 若某一子元素z-index值大 那么该子元素将显示在上方 如果值相同 则后来者居上 3 如果父级都加了z-index 那么在进行比较时 只比较父元素z-index值 值越大则父元素连同里面的子元素越靠上 如果值相等 后来者居上
注意：
数字后面不能加单位。
只有相对定位、绝对定位、固定定位有此属性，其余标准流、浮动、静态定位都无此属性。
flex盒子的子元素也可以设置z-index属性
十四 布局中的对齐方式
| 值 | 描述 |
|---|---|
| baseline | 默认。同行元素基线对齐。 |
| sub | 元素的基线向下移。移动的距离未明确规定，具体由不同浏览器自行决定 |
| super | 元素的基线向上移。移动的距离未明确规定，具体由不同浏览器自行决定 |
| top | 元素的顶部(包含该元素的外边距margin-top padding-top)与父元素顶部对齐 (元素顶部与父元素中最高元素的顶部对齐) 元素顶部与父元素内容区域顶部对齐 |
| text-top | 把元素的顶端包含该元素的外边距margin-top)与父元素字体的顶端对齐 |
| middle | 行内元素的中线与行框的中线对齐 |
| bottom | 元素的底部与父元素底部对齐 (元素底部与父元素中最低元素的底部对齐) |
| text-bottom | 把元素的底端(margin-bottom, padding-bottom)与父元素字体的底端对齐。 |
| length | 是正值基线就向上移动，如果是负值基线向下移动。 |
| % | 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。 |
| inherit | 规定应该从父元素继承 vertical-align 属性的值。 |