简介
CSS是层叠样式表（Cascading Style Sheets）的简称，学习HTML后，我们就能写出最基本的网页，能够实现网页的基本框架，但是仅有功能是不够的，我们还需要给这些功能加上合适的样式，就像我们身上穿的衣服，好看的人加上好看的衣服能产生1+1>2的效果，而CSS就是网页的“衣服”。
1 基础知识
1.1 CSS语法结构
CSS 由两部分组成，即：选择器 和 声明。
选择器用于选中用户需要改变样式的 HTML 元素，选择器的种类很多，会在下面的内容中详谈。
声明由大括号包裹，每条声明由一个属性和一个属性值组成，它的作用是设置想要实现的具体效果。
选择器{
属性:属性值；
[属性:属性值；...]
}
/* 以下面这行代码为例，实现了将h1标签的字体设置为红色；*/
/* 其中的 h1 就是选择器，括号中的代码就是一条声明 */
h1{
color: red;
}
CSS 规范写法：
- CSS 对大小写并不敏感(即大小写都可以发挥效果)，但是规范的写法是全部小写。
- 每行只写一个声明，且每个声明后面要加上分号
- 不要使用中文字符，全部为英文字符
- 代码要对齐，书写工整，快捷键 Shift + Alt + F 可直接规范化代码
1.2 行内样式表
行内样式表，即：将 CSS 代码放到 HTML 代码内部，作为 HTML 标签的属性存在，HTML 代码和 CSS 代码处于同一行。
<!-- style 中的内容即为 CSS 代码，此代码能生成一个颜色为蓝色，字号为 15px 的超链接 -->
<a href="#" style="color: blue;font-size: 15px;"></a>
特点：
- 后期维护麻烦
- 可以直接定义某个元素的样式，灵活方便
- 优先级最高，尽量少用，可以用来设置少量的声明，声明较多的最好不用这种方式
1.3 内部样式表
内部样式表又叫内嵌样式表，是指将 CSS 代码内嵌到 HTML 代码中，两者处于同一文件中，一般将所有的 CSS 代码放置在 HTML 代码的 <head> 标签中。
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
<!-- 内部样式表，CSS 代码放到 style 标签中 -->
<style>
h1{
color: blue;
}
</style>
</head>
特点：
- 写在<head>标签中，在一定程度上分离了 CSS 代码和 HTML 代码，在一定程度上方便了后期的维护，但是这种分离并不彻底，无法再其他 HTML 文件中使用这些 CSS 代码
- 优先级低于行内样式表
1.4 外联样式表
外部样式表是指 CSS 代码完全独立出来，单独放置在扩展名为 .css 的文件中，在 HTML 文件中，将 CSS 文件引入进来，形成关联。
<head>
<meta charset="UTF-8">
<title>外部样式表</title>
<link rel="stylesheet" type="text/css" href="css/ch05.css" />
</head>
- rel 属性：声明被链接文档与当前文档的关系，必写。
- type 属性：被链接文档的类型，可写。
- href 属性：被链接文档的地址，必写。
特点： - 与内部样式表一样，写在<head>标签中，实现了 CSS 代码与 HTML 代码的彻底分离，方便样式复用与后期维护
- 优先级要低于内部样式表。
- 在日常开发中推荐使用，效果很好
1.5 CSS选择器
CSS 选择器是指 CSS 选择要修饰的元素，对指定元素进行修饰美化。简单的选择器可以对给定类型的所有元素进行格式化，复杂一些的选择器可以根据元素的上下文、状态等来应用样式。
1.5.1 选择器种类
1、id选择器：为标有特定 id 的 HTML 元素指定特定的样式，以 “#” 来定义。
注意：ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
2、class类选择器：前面通过“.”来标志，通过class来调用。（可以指定特定的HTML元素使用该class）
3、属性选择器：属性名加属性值型( input [ type=“password” ] ) 或 纯属姓名型( img [ title ] )。
4、分组选择器：用","隔开，表示该组元素属性都会作用
5、标签选择器：对整个标签进行定义，使用该标签时加入样式。
6、伪类选择器：有时候还会需要用文档以外的其他条件来应用元素的样式，比如鼠标悬停(:hover)、首位元素(:first-child)等
7、伪元素选择器：::after、::before等
8、组合选择器：比如E,F/E F（后代选择器）/E>F（子元素选择器）/E+F（直接相邻元素选择器----匹配之后的相邻同级元素）/E~F（普通相邻元素选择器----匹配之后的同级元素）
8、通用选择器：使用(*)定义，全局所有元素均会使用
命名规则：
- 只能用字母、数字、下划线组成，不能有特殊字符。
- 开头不能是数字，即只能以字母、下划线开头。
1.5.2 CSS 样式优先级
- !important
- 行内样式
- 内联样式
- ID 选择器(#id)（0 1 0 0）
- 类选择器(.class) = 伪类选择器(:hover) = 属性选择器(type等)（0 0 1 0）
- 标签选择器(p等) = 伪元素选择器(::after/::before/::selsction)（0 0 0 1）
- 通用选择器(*)（0 0 0 0）计算时为:（0 0 0 1）
- 继承的样式
下面的代码用了平时常用的选择器，并且简单的表现了一下选择器的优先级，要尽力理解代码的含义，对后续的学习会有帮助。
<style>
/* 全局选择器，设置的样式全局通用 */
*{
font-size: 20px;
}
/* id选择器，设置了id="first"的元素可以使用 */
#first{
color: blue;
}
/* class选择器，设置了class="first"的元素可以使用 */
.first{
font-size: 30px;
}
</style>
<body>
<div id="first" class="first">
我优先收到 id选择器 和 class选择器 的影响
<div style="color: red;">
<span>我优先受到行内样式的影响</span>
</div>
<span>我继承了div的样式，但是继承样式的优先级不如全局选择器</span>
</div>
<div>
<span>我只受到全局选择器的影响，其他选择器无法影响我</span>
</div>
</body>
1.6 长度单位
长度在CSS中的使用非常常见，分为两类：绝对长度 和 相对长度
1.6.1 绝对长度
绝对长度在设置时比较方便，但是在很多情况下不太适用，在一些确定不会更改的板块上才会使用绝对长度
| 单位 | 描述 |
|---|---|
| cm | 厘米 |
| mm | 毫米 |
| in | 英寸(1in = 96px = 2.54cm) |
| px | 像素(1px = 1/96th of 1in) |
| pt | 点(1pt = 1/72 of 1in) |
| pc | 派卡(1pc = 12 pt) |
1.6.2 相对长度
相对长度单位规定相对于另一个长度单位属性的长度，在实际应用时有些难度，但是在灵活度上有很大的优势
| 单位 | 描述 |
|---|---|
| em | 相对于元素的字体大小（font-size）（2em 表示当前字体大小的 2 倍） |
| ex | 相对于当前字体的 x-height(极少使用) |
| ch | 相对于 “0”（零）的宽度 |
| rem | 相对于根元素的字体大小（font-size） |
| vw | 相对于视口*宽度的 1% |
| vh | 相对于视口*高度的 1% |
| vmin | 相对于视口*较小尺寸的 1％ |
| vmiax | 相对于视口*较大尺寸的 1％ |
| % | 相对于父元素 |
2 常用属性
2.1 文本属性
2.1.1 字体、字号与颜色属性
- 字体
（1）font-family：设置字体族，比如宋体、黑体等
（2）font-style：设置字体样式，即：正常（normal） 和 斜体（italic）
（3）font：缩写形式
其属性值依次为：font-style、font-weight、font-size/line-height、font-family分别是字体样式、字体粗细、字号/行高、字体族。
注意：使用所写形式必须严格遵守以上顺序，多个样式之间用空格隔开
font: italic bold 75%/1.8 'Microsoft Yahei', sans-serif;
- 字号
（1）font-weight：设置字体粗细
属性值：bold 加粗、lighter 细体、100~900 数字（400为正常粗细，700为加粗）
（2）font-size：设置字体大小
属性值：一般为 **px 或者 **%（其中的百分比代表浏览器默认的字体大小的百分比，绝大部分浏览器默认为 16px） - 字体颜色
（1）color：设置字体颜色
1）直接写颜色的英文名称：red、green、blue等。
2）十六进制写法：#FFFFFF，#后的可以填 数字 0~9 和 字母 a~ f ，一般编译器都会给出代码提示
3）rgb 写法：rgb(0～255,0～255,0～255)
rgba(0～255,0～255,0～255,0～1) 第 4 位数表示透明度，0 表示全透明，1 表示不透明。
（2）opacity：设置透明度
/* 属性值可以为0~1的任何数 */
opacity: 0.5;
注意：使用 opacity 时当前元素以及子元素均会透明；而使用 rgba 调整时，只会使当前元素透明，不会改变子元素透明度。
2.1.2 文本属性
- direction 设置文本方向
- letter-spacing 设置字符间距
属性值：一般是 **px - line-height 设置行高
属性值：**px 或 纯数据(基本行高的倍数) 或 百分数(正常行高的百分数) - text-align 对齐元素中的文本
属性值：left、center、right - text-decoration 向文本添加修饰
属性值：下划线 underline、删除线 line-through、上划线 overline、不做修饰 none - overflow 控制超出文本范围的文字的显示方式
属性值：auto(根据文字添加滚动条)、scroll(始终显示滚动条)、hidden(超出范围的文本隐藏) - text-shadow 设置文本阴影
属性值：**px(水平阴影距离) **px(垂直阴影距离) **px(阴影模糊距离) color(阴影颜色)
注意：允许设置多个阴影，但是两组阴影之间要用","隔开 - text-indent 设置首行缩进
- text-transform 控制元素中的字母
- unicode-bidi 设置或返回文本是否被重写
- vertical-align 设置元素的垂直对齐
- white-space 设置元素中空白的处理方式
- word-spacing 设置字间距
2.2 背景属性
2.2.1 背景颜色属性
设置网页背景颜色的是 background-color，其属性值为颜色值，表达方式与字体颜色的三种设置方法相同。
1）直接写颜色的英文名称：red、green、blue等。
2）十六进制写法：#FFFFFF，#后的可以填 数字 0~9 和 字母 a~ f ，一般编译器都会给出代码提示
3）rgb 写法：rgb(0～255,0～255,0～255)
rgba(0～255,0～255,0～255,0～1) 第 4 位数表示透明度，0 表示全透明，1 表示不透明。
2.2.2 背景图片属性
- background-color 设置元素的背景颜色。(请参照文本颜色的设置方法)
- background-image 设置图像背景，会覆盖背景颜色。
- background-position 设置背景图像的起始位置。（两种写法）
1）指定位置关键字：left、right、top、bottom 和 center
2）使用数值：两个值，分别表示水平位置和垂直位置，可以采用像素值或百分比形式。 - background-repeat 设置背景图像是否及如何重复，即图片多次放置直到放满。
属性值：no-repeat：不平铺、repeat：平铺（默认）、repeat-x：水平方向平铺、repeat-y：垂直方向平铺。 - background-clip(CSS3) 规定背景的绘制区域。
- background-origin(CSS3) 规定背景图片的定位区域。
属性值：border-box：从边框外缘开始、padding-box：从边框内缘开始、content-box：从文字内容区开始。 - background-size(CSS3) 规定背景图片的尺寸。
- background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
1）scroll：默认值，背景图像会随着页面其余部分的滚动而移动。
2）fixed：当页面的其余部分滚动时，背景图像不会随之移动。 - background 简写属性，作用是将背景属性设置在一个声明中。
其属性的顺序为：background-color、background-image、background-repeat、background-attachment、background-position
2.3 其他常用属性
2.3.1 列表常用属性
列表可用的属性不多，这里介绍一下 list-style ，他能够设置列表的样式，即每个列表项前的标志。
| 属性值 | 效果 |
|---|---|
| none | 无样式 |
| disc | 实心圆（<ul>默认类型） |
| circle | 空心圆 |
| square | 实心正方形 |
| decimal | 数字<ol>默认类型 |
2.3.2 超链接样式属性
超链接属性比较特殊，因为这个标签拥有四种状态，如：“未访问状态”、“已访问状态”、“鼠标在链接上状态”、“正在被单机状态”。
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被单击的链接 */
注意：a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后。
3 CSS3 新增属性
3.1 CSS 的过渡和变换
3.1.1 transition 过渡属性
所谓的过渡就是以一种比较平滑的方式将 CSS 的属性值在一定的时间内平滑地渡过，最简单的例子就是网页的轮播图，两张图片之间有一个比较平滑的切换，这个切换的过程就是过渡。
| 属性名 | 介绍 | 属性值 |
|---|---|---|
| transition-delay | 过渡开始前的延迟时间 | 默认值是 0，以秒或毫秒为单位，可以省略 |
| transition-duration | 过渡开始到过渡完成的时间 | 默认值是 0，意味着不会有效果，以秒或毫秒为单位 |
| transition-property | 参与过渡的属性 | 可以单独指定某个 CSS 属性，也可以写 all/none |
| transition-timing-function | 过渡的样式函数 | linear、ease、ease-in、ease-out、ease-in-out，默认值是ease |
| 简写属性：transition: property、duration、timing-function、delay。 |
transition: all .3s ease 2s
代码含义：执行元素所有属性的过渡效果，过渡时间为 0.3s，过渡速度是逐渐变慢，并且在触发过渡效果后延迟 2s 执行过渡效果。
transition-timing-function 的属性值的效果：
- ease：（逐渐变慢）默认值。
- linear：（匀速）。
- ease-in：（加速）。
- ease-out：（减速）。
- ease-in-out：（加速然后减速）。
提醒：CSS 代码存在浏览器的兼容问题，有些浏览器并不能并不支持CSS的一些属性，所以需要在属性的前面加一些前缀。（初学者很少遇到这样的问题，这里不做详解）
3.1.2 transform 变换属性
通过变换属性对元素进行行旋转、拉伸、翻转、缩放等操作。变化有2D变换和3D变换两种，通过变换属性可以实现一些简单的动画效果。（一般和过渡属性一起使用）
- transform
transform属性用于定义元素的变换方式，其中拥有的属性值非常多，这里写一些常用的属性值。
| 属性值 | 作用 |
|–|–|–|
| none | 元素不进行变换 |
| translate(x,y) | 定义 2D 平移变换 |
| translate3d(x,y) | 定义 3D 变换 |
| translateX(x) | 定义沿 X 轴平移变换，Y 轴与 Z 轴同理 |
| scale(x,y) | 定义 2D 缩放变换 |
| scale3d(x,y,z) | 定义 3D 缩放变换 |
| scaleX(x) | 通过设置 X 轴的值来进行缩放，Y 轴与 Z 轴同理 |
| rotate(angle) | 定义 2D 旋转，角度值后需跟角度单位 deg |
| skew(x-angle,y-angle) | 定义沿着 X 轴和 Y 轴的 2D 倾斜转换 |
2. transform-origin
transform-origin 用来设置旋转元素的基点位置，2D 转换元素可以改变元素的 X 轴和 Y 轴；对于 3D 转换元素还可以更改元素的 Z 轴。
属性值:
1）x-axis，可以使用的值有：left、right、center、**px、百分比。
2）y-axis，可以使用的值有：left、right、center、**px、百分比。
3）z-axis，可以使用的值有：**px。
3.2 CSS3 动画
3.2.1 CSS3 动画的 @keyframes 和 animation
过渡和变化都算是动画的一种，但是它们只变换了一次，真正的动画效果应该是不间断的循环变化，比如走马灯，轮播图之类的效果。下面的是两个和动画有关的关键属性，分别代表 创建动画 和 调用动画；
- 创建：使用@keyframes 创建关键帧动画
@keyframes 用于创建动画。在 @keyframes 中设置 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
动画中阶段的写法有两种方式：
1）每个阶段用百分比表示，从 0%到 100%（起止必须设置，即 0%和 100%）。
2）使用 from 和 to 表示从某阶段到某阶段。
/* 使用 0%到 100%表示（起止必须设置，即 0%和 100%）*/
@keyframes myFrame1 {
0% {
top: 0px;
}
30% {
top: 50px;
}
100% {
top: 100px;
}
}
/* 使用 from-to 直接表示开始结尾，样式会匀速变化*/
@keyframes myFrame2 {
from {
top: 0px;
}
to {
top: 100px;
}
}
/* 括号中的属性可以按照自己的需要定义，这段代码实现了 top 属性的变化 */
- 调用：使用 animation 调用关键帧动画
创建好一个动画后，需要在 CSS 选择器中使用 animation 动画属性，调用声明好的关键帧动画。动画属性中必须有动画名称和时长，否则动画不生效。
animation 属性的值很多，在下一节会详细介绍
div {
/* 让 div 调用 myFrame1 这个关键帧动画，5s 完成所有动画效果*/
animation: myFrame1 5s;
}
3.2.2 CSS3 animation 动画属性
animation 属性是一个简写属性，用于设置六个动画属性：
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
| 值 | 描述 |
|---|---|
| animation-name | 规定需要绑定到选择器的 keyframe 名称 |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计 |
| animation-timing-function | 规定动画的速度曲线 |
| animation-delay | 规定在动画开始之前的延迟 |
| animation-iteration-count | 规定动画应该播放的次数 |
| animation-direction | 规定是否应该轮流反向播放动画 |
| animation-timing-function 的属性值： | |
| 1）linear：动画从头到尾的速度是相同的。 | |
| 2）ease：默认值，动画以低速开始，然后加快，在结束前开始变慢。 | |
| 3）ease-in：动画以低速开始，然后逐渐加快至匀速直到结束。 | |
| 4）ease-out：动画以匀速开始到低速结束。 | |
| 5）ease-in-out：动画以低速开始和结束。 | |
| animation-direction 的属性值： | |
| 1）normal：默认值，动画正常播放。 | |
| 2）alternate：动画轮流反向播放。 |
3.3 CSS3 其他常用属性
CSS3 提供的新属性还有一些并不常用的效果，虽然在实际应用中不经常用到，但是合理使用却可以让网页显得更加震撼。
3.3.1 CSS3 渐变效果
CSS 的渐变效果可以在两个及以上指定的颜色之间显示平稳地过渡。
渐变包括线性渐变和径向渐变，有四个属性可以设置：
1）linear-gradient：用线性渐变创建图像。
2）radial-gradient：用径向渐变创建图像。
3）repeating-linear-gradient：用重复的线性渐变创建图像。
4）repeating-radial-gradient：用重复的径向渐变创建图像。
- 线性渐变的属性值
1）point：设置渐变的起始位置，可以使用的值有 left、right、top、bottom 以及角度
值，在不同浏览器内核中属性值的写法有所不同，具体写法参考下面的基本语法。
2）color-stop：设置渐变的起始颜色，可以写多个。
3）color-stop：设置渐变的终点颜色。 - 径向渐变的属性值
1）position：设置渐变的圆心位置，可取的值有 left、right、top、bottom、center，还有
数值与百分数（可以为负值）。
2）shape：用于定义渐变的形状，circle 是圆形渐变，ellipse 是椭圆形渐变。
3）size：主要用来确定径向渐变的结束形状大小，可取的值有 closest-side、closestcorner、farthest-side、farthest-corner，默认为 farthest-corner。
4）color-stop：设置渐变的终止颜色。
3.3.2 CSS3 多列元素
通过多列属性，可以将文本内容分为多列
1．columns
列的宽度与列数的简写属性。
2．column-count
规定元素被分隔的列数。属性值可以设为 auto，由其他属性决定列数，如 columnwidth，或自定义列数。
3．column-width
规定每个列的宽度。属性值可以为带像素单位的数值或 auto。
4．column-rule
设置每个列之间边框的宽度、样式和颜色，为简写属性。
5．column-rule-width
规定两列间边框的宽度。可选属性值有四个，分别为 thin（细边框）、medium（中等边框）、thick（粗边框），还有自定义边框宽度**px。
6．column-rule-style
规定两列间边框的样式。常见属性值有六个，分别为 none（无样式）、hidden（隐藏样式）、dotted（点状线）、dashed（虚线）、solid（实线）、double（双线）。
7．column-rule-color
规定两列间边框的颜色。
8．column-gap
设置每个列之间的距离。属性值可设为 normal（W3C 建议的值是 1em）或带像素单位的数值。
4 CSS 盒子模型 和 定位
4.1 盒子模型
4.1.1 概述
CSS 盒子模型主要用来设计和布局，HTML 文档中的每一个元素其实都可以看作一个盒子，它规定了每个元素所占的空间。
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
注意：在标准模式下，一个元素所占据的总宽度 = width + padding（左右）+ border（左右）+ margin（左右）。
盒子模型还有一个属性 box-sizing，他能够改变盒子 content 属性的默认设置
box-sizing: content-box; //默认值 内容真正宽度 = 设置的宽度
box-sizing: border-box; // 内容真正宽度width= 设置的width- 左右padding - 左右border
box-sizing: inherit;// 规定从父元素继承此值
简单的说：如果要想盒子模型中的content宽度与通过css width 属性设置的宽度相同，则使用box-sizing: content-box, 若想使整个盒子的宽度固定(即使padding和border发生变化)时使用 box-sizing:border-box.
4.1.2 margin 外边距
-
外边距的属性
外边距有四个属性可以设置，对应上、下、左、右四个方向，可以使用 margin-top、
margin-bottom、margin-left、margin-right 来分别设置。
简写属性 margin 可以有 1~4 个值：
写一个数值：上、下、左、右四个方向数值相等。
写两个数值：第一个数等于上下外边距，第二个数等于左右外边距。
写三个数值：上、左右、下边距。
写四个数值：上、右、下、左 4 个方向的边距。
当设置 margin: 0 auto; 时，代表块级盒子在父容器中水平居中。 -
多个盒子之间的外边距影响
（1）行内盒子水平排放的外边距
水平排放的盒子，水平间距是 margin 的累加
（2）块级盒子垂直排放的外边距
垂直排放的盒子，垂直间距是合并的（取最大值），
（3）父、子盒子的垂直外边距合并
为子盒子添加的上外边距后，父子盒子同时下移，父、子盒子的外边距合并了，为子盒子添加上边距相当于为父盒子添加上边距。而为了消除这种影响，这里有三种方法：
1）父盒子添加 overflow：hidden。
2）父盒子添加 padding。
3）父盒子添加 border。
注：实际开发中最常使用第一种方式，由于第二、第三种方式给父盒子添加了不必要的 padding 和 border，可能也会对网页布局细节产生影响，所以不常使用。
4.1.3 border 边框
- border-style
border-style 用于为元素设置边框的样式，可以单独设置一个边框，也可以设置所有边框。单独设置一条边框时写为 border-bottom-style。
简写形式 borde-style 值的设置与 margin 相同。
border-style 的常用属性值有以下几个。
- none：无边框。
- hidden：与 none 相同。
- dotted：设置为点状边框。
- dashed：设置为虚线边框。
- solid：设置为实线边框。
- double：设置为双线边框。双线的宽度等于 border-width 的值。
border-style:dotted solid dashed double; /*分别设置四个边框的样式*/
- border-width
border-width 用于为元素的边框设置宽度，可以单独设置一个边框，也可以设置所有边框。单独设置一条边框时写为 border-bottom-width。
简写形式 border-width 值的设置与 border-style 相同。
border-width 的属性值通常有以下四种：
- thin：设置为细边框。
- medium：默认，设置为中等边框。
- thick：设置为粗边框。
- length：使用带单位的数值自定义边框宽度，不可设置为负值。
border-width:thin medium thick 10px; /*分别设置 4 个边框的宽度*/
- border-color
border-color 属性设置四条边框的颜色，可以单独设置一个边框，也可以设置所有边
框。单独设置一条边框时写为 border-bottom-color。
简写形式 border-color 值的设置与 border-style 相同。
border-color:red green blue yellow; /*分别设置四个边框的颜色*/
注：bord 属性可以直接使用，提供三个属性值，分别代表边框宽度、边框样式和颜色，三个属性无先后顺序。
border: 5px solid red;
border-bottom: 5px dotted blue;
4.1.4 padding：内边距
内边距规定元素边框与元素内容之间的区域，也称为填充。内边距会使盒模型的整个可视区域变大，使用时需注意盒模式实际显示的大小。
padding 属性是一个简写属性，用于设置内容与边框之间的填充区域，可以写 1～4 个值，同 margin 一样。
4.2 盒子模型相关属性
4.2.1 overflow：内容溢出控制
overflow 属性规定了内容溢出盒子时如何处理，属性值有四个：
- Visible（默认值）：内容不会被修剪，会呈现在元素框之外。
- auto：根据内容多少选择显示滚动条，文字多的时候显示滚动条。
- scroll：无论文字多少，都会显示垂直和水平两个滚动条。
- hidden：超出区域的文字直接隐藏，无法看到。（类似于scroll，但是看不到滚动条）
4.2.2 outline：外围线
outline 是显示在边框边缘外围的一条线，起到突出元素的作用。外围线的属性写法与边框相同，此处不再赘述。外围线不会占用空间。
4.2.3 box-shadow：盒子阴影
box-shadow 是给元素周围添加阴影效果，该属性有六个属性值。
1）X 轴阴影距离：必写，可正可负，正值右移，负值左移。
2）Y 轴阴影距离：必写，可正可负，正值下移，负值上移。
3）阴影模糊半径：可写，只能为正，默认值为 0。数值越大，阴影越模糊。
4）阴影扩展半径：可写，可正可负，默认值为 0。数值增大，阴影扩大；数值减小，阴影缩小。
5）阴影颜色：可写，默认为黑色。
6）内外阴影：可写，可选值：inset（内阴影），不选默认为外阴影。
4.2.4 border-radius：边框圆角
border-radius 属性是一个简写属性，可以设置一个元素四个边框的圆角，设置方法与之前的属性相同，也可以单独为其中一个角设置样式，写法为 border-top-left-radius:20px。
- 基本用法
border-radius 的属性值有两种写法，一种是使用带单位的数值；另一种是使用百分比设置。border-radius 可设置的值有八个。
border-radius: 40px 30px 20px 10px/40px 30px 20px 10px
代码含义：“/”前后各有四个值，依次对应的是左上角、右上角、右下角、左下角。而“/”前表示四顶点沿 X 轴移动的距离，“/”后表示四顶点沿 Y 轴移动的距离。移动完成后，用弧线连接，即为圆角，
- 简写属性
为了方便使用，border-radius 同样提供了简写形式，简写原则如下。
1）只写 X 轴，Y 轴将默认等于 X 轴。基本语法如下：
border-radius:50px 20px 50px 20px; //只写 X 轴。 Y 轴=X 轴
2）4 个角写不全，默认对角相等。基本语法如下：
border-radius:50px 20px; // 只写左上角，右上角。 右下角=左上角；左下角=右上角
3）只写一个值，默认 8 个数均等。基本语法如下：
border-radius:50p; //只写一个值，默认 8 个数均等
4.2.5 border-image：图片边框
border-image 表示为当前盒子设置一个图片边框，也就是使用图片进行裁切作为边框显
示，主要有如下四个需要设置的部分。
- 图片路径（border-image-source）
用于当作边框的图片地址，使用 url()引入图片路径。
border-image-source: url(img/border.png);
- 图片切片宽度（border-image-slice）
有 4 个值，代表上、右、下、左 4 条切线，通过 4 条切线切割，可以将图片分为 9 宫格。9 宫格 4 个角分别对应边框的 4 个角（不会进行任何拉伸），9 宫格 4 条边分别对应 4 条边框（会根据设置进行拉伸、铺满、重复等操作，后续讲解）。
border-image-slice:27 27 27 27;
border-image-slice:27;
如图，4 条虚线分别代表 4 条切线。
- 边框宽度（border-image-width）
边框宽度表示图片边框的宽度大小，使用规则与 border 类似。
border-image-width: 10 10 10 10;
border-image-width: 10; // 表示 4 条边框的宽度都是 10px
- 图片重复方式（border-image-repeat）
设置边框区域图片的重复方式，常用的属性值主要有三个：stretch（拉伸）、round（铺满）、repeat（重复）。
border-image-repeat:stretch; // 拉伸
border-image-repeat:round; // 铺满
border-image-repeat:repeat; // 重复
铺满和重复的区别如下：
1）重复会保持原有 4 条边的宽度，可能导致角落处无法显示完整一个图标。
2）铺满会对 4 条边进行适当地拉伸、压缩，确保可以正好显示完全。
- 简写方式（border-image）
上述四个属性分开设置比较麻烦，可以使用 border-image 一次性设置所有属性。
border-image: url(img/border.png) 27/10px stretch;
-webkit-border-image: url(img/border.png) 27/10px repeat; // webkit 浏览器内核专用
代码解释：
缩写时的顺序必须按照图片路径、切片宽度、边框宽度、重复方式。其中，切片宽度和边框宽度之间用“/”分隔，且只能在边框宽度后带有一个 px 单位。
4.3 浮动与清除浮动
在网页中，行级元素从左往右显示，块级元素独占一行显示。但是，这种显示规则可能在布局中受到的局限性非常大，往往需要打破常规的文档流模型，而浮动就是其中最常用的方式之一。
4.3.1 float：浮动
float 属性使元素脱离了常规文档流而表现为向右或向左浮动，由于浮动的元素不在文档流中，所以在文档流中浮动的元素就像不存在一样，其周围的元素也会重新排列。常用的float 属性有三个：
1）left 元素向左浮动。
2）right 元素向右浮动。
3）none 默认值，元素不浮动。
float: left; /*添加左浮动*/
float: right; /*添加右浮动*/
float: none; /*不添加浮动*/
4.3.2 clear：清除浮动
当一个元素浮动以后，很有可能对其他元素的位置造成影响，以两个 div为上下排列举例。
当给 div1 添加浮动以后，就相当于将这个 div 的样式不再占据网页的空间，div2 受到 div1 的影响，下方的div 受到上方的影响，位置发生变化。但是，浮动只能打破文档流，不能打破文字流，所以div2 的文字保持在原位置不动，但是背景颜色上移。就是左边图片的样子。
为了解决这个情况，可以给第二个 div 添加 clear 属性，clear 属性有三个可选值：left、right、both，分别表示清除左浮动影响、右浮动影响，以及同时清除左右浮动的影响。实际开发过程中，为了方便使用，通常直接使用“clear:both”。
像下面这个案例中，给第二个 div 添加“clear:both”后，显示效果又将回到右图所示的情况。
4.3.3 子盒子浮动造成父盒子高度塌陷
元素浮动会造成其他元素位置的变化。除此之外，浮动还有一种特殊情况，当子盒子全部浮动，如果父盒子没有指定高度，则父盒子高度将会塌陷为 0。
比如，一个 ul 列表，如果没有给它指定高度，而是由 li 的高度撑开，当 ul 里面的 li 全部浮动以后，ul 的高度就将塌陷为 0，也就是无法看到 ul 了。
结论：子元素全部浮动后，父元素的高度将会塌陷为 0。
解决方法：
- 在父元素中添加一个新的元素，为新元素设置 clear:both
- 为父元素添加 overflow: hidden 属性
- 为父元素添加伪类：after，对伪类设置 clear:both
4.4 定位
定位与浮动一样，都是改变元素在正常文档流中的位置，对网页内容进行重新排版。
position 定位属性可选的属性值有 4 个：
- relative：相对定位。
- absolute：绝对定位。
- fixed：固定定位。
- sticky：粘性定位。（CSS3新增属性）
当元素没有定位，出现在正常的文档流中，将不会受 left、right、top、bottom 和 z-index 的影响。这些属性值会在后文进行详细介绍。
4.4.1 relative：相对定位
- 相对于自己原来在文档流中的位置定位，当不指定 top、left 等定位值时，不会改变元素位置。
- 相对定位元素仍会占据原有文档流中的位置，而不会释放。
4.4.2 absolute：绝对定位
1）相对于第一个非 static(静态) 的祖先元素（即使用了 relative、absolute、fixed 定位的祖先元素）进行定位。
2）如果所有祖先元素均未定位，则相对于浏览器左上角定位。
3）使用 absolute 的元素会从文档流中完全删除，原有空间释放不再占据。
4.4.3 fixed：固定定位
固定定位是一种特殊的绝对定位，它与普通绝对定位的区别是无论父元素是否定位，子元素如果采用固定定位，都将相对于浏览器左上角定位，且固定在指定位置，不随浏览器滚动条的滚动而滚动。
4.4.4 sticky：粘性定位
粘性定位作为一种新增属性，可以说是（静态定位）static 和（固定定位）fixed 的结合；它主要用在对 scroll(滑动) 事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
4.4.5 static：静态定位
所谓的静态定位其实就是定位的默认值 ，元素框正常生成的，top left bottom right 这几个偏移属性还有 z-index 不会影响其静态定位的正常显示（默认情况下的定位，仅作了解，不会使用）
4.4.6 z-index
- 作用：
设置定位元素的层叠顺序，通俗的说，就是网页元素的先后顺序。 - 使用要求：
1）必须是定位（relative、absolute、fixed）元素才能使用 z-index。
2）使用 z-index 需要考虑父容器的约束。
① 如果父容器没有设置 z-index，或父容器设置为 z-index:auto，则子容器的 z-index 可以不受父容器的约束。
② 如果父容器对 z-index 进行了设置，则子容器的层叠顺序将以父容器的 z-index 为准（此时子元素的 z-index 只能调整自身与父容器中不同子元素之间的层叠顺序）。 - z-index:auto 与 z-index:0 的异同
1）z-index:auto 为默认值，与 z-index:0 处于同一平面。
2）z-index:auto 不会约束子元素的 z-index 层次，而 z-index:0 会约束子元素必须与父元素处于同一平面。 - z-index 相同（处于同一平面的定位元素）的层叠关系：
后来者居上，即写在后面的元素在上一层。
4.5 附上一个布局的练习
<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 type="text/css">
*{
margin: 0;
padding: 0;
}
#header{
height: 100px;
}
#header .left{
background-color: #FF00FF;
height: 100%;
width: 20%;
float: left;
}
#header .center{
background-color: #FFFF00;
margin: 0 1%;
width: 58%;
height: 100%;
float: left;
}
#header .right{
height: 100%;
width: 20%;
background-color: #AAFF00;
float: left;
}
#nav{
height: 30px;
width: 100%;
margin: 10px 0;
background-color: #00BBFF;
}
#main{
height: 800px;
}
#content{
width: 75%;
height:100%;
float: left;
}
#content .left1{
width: 40%;
height: 49%;
background-color: #CCCCCC;
float: left;
margin-bottom: 1%;
margin-right: 1%;
}
#content .left2{
width: 40%;
height: 49%;
background-color: #CCCCCC;
float: left;
clear: left;
margin-right: 1%;
}
#content .right1{
width: 59%;
height: 49%;
float: right;
margin-bottom: 1%;
background-color: #CCCCCC;
}
#content .right2{
width: 59%;
height: 49%;
float: right;
background-color: #CCCCCC;
}
#aside{
width: 24%;
height: 100%;
float: right;
margin-left: 1%;
background-color: #FFFF00;
}
</style>
</head>
<body>
<div id="header">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div id="nav"></div>
<div id="main" >
<div id="content">
<div class="left1"></div>
<div class="right1"></div>
<div class="left2"></div>
<div class="right2"></div>
</div>
<div id="aside"></div>
</div>
</body>
5 移动开发与响应式
5.1 移动开发基础知识
要学习移动开发，首先要知道移动开发中会遇到的各种基本概念，比如屏幕的宽高、屏
幕的分辨率、像素的基础知识、视口的基本概念等。这些知识点在开发过程中或许不会用到
很多，却是理解问题的关键。
5.1.1 媒体设备常用属性
媒体设备，即各种不同的展示设备，每个设备的大小、尺寸、分辨率都将影响网页展示的实际效果，所以关于媒体设备的一些基本概念，还是有必要了解。
- 屏幕宽高（device-width/device-height）
设备宽度（device-width）指当前设备的屏幕宽度。通常，每个设备的屏幕宽度是固定不变的，而不同设备的屏幕宽度又是各不相同的。设备高度（device-height）同理。 - 渲染窗口的宽高
宽度（width）指浏览器窗口的宽度。对于桌面操作系统来说，就是当前浏览器的宽度（并且是包括滚动条的）。最小宽度（min-width）表示当前元素允许的最小宽度，最大宽度（max-width）表示当前元素允许的最大宽度。高度（height）、最小高度（min-height）、最大高度（max-height）同理。 - 设备方向（orientation）
设备方向表示当前设备所处的方向是水平方向还是垂直方向。但是，取值并不是用水平或垂直表示，只有两个可选值：portrait 和 landscape。两个值的区别如下：
1）portrait：表示当前页面区域的高度大于或等于宽度（也就是通常人们理解的设备
垂直）
2）landscape：除 portrait 值情况外，都是 landscape。 - 设备分辨率（resolution）
设备分辨率表示当前设备的分辨率大小，可以使用整数表示分辨率的取值，单位为dpi。该特性接受 min 和 max 前缀，因此可以派生出 min-resolution 和 max-resolution 两个媒体特性。
5.1.2 像素的基础知识
从开始接触 CSS，人们就了解了一种最常用的单位——px（像素）。那 1px 真的等于1px 吗？这句话看上去是个病句，但确实存在这种情况，因为在网页开发过程中有很多种像素类型，之前接触的都是 CSS 像素。下面介绍各种像素类型。
- 设备物理像素
设备物理像素，又称设备像素或物理像素。一个物理像素是显示器（手机屏幕）上最小的物理显示单元，即设备能控制显示的最小单位。可以把这些像素看作屏幕上一个个的点。 - 设备独立像素
设备独立像素（也称为密度无关像素），可以认为是计算机坐标系统中的一个点，这个点代表一个可以在程序中使用的虚拟像素。这个虚拟像素的大小与屏幕上的一个像素点（也就是物理像素）没有关系，可以通过一定的转换关系将几个物理像素点转换为一个虚拟像素（也就是设备独立像素）。因此，物理像素和设备独立像素之间存在着一定的对应关系，即设备像素比（dpr）。当dpr 为 1 时，设备独立像素=设备物理像素。 - 设备像素比
设备像素比就是设备物理像素与设备独立像素的比例，存在如下转换关系：设备像素比 = 物理像素 / 设备无关像素
4．CSS 像素
CSS 像素是一个相对单位。对于不同屏幕，其实际像素大小不同。当页面没有缩放时，CSS 像素等于设备独立像素。
注意：通常在移动开发中 CSS 的 1px 并不等于设备的 1px。因此，需要通过视口（viewport）的设置，让 1px 的 CSS 像素等于 1px 的设备独立像素，进而等于 1px 的设备物理像素。也就是说，合理地设置 viewport，才能处理好这些像素之间的转换关系。
5.2 网页布局介绍
5.2.1 网页的布局方式
网页的布局方式主要有三种：固定布局、流体布局和弹性布局。
- 固定布局
从名字可以看出，固定布局是指网页中每块内容的宽高都是由固定的像素宽度值确定，同时这些内容区块的位置也是固定的，所以不管屏幕大小如何变化，用户看到的都是固定宽
度的内容。 - 流体布局
流体布局也称为流动布局，是自适应布局的一种。其实现方法就是将大多数元素区块都设成百分比宽度，而不是用具体的像素单位，这样可以让页面根据用户的屏幕和浏览器窗口大小自适应调整。
5.2.2 响应式布局介绍
无论是固定布局还是流体布局，都存在着自己的局限性。针对这个问题，响应式布局正
式诞生。响应式布局就是一个网站能够兼容多种终端，而不是为每种终端做一个对应的网站。这种布局主要是为改善移动互联网的浏览体验而诞生的。
- 响应式布局优点
1）面对不同分辨率设备，展示不同效果的网站，灵活性强。
2）能够快捷解决多设备显示适应问题，而不需要做计算机站与手机站。 - 响应式布局缺点
1）兼容各种设备工作量大，效率低下（但相比于制作计算机站+手机站，还是快速很多）。
2）代码累赘，会出现隐藏无用的元素，使页面加载时间变长。 - 响应式的实现方式
响应式布局没有固定的要求，只要能实现计算机站与手机站的不同效果显示，都可以称为响应式网站。基于这个原则，流体布局其实本身就是响应式布局之一，除此之外，响应式还可以通过如下几种途径实现。
1）媒体查询。
2）流体布局。
3）弹性布局。
4）通过 JavaScript、JQuery 进行判断来显示不同的布局页面。
5）Bootstrap 等第三方框架。
6 CSS3弹性布局
6.1 简介
弹性布局又称 Flex 布局，是由 W3C 于 2009 年推出的一种布局方式，可以简便、完整、响应式地实现各种页面布局，而且已经得到所有主流浏览器的支持，所以可以放心使用。
6.1.1 基本概念
- 容器与项目
容器（box）：需要添加弹性布局的父元素。
项目（item）：弹性布局容器中的每一个子元素，称为项目。 - 主轴与交叉轴
主轴（principal axis）：在弹性布局中，通过属性规定水平或垂直方向为主轴。
交叉轴（intersecting axle）：与主轴垂直的另一方向，称为交叉轴。
6.1.2 注意的问题
1）给父容器添加 display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式。
2）容器添加弹性布局后，仅仅是容器中的项目采用弹性布局，而容器本身在文档流中的定位方式依然遵循常规文档流。
3）display:flex; 容器添加弹性布局后，显示为块级元素。
4）display:inline-flex; 容器添加弹性布局后，显示为行级元素。
5）将父容器设为弹性布局后，子项目的 float、clear 和 vertical-align 属性将失效，但position 属性依然生效。
6.2 作用于容器的属性
6.2.1 flex-direction：主轴方向
该属性规定主轴的方向（即项目的排列方向）。其可选属性值有四个。
1）row（默认值）：主轴为水平，方向从左到右。
2）row-reverse：主轴为水平，方向从右到左。
3）column：主轴为垂直，方向从上到下。
4）column-reverse：主轴为垂直，方向从下到上。
6.2.2 flex-wrap：控制换行
该属性用于规定子元素在容器内如何换行。其可选属性值有三个。
1）nowrap（默认）：不换行。当容器宽度不够时，每个项目会被挤压宽度。
2）wrap：换行显示，并且第一行在容器最上方。
3）wrap-reverse：换行显示，并且第一行在容器最下方。
6.2.3 flex-flow：缩写形式
该属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap，其他属性值不再赘述。
6.2.4 justify-content：主轴对齐
该属性规定项目在主轴线上的对齐方式。其可选属性值有五个。
1）flex-start（默认值）：项目位于主轴起点。
2）flex-end：项目位于主轴终点。
3）center：居中。
4）space-between：两端对齐，项目之间的间隔都相等（开头和最后的项目，与父容器边缘没有间隔）。
5）space-around：每个项目两侧的间隔相等。同时项目之间的间隔比项目与边框的间隔大一倍（开头和最后的项目，与父容器边缘有一定的间隔）
6.2.5 align-items：交叉轴单行对齐
该属性规定项目在交叉轴上的对齐方式。其可选属性值有五个。
1）flex-start：与交叉轴的起点对齐。
2）flex-end：与交叉轴的终点对齐。
3）center：与交叉轴的中点对齐。
4）baseline：根据项目的第一行文字的基线对齐（文字的行高、字体大小会影响每行的基线）。
5）stretch（默认值）：如果项目未设置高度或设为 auto，则将占满整个容器的高度。
6.2.6 align-content：交叉轴多行对齐
该属性规定每一行或每一列在另一方向上的对齐方式，即主轴在交叉轴的对齐方式。只有一行或一列时，该属性无效。其可选属性值有六个。
1）flex-start：与交叉轴的起点对齐。
2）flex-end：与交叉轴的终点对齐。
3）center：与交叉轴的中点对齐。
4）space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
5）space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
6）stretch（默认值）：如果项目未设置高度或设为 auto，则将占满整个容器的高度（占满整个交叉轴）
6.3 作用于项目的属性
6.3.1 order：项目排序
该属性规定项目的排列顺序，使用整数设置，数值越小越靠前，可以为负值。
6.3.2 flex-grow：项目放大比
该属性规定项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。
6.3.3 flex-shrink：项目缩小比
该属性规定项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
6.3.4 flex-basis：伸缩基准值
该属性规定项目的伸缩基准值。浏览器根据这个属性，计算主轴是否有多余空间来分配空间。例如，如果主轴为水平，则设置这个属性后，相当于设置了项目的宽度，原宽度将会失效。
6.3.5 flex：缩写形式
该属性是 flex-grow、flex-shrink 和 flex-basis 的简写，默认值为 flex:0 1 auto。后两个属性可选，除默认值外，还有 none（0 0 auto）和 auto（1 1 auto）两个快捷设置值。
6.3.6 align-self：自身对齐
该属性定义单个项目自身在交叉轴上的排列方式，可以覆盖掉容器上的 align-items 属性。可选属性值除 auto 外，与 align-item 相同。
1）flex-start：与交叉轴的起点对齐。
2）flex-end：与交叉轴的终点对齐。
3）center：与交叉轴的中点对齐。
4）baseline：与项目的第一行文字的基线对齐（文字的行高、字体大小会影响每行的基线）。
5）stretch：如果项目未设置高度或设为 auto，则将占满整个容器的高度。
6）auto（默认值）：表示继承父元素的 align-items 属性。如果没有父元素，则等于stretch。
345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
