一、CSS盒模型
1、元素分类：html标签中元素分为块状元素、内联元素（行内元素）和内联块状元素。
常用块状元素：
<div> <p> <h1> <ol> <ul> <table> <address> <blockquote> <form> <dl>
常用内联元素：
<a> <span> <br> <i> <em> <strong> <label> <q> <var> <cite> <code>
常用内联块状元素：
<img> <input>
（1）块状元素
将元素显示/转换为块状元素：
a{display:block;}
块状元素特点：
a）每个块状元素和其后的元素都要独占一行
b）元素的高度、宽度、行高和底边距都可设置
c）元素宽度不设置时，默认是它本身父元素的宽度
（2）内联元素
将元素显示/转换为内联元素：
div{
display:inline;
}```
内联元素特点：
a）和其余元素在一行上
b）元素的高度、宽度、顶部和底边距不可设置
c）元素宽度（它包含的文字或图片宽度）不可改变
（3）内联块状元素（inline-block）
同时具备内联元素和块状元素的特点
>`display:inline-block`
特点：
a）和其他元素在一行上
b）元素高度、宽度、行高、顶和底边距可设置
2、盒模型
>以月饼举例：
月饼盒为一个页面元素比如<div>
五仁月饼为盒模型里的内容（可以是文字、图片或标签元素）
4个padding为内填充
盒子的边框为border
盒模型与盒模型的间距为margin
（1）盒模型边框
边框可以被设置粗细、样式、颜色
>如：
div{
border:2px solid red;
}
边框的样式常见的有：
dashed（虚线）、solid（实线）、dotted（点线）
>也可以只为下边框设置样式：
`div{border-bottom:1px solid red;}`
（2）盒模型宽度和高度
盒模型实际宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
>举个例子：
div{
width:200px;
padding:20px;
border:1px solid red;
margin:10px;
}
元素实际宽度为：10+1+20+200+20+1+10=262
（3）盒模型填充
元素内容与边框之间的距离是填充，写代码时有方向：顺时针上、右、下、左
`div{padding:20px 10px 15px 30px;}`
如果四个方向填充都为10px，可写：
`div{padding:10px;}`
如果上下填充为10px，左右填充为20px，可写：
`div{padding:10px 20px;}`
（4）盒模型边界
边界margin是元素与其他元素之间的距离，顺序也是上、右、下、左
>padding与margin的区别：
padding在边框里
margin在边框外
## 二、CSS布局模型
>CSS有三种布局模型：
（1）流动模型（Flow）
（2）浮动模型（Float）
（3）层模型（Layer）
（1）流动模型（Flow）
流动模型是默认的网页布局模式。
有2个典型特征：
1）块状元素在所处的包含元素内自上而下按顺序垂直延伸分布，默认块状元素的宽度为100%，以行的形式占据位置
2）内联元素会在所处包含元素内从左到右水平分布显示（不会霸占一行）
（2）浮动模型（Float）
元素在默认情况下是不能浮动的，可以使用CSS定义为浮动
>如：定义为左浮动
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
（3）层模型（Layer）
可以让网页元素在网页中精确定位，像PS中的图层一样。
>层模型的三种形式：
1）绝对定位（position:absolute）
2）相对定位（position:relative）
3）固定定位（position:fixed）
1）绝对定位
将元素从文档流中拖出来，用left/top/right/bottom属性相对于其最接近的一个具有定位属性的父包含快进行绝对定位，如果不存在这样的包含块，就相对于body元素（浏览器窗口）。
>如：
div{
position:absolute;
left:100px;
top:50px
}
表示div元素相对于浏览器窗口向右移动100px，向下移动50px
2）相对定位
相对定位的过程是首先按static（float）方式生成一个元素，然后相对于以前的位置移动，移动的方向和幅度由上下左右四个属性确定，偏移前的位置保留不动。
3）固定定位
固定定位的相对移动坐标是视图（网页窗口），不会随着浏览器窗口的滚动条变化而变化，除非移动浏览器窗口的位置或者改变浏览器窗口的大小。固定定位不会受文档流动影响。
4)relative与absolute组合使用
用于不想对于浏览器定位，相对于其他元素的定位
>第一步：
参照定位的元素必须是相对定位元素的前辈元素
第二步：
参照定位的元素（前辈元素）加入position:relative
第三步：
定位元素加入position:absolute
如box1是box2的父辈元素
box1{
width:200px;
height:200px
position:relative;
}
box2{
position:absolute;
top:20px;
left:30px
}
## 三、CSS代码缩写
缩写可以减少占用的带宽
1、盒模型代码缩写
>三种缩写方法：
（1）如果top、right、bottom、left的值相同
`margin:10px;`
（2）如果top和bottom的值相同，left和right的值相同
`margin:10px 20px`
（3）如果left和right的值相同
`margin:10px 20px 30px`
2、颜色值缩写
当设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。
如：
`p{color:#000000;}`可缩写为`p{color:#000;}`
再如：
`p{color:#336699;}`可缩写为：`p{color:#369;}`
3、字体缩写
（1）缩写时至少要指定font-size和font-family的属性，其他属性（如weight、style、variant、height）未指定则自动使用默认值。
（2）font-size和line-height之间要加/
>比如：
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
}
可缩写为：
body{
font:italic small-caps bold 12px/1.5em "宋体",san-serif;
}
## 四、单位和值
1、颜色值
>1）英文命令颜色：
`p{color:red;}`
2）RGB颜色：
`p{color:rgb(133,45,200);}`或者`p{color:rgb(20%,33%,25%);}`
3）十六进制颜色：
`p{color:#00ffff;}`
2、长度值
（1）像素
像素指的是显示器上的笑点（CSS规范中假设90px=1英寸）
（2）em
如果font-size为14px，则1em=14px，如果font-size为18px，则1em=18px
（3）百分比
`p{font-size:12px;line-height:130%}`
表示：设置行高为字体的130%（12*1.3=15.6px）
## 五、CSS样式设置小技巧
1、水平居中设置-行内元素
当被设置元素为文本、图片时，通过给父元素设置`text-align:center`实现
>举例：
html代码：
<body>
<div class="txtCenter">我要居中</div>
</body>
CSS代码：
<style>
.txtCenter{
text-align:center;
}
</style>
2、水平居中设置-定宽块状元素
块状元素分为定宽和不定宽
定宽元素：设置左右margin值为auto
>如：
div{
wedth:200px;
margin:20px auto;
}
3、水平居中总结-不定宽块状元素方法
不定宽块状元素：块状元素的宽度不固定
>不定宽块状元素有三种方法居中：
（1）加入table标签
（2）设置display:inline方法
（3）设置position:relative和left:50%方法
（1）加入table标签
第一步：为需要居中的元素加入一个table标签（包括`<tbody> <tr> <td>`）
第二步：设置左右margin居中
>如
table{
border:1px solid;
margin:0 auto;
}
（2）设置display:inline方法
改变块元素dispaly为inline（行内元素），再用text-align:center
>比如：
<body>
<div class="haha">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</body>
<style>
.haha{
text-align:center;
}
.haha ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
.haha li{
margin-right:8px;
display:inline;
}
</style>
1、2两种方法对比：
2的优势是不用增加无语义标签，但由于类型变成行内元素，也无法设定长度值了。
（3）设置position:relative和left:50%方法
方法：给父元素设置float，position:relative和left:50%，子元素设置position:relative和left:-50%
>如：
<div class="haha">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
.haha{
float:left;
position:relative;
left:50%
}
.haha ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.haha li{float:left;display:inline;margin-right:8px;}
像这样就可以让元素居中了。
3、垂直居中
垂直居中的两种情况：父元素高度确定的单行文本、父元素高度确定的多行文本。
（1）单行文本
设置父元素的height和line-height使其高度一致。
>如：
<div class="haha">
<h1>CHINA</h1>
</div>
.haha{
height: 100px;
line-height: 100px;
background: #999;;
}
这样，CHINA就是垂直居中的。
（2）多行文本
父元素高度确定的多行文本、图片等竖直居中方法有两种。
方法一：插入table标签(包括tbody、tr、td)，同时设置vertical-align:middle（垂直居中的属性）
>如：
<table>
<tbody>
<tr>
<td class="haha">
CHINA
</td>
</tr>
</tbody>
</table>
table td{
height: 500px;
background: #ccc;
vertical-align：middle
}
此时效果图：
方法二：此方法兼容性较差，IE6、IE7不支持此方法。
设置块级元素display为table-cell（表格单元显示）、vertical-align:middle
此方法优点：不用添加多余无意义标签
缺点：兼容性不好、破坏了原有块状元素性质
>如：
<div class="haha">
<p>11111</p>
<p>22222</p>
</div>
.haha{
height: 300px;
background: gold;
display:table-cell;
vertical-align: middle;
}
此时效果图：
4、隐性改变display类型
当html代码出现以下两句之一时，元素display显示类型就会自动变为块状元素display:inline-block，此时可以设置width和height
1）position:absolute
2）float:left或float:right```
