1. 盒子模型
盒子模型是CSS中一个很重要的概念，页面中的所有元素都可以看成一个盒子，并占据一定的页面空间，一个页面由很多盒子组成，盒子之间会互相影响。只有掌握盒模型以及其中每个属性的用法，才能真正控制好页面元素。
盒子模型主要定义四个区域：内容(content)、内边距/填充(padding)、边框(border)和外边距(margin)。
1.1 内容区域
盒子的内容区域存放文本和图片等页面元素，拥有如下属性：
- 宽度属性：width
- 高度属性：height
- overflow：当内容区域的信息太多，超出内容区域所占的范围时，可使用该属性指定溢出内容的处理方式。
- visible：默认值，设置溢出的内容不会被修剪，会呈现在元素边框之外
- hidden：设置溢出的内容将不可见，用以不破坏整体布局
- scroll：设置溢出的内容会被修剪，但可以通过滚动条查看隐藏部分
- auto：设置由浏览器决定如何处理溢出部分 盒子的边框是指围绕元素的内容和内边距的一条或多条线，每条线都有宽度、颜色、样式、圆角和阴影等特征。
1.2 边框：
边框基本属性：
（1）简写属性：
通过一个属性设置四个方向边框的宽度、样式、颜色
属性：border
取值：width style color;
（2）单方向属性设置：
只设置某一条边框的宽度、样式、颜色
语法：border-方向（top/right/bottom/left）：width style color;
（3）单属性设置：
只设置边框的宽度、样式、颜色中的一种
语法：border-属性（width/style/color）：取值;
（4）单边单属性设置：
只设置某一条边框的宽度、样式、颜色中的一种
语法：border-方向（top/right/bottom/left）-属性（width/style/color）：取值;
（5）边框圆角：
属性：border-radius
作用：设置倒角位置处圆的半径，半径越大，弧度越大。
取值：
- none：默认值，元素没有圆角
- 具体数值(px)，不能为负
- 相对于宽度或高度的百分比，不能为负 border-radius属性的取值个数1~4
- 1个值：四角的半径相同
- 2个值：左上角和右下角相同，右上角和左下角相同
- 3个值：依次为左上角、右上角、右下角，左下角的半径和右上角相同
- 4个值：分别设置四个角不同的圆角边框
单角设置：
属性： - border-top-left-radius：左上角的圆角半径
- border-top-right-radius：右上角的圆角半径
- border-bottom-right-radius：右下角圆角半径
- border-bottom-left-radius：左下角的圆角半径
（6）CSS3图片边框属性：
属性：border-image
语法：
border-image: border-image-source | border-image-slice | border-image-width | border-image-repeat;
border-image-source：引入背景图片
取值：
默认值：无图片
url(图片URL地址)
border-image-slice：切割引入背景图片，把边框背景切成9份
取值：
number：默认单位px
百分比：
fill：保留边框图像的中间部分
border-image-width：指定边框图片的宽度
border-image-repeat：指定边框背景图片的排列方式，可定义2个参数，即水平和垂直方向
取值：
Stretch：默认值，拉伸
Repeat：平铺
Round：取整平铺
1.3 内边距
内容区域和边框（边缘）之间的距离
语法：padding: 值；
单边设置：padding-方向（top/right/bottom/left）:值；
取值：
数值px
百分比
内边距的简写方式：
padding:value;
四个方向内边距的值均为value
padding:value1 value2;
Value1为上下内边距的值，value2为左右内边距的值
padding:value1 value2 value3;
Value1为上内边距的值，value2为左右内边距的值，value3为下内边距的值
padding:value1 value2 value3 value4;
上右下左内边距的值分别为value1， value2， value3， value4
1.4 外边距
外边距指元素与元素之间的距离，即围绕在元素边框之外的空白区域，通过外边距可以为元素创建额外的“空间”。默认不能被其他元素所占据，用于拉伸两个元素间的距离。
语法：margin: 值；
单边设置：margin-方向（top/right/bottom/left）:值；
取值：
- 具体数值px
- 百分比
- 负值：左外边距取负值，元素左移动；左外边距取正值，元素右移动；上外边距取负值，元素上移动；上外边距取负值，元素下移动。
- auto：自动，由浏览器计算外边距的值，默认情况下，auto只对左右有效，上下无效。当为块级元素设置宽度后，再设置其左右外边距为auto，则该元素水平居中显示
外边距的简写方式：
margin:value;
四个方向外边距的值均为value
margin:value1 value2;
value1为上下外边距的值，value2为左右外边距的值
margin:value1 value2 value3；
value1为上外边距的值，value2为左右外边距的值，value3为下外边距的值
margin:value1 value2 value3 value4;
上右下左外边距的值分别为value1， value2， value3， value4
1.5 CSS3新增盒模型属性
（1）设置盒模型尺寸
重新制定元素尺寸计算模式
属性：box-sizing
取值：
- content-box：默认值，维持W3C的标准盒模型，即
可见宽度=border+padding+width
可见高度=border+padding+height - border-box：内容的宽度和高度包含了border、padding、content的宽度和高度
可见宽度=width(border+padding+内容宽度);
可见高度=width(border+padding+内容高度); - inherit：继承父元素盒模型模式
（2）设置元素尺寸大小
属性：resize
取值：
- none：不能拖动元素修改尺寸大小
- both：可以拖动元素，同时修改元素的宽度和高度
- horizontal：可以拖动元素，仅修改元素的宽度，不能修改元素的高度
- vertical：可以拖动元素，仅修改元素的高度，不能修改元素的宽度
- inherit：继承父元素resize属性值
1.6 CSS3外轮廓属性
位于元素边框之外的一条线
属性：
outline：width style color;
- outline-width:轮廓线宽度取值;
- outline-sytle:轮廓线样式取值;
- outline-color:轮廓线颜色取值;
- outline-offset:轮廓线偏移位置取值；为正，轮廓线向外偏移，为负，轮廓线向内偏移。
- outline-none;取消轮廓
1.7 CSS3盒子阴影属性
属性：box-shadow
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
取值：由一组值构成的值列表
- h-shadow：必须值，表示阴影的水平偏移距离，取值为正，右偏移，为负左偏移，单位px
- v-shadow：必须值，表示阴影的垂直偏移距离，取值为正，下偏移，为负上偏移，单位px
- blur：可选，阴影的模糊距离，取值为数值
- spread：阴影的大小，在原有基础上扩充的大小
- color：阴影的颜色
- inset：将默认的外阴影改为内阴影
2. 背景
（1）背景基本属性：
①背景颜色：
属性：background-color
取值：颜色值或transparent
注意：背景颜色是从边框位置处开始绘制
②背景图像：
属性：background-image
取值：url(背景图像URL)
③背景重复：
属性：background-repeat
取值：
- repeat：默认值，即横向又纵向平铺
- repeat-x：只在横向平铺
- repeat-y：只在纵向平铺
- no-repeat：不平铺
④背景图像固定：
属性：background-attchment
取值：
scroll：默认值，滚动
fixed：固定
⑤背景图像定位：
属性：background-position
取值：
- x y：指定背景图水平和垂直偏移距离，x：水平偏移距离，取值为正，背景图右偏移，取值为负，背景图左偏移；y：垂直偏移距离，取值为正，背景图下偏移，取值为负，背景图上偏移。
- x% y%：根据当前元素的宽度高度和图像的宽度高度计算比例
0% 0%：背景图在左上
0% 100%：背景图在左下
100% 100%：背景图在右下
关键字：
x：left/center/right
y：top/center/bottom
（2）CSS3新增背景属性：
①背景图像尺寸：
属性：background-size
取值：
- auto：保持背景图片的原始高度和宽度（默认值）
- value1 value2：指定背景图像宽度和高度
- value1% value2%：采用当前元素宽和高相对于背景定位区域的占比来设置背景图像尺寸
- cover：保持图像的横纵比，并将图像缩放至完全覆盖背景定位区域为止，可能会导致背景图显示不完整
- contain：包含，将背景图像等比（保持图像横纵比）放大，直到右边或下边碰到背景区域边缘为止。
②制定绘制背景图片的起点：
属性：background-origin
取值：
- padding-box：默认值，从padding的外变边缘开始显示背景图片
- border-box：从border的外边缘开始显示背景图片
- content-box：从content的外边缘开始显示背景图片
③制定绘制背景图片的显示范围：
属性：background-clip
取值：
- border-box：默认值，从border区域向外裁剪，即元素边框之外的背景图片都被裁剪掉
- padding-box：从padding区域向外裁剪，即元素padding区域之外的背景图片都被裁剪掉
- content-box：从content区域向外裁剪，即元素内容区域之外的背景图片都被裁剪掉
④多背景属性：
CSS3多背景通过为每个背景属性提供多个属性值实现。
div {
width: 1024px; /*设置宽度*/
height: 600px; /*设置高度*/
background-image: url(images/android.png), url(images/border.png), url(images/bg.jpg); /*设置背景图片*/
background-repeat: repeat-x, no-repeat,repeat-y; /*设置重复方式*/
background-position: top, center, left top; /*设置显示位置*/
}
3. 文本
（1）文本基本属性
①字体属性：
| 属性 | 描述 | 取值 |
|---|---|---|
| font-family | 设置字体系列 | 宋体、Times New Roman等 |
| font-style | 设置字体样式 | normal(默认值)、italic(斜体)、oblique(倾斜) |
| font-weight | 设置字体的粗细 | normal(默认值)、bold(粗体)、bolder(特粗体)、lighter(细体) |
| font-variant | 以小型大写字体或者正常字体显示文本 | small-caps(小写转成大写)，normal(正常不转换) |
| font-size | 设置字体的尺寸 | 像素值px或pt等 |
| font-stretch | 字体是否横向拉伸变形 | ultra-condensed：比正常文字宽度窄4个基数。extra-condensed：比正常文字宽度窄3个基数。condensed：比正常文字宽度窄2个基数。semi-condensed：比正常文字宽度窄1个基数。normal：正常文字宽度semi-expanded：比正常文字宽度宽1个基数。expanded：比正常文字宽度宽2个基数。extra-expanded：比正常文字宽度宽3个基数。ultra-expanded：比正常文字宽度宽4个基数。 |
font 简写属性语法：
font: font-style font-variant font-weight font-size line-height font-family
将所有字体属性合写为一行，其中font-family是复合属性中必不可少的属性。
可以不设置其中的某个值，如果省略值地话，就使用属性的默认值。
②文本属性：
| 属性 | 描述 | 取值 |
|---|---|---|
| color | 设置文本颜色 | Color Name(颜色名称), HEX, RGB, RGBA, HSL, HSLA, transparent |
| text-align | 设置文本水平对齐方式 | left(左对齐)、center(居中)、right(右对齐)、justify(两端对齐) |
| vertical-align | 设置文本垂直对齐方式 | baseline(默认值)、sub(上标对齐)、super(下标对齐)、bottom(行框底端对齐)、text-bottom(行内文本底端对齐)、top(顶端对齐)、middle(居中对齐) |
| text-indent | 设置文本首行缩进 | 单位：像素px、厘米cm、em、百分比% |
| text-decoration | 设置文本修饰 | none(默认值)、underline(下划线)、overline(上划线)、 line-through(删除线)、blink(闪烁线)、inherit(规定应从父元素继承 text-decoration 属性的值) |
| text-transform | 设置文本大小写 | none(默认值)、uppercase(大写)、lowercase(小写)、capitalize(首字母大写) |
| line-height | 设置行高 | normal(默认值)；数值[单位：px/%]，省略单位，则行高为当前字号乘以该数值 |
| white-space | 设置元素中空白的处理方式 | normal（默认值丢掉多余的空白符）、nowrap(空白符合并、换行符忽略)、pre(空白符、换行符保留)、pre-wrap(空白符、换行符保留保留，自动换行)、pre-line(空白符、换行符保留) |
| word-spacing | 设置词间距 | normal(默认值)；数值px，数值可为负数 |
| letter-spacing | 设置字符间距 | normal(默认值)；数值px，数值可为负数 |
| direction | 设置文本方向 | ltr(默认值)、rtl(从右到左)、inherit(规定应从父元素继承direction属性的值) |
| text-shadow | 设置文本阴影 | 如下 |
（2）CSS3文本阴影属性： 属性：text-shadow 作用：产生阴影和模糊主体 语法：
text-shadow : color x-offset y-offset blur-radius;
- color：阴影颜色，可选参数，省略则以文本颜色作为阴影颜色
- x-offset：X轴位移，用于设置阴影水平位移量，为正阴影在对象右边，为负阴影在对象左边
- y-offset：Y轴位移，用于设置阴影垂直位移量，为正阴影在对象底部，为负阴影在对象顶部
- blur-radius：阴影模糊半径，可选参数，代表阴影向外的模糊范围，只能为正，若为0，表示阴影不具有模糊效果
text-shadow多阴影效果：使用text-shadow属性为文本指定多个阴影，且针对每个阴影使用不同颜色，多个阴影用逗号进行分隔。
4. 列表
（1）编号样式属性：
作用：定义列表的编号样式
属性：list-style-type
| 名称 | 含义 |
|---|---|
| none | 无标记 |
| disc | 默认，标记是实心圆 |
| circle | 标记是空心圆 |
| square | 标记是实心方块 |
| decimal | 标记是数字 |
| decimal-leading-zero | 0开头的数字标记(01, 02, 03, 等。) |
| lower-roman | 小写罗马数字(i, ii, iii, iv, v, 等。) |
| upper-roman | 大写罗马数字(I, II, III, IV, V, 等。) |
| lower-alpha | 小写英文字母 (a, b, c, d, e, 等。) |
| upper-alpha | 大写英文字母 (A, B, C, D, E, 等。) |
（2）list-style-image属性：
作用：用于设置列表项的图像属性 语法：
list-style-image: url(图像URL地址)|none;
图像URL地址：图像的相对路径或绝对路径
none：默认值，不指定图像
注意：图片图标与文字之间的距离在不同浏览器中是不一样的，因此，一般情况下不采用这种方式来设置列表的图片样式。
通过设置<li>的背景图片的方式来设置列表图片基本步骤：
设置list-style-type属性值为none
设置<li>标记的背景属性backgruond
（3）list-style-position属性：
作用：用于声明列表标志相对于列表项内容的位置
语法：
list-style-position : inside | outside | inherit
- inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐
- outside：默认值，保持标记位于文本的左侧，列表项目标记放置在文本以外，且环绕文本不根据标记对齐
- inherit：规定应该从父元素继承list-style-position属性的值
（4）list-style属性：
作用：可以同时设定列表样式类型、列表样式位置、列表样式图片等属性的值。
语法：
list-style : list-style-image | list-style-type | list-style-position
注意：
可以不设置其中的某个值，未设置的属性采用默认值
同时指定list-style-image和list-style-type时，list-style-image优先显示，除非list-style-image设置为none，或图片路径错误无法显示
当列表与列表项目同时使用样式时，列表项目的样式优先显示
（5）水平导航菜单：
- 创建一个无序列表ul，设置列表项内容，并为每个列表项设置空链接。
- 为无序列表创建CSS样式规则，设置字体、字号、行高等属性，并设置list-style-type属性为none。
- 为每个列表项中的链接元素创建CSS样式规则，若想让每个列表项成块显示，设置display属性为block;若想让导航变为水平导航，设置float属性为left。
- 交互式导航效果设计：新建CSS样式规则，为列表项中的a链接对象设置鼠标悬停在链接之上时的样式。 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 50px auto;
padding: 0px;
color: white;
}
nav{
background-color: black;
width: 805px;
height: 80px;
font-size: 0px;
}
a{
background-color: gray;
font-size: 20px;
height: 40px;
width: 100px;
display: inline-block;
margin: 20px auto;
padding-left: 15px;
line-height: 40px;
text-decoration: none;
text-align: center;
}
a:hover{
background-color: black;
border-bottom: 4px solid orangered;
}
</style>
</head>
<body>
<nav>
<a href="#"> </a>
<a href="#">首页</a>
<a href="#">影像</a>
<a href="#">社区</a>
<a href="#">资讯</a>
<a href="#">更多</a>
<a href="#"> </a>
</nav>
</body>
</html>
5. 浮动与定位
（1）块级元素：
特点：
可以设置宽度和高度
默认情况下每个块级元素独占一行
作用：
块级元素主要用于页面布局
常用块级元素：
<div>、<p>、<h1>~<h6>、<ol>、<ul>等
（2）行内元素：
特点：
不可以设置宽度和高度，其宽度就是自身文字或图片的宽度
默认情况下多个行内元素会在一行内显示，遇父元素边界时会自动换行
作用：
行内元素主要用于设置文样式
常用行内元素：
<a>、<span>、<em>、<b>、<i>、<strong>、<img>、<input>等
（3）标准文档流：
- 文档流是文档中可显示对象在排列时所占用的位置。将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。
- 标准文档流是指在没有CSS样式影响下，浏览器对网页中元素（盒子）的排列规则。一般的的原则是浏览器从上之下，由外及内显示各个盒子。
- 在文档流中，不同的元素会具有不同的排列方式。块级元素占据整行空间，行内元素则是向文本一样一个接一个地排列。
- 网页中大部分对象默认是占用文档流，也有一些对象是不占文档流的，可以通过设置CSS中的float属性和position属性，让占用文档流的元素转换成不占文档流。
（4）浮动属性：
作用：控制页面元素脱离原有文档流，实现向左或向右移动，直到该元素外边缘碰到其包含框或另一个浮动框的边缘停止，标准流中的其他盒子将顶到浮动盒子的位置。浮动的元素不占据实际空间。
属性：float
取值：
- none：表示对象不浮动，默认值
- left：对象向左浮动
- right：对象向右浮动 浮动元素的外边缘不会超过其父元素的内边缘；
浮动元素不会相互重叠；
浮动元素不会上下浮动，如果一个浮动元素在另一个浮动元素之后显示，而且会超出容纳块，则它下降到低于先前任何浮动元素的位置。
（5）clear属性：
作用：规定元素的哪一侧不允许出现其他浮动元素。
取值：
- left：在左侧不允许出现浮动元素
- right：在右侧不允许出现浮动元素
- both：在左右两侧均不允许出现浮动元素
- none：默认值，允许浮动元素出现在两侧
- inherit: 规定从父元素继承clear属性的值
（6）定位属性：
作用：控制页面元素在页面中的位置。
属性：position
取值：static/relative/absolute/fiexed
①static静态定位
默认属性值，元素按照标准文档流进行排列，块级元素独占一行， 行内元素位于一行内显示，一行显示不下，自动换行。
②relative相对定位
特点：
相对于自身原有位置进行偏移
仍处于标准文档流中
随即拥有偏移属性和z-idex属性
偏移属性:
left:数值px;
right:数值px;
top:数值px;
bottom:数值px;
当元素相对定位后会产生Z轴上的堆叠，不设置z-index属性时，默认该元素出现在X轴和Y轴构成的平面上。
③absolute绝对定位
特点：
建立了以包含块为基准的定位
绝对定位的元素的位置相对于最近的已定位祖先元素（设定了绝对定位、相对定位或固定定位中的任何一种），如果元素没有已定位的祖先元素，则该元素的位置相对于浏览器窗口。
完全脱离了标准文档流
随即拥有偏移属性和z-idex属性
偏移属性：
left:数值px;
right:数值px;
top:数值px;
bottom:数值px;
绝对定位未设置偏移量的特点：
无论是否存在已经定位的祖先元素，都保持在元素的初始位置
脱离了标准文档流
④fixed固定定位
设定固定定位的元素框的表现类似于将position设置为absolute，不过其包含块是浏览器窗口本身。
（7）z-index属性：
在计算机显示中把垂直于屏幕平面的方向称为Z方向，CSS绝对定位容器的z-index属性即对应该方向。
作用：用于控制元素的层叠次序，使得某个元素浮于其他元素之上。
语法：
z-index:auto/number
auto：遵循其父元素的定位
number：整数，可负，值大者叠加在上层
注意：使用z-index属性时，要求该元素的position属性值为absolute、relative或fixed。
（8）display属性：
作用：用于定义建立布局时元素生成的显示框类型
语法：dispaly:值;
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。（CSS2.1 新增的值） |
| list-item | 此元素会作为列表显示。 |
| run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
| compact | CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 |
| marker | CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 |
| table | 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 |
| inline-table | 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。 |
| table-row-group | 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。 |
| table-header-group | 此元素会作为一个或多个行的分组来显示（类似 <thead>）。 |
| table-footer-group | 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。 |
| table-row | 此元素会作为一个表格行显示（类似 <tr>）。 |
| table-column-group | 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。 |
| table-column | 此元素会作为一个单元格列显示（类似 <col>）。 |
| table-cell | 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）。 |
| table-caption | 此元素会作为一个表格标题显示（类似 |
| inherit | 规定应该从父元素继承 display 属性的值。 |
（9）visibility属性：
作用：用于定义建立布局时元素生成的显示框类型
语法：visibility:值;
-
visible 默认值，元素可见
-
hidden：元素不被显示，占用页面空间。
