上节课复习
!important不能影响就近原则，远的标签如果加上!important也干不过近的标签！
!important不能影响继承权重是0，通过继承的标签加上!important也干不过直接选中的标签！
盒模型
网页中的所有标签都是盒子，都是矩形，都有width、height、padding、border、margin属性的。
最重要的一个知识点，就是width和真实宽度的关系。
1.会看懂盒模型图
div{
200px;
background-color: greenyellow;
padding: 20px;
border:30px solid red;
}
也就说，padding、border都是外扩的。
2.padding内边距
padding就是内边距，指的是边框内侧到内容的距离。
padding的设置有很多方法
padding:50px;设置四个方向的padding都是50px;
四个值：
padding:10px 20px 30px 40px;等价于单独设置了上、右、下、左的padding分别分10、20、30、40等价于
padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:40px;
三个值：
padding:10px 20px 30px;
等价于
padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:20px; /*左边的值没有指定，所以和右边相同*/
两个值：
padding:10px 20px;
等价于
padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;
注意，一些元素默认带有padding：比如ul等等，
为了防止这些默认的padding、margin影响我们制作页面，我们要在页面开头书写：
<style type="text/css">
*{
padding:0;
margin:0;
}
</style>
就能把所有标签的默认的padding、margin都去掉。
当然这么写有效率问题，别担心，项目课将告诉你最正确的清除默认padding、margin的方法。
3.border边框
边框有三要素：粗细、线型、颜色。
border:1px solid red;
px就是边框的宽度， solid就是边框的线型 ， red就是边框的颜色。
线型：
工作中只许使用solid(实线)和dashed(虚线)，其他的所有的线型都有兼容性问题，如果想制作其他类型的边框，必须切图！
兼容性问题，IE浏览器中和Chrome浏览器中的边框，明显长得不一样。
注意，三要素分别对应了三个小属性：
border:10px solid red;
等价于
border-10px;
border-style:solid;
border-color:red;
我们称呼border为“复合属性”。
特别的，如果我们想为某一个边，单独设置三要素，那么可以拆分为12个小属性：
border:10px solid red;
等价于：
border-top-10px;
border-top-style:solid;
border-top-color:red;
border-right-10px;
border-right-style:solid;
border-right-color:red;
border-bottom-10px;
border-bottom-style:solid;
border-bottom-color:red;
border-left-10px;
border-left-style:solid;
border-left-color:red;
更特别的，boder-color是可以按照上右下左的顺序书写：
border-color:red yellow green;
上边是红色， 左边、右边是黄色， 下边是绿色。
小练习1：
border:10px solid black;
border-left-color:red;
小练习2：
border:10px solid black;
border-color:black red;
小练习3：
border:10px solid red;
border-20px 10px;
border-color:black red blue green;
如果某一个边框我们不想要，那么就写none
border-bottom:none;
下边框就没有了。
4.margin外边距
自己这个盒子的边框外侧， 到其他盒子边框外侧的距离
margin有四个方向，分别是 margin-top、margin-right、margin-bottom、margin-left。
塌陷现象：
去掉ul的小圆点，要给ul加
ul{
list-style:none;
}
居中策略
1.文字水平居中
如果想让盒子中的文字水平居中，那么要给盒子设置
text-align:center;
这个属性继承。
它还有两个可能的值：
text-align:left;
text-align:right;
这个方法，只能居中文本流的东西(文字、图片、表单元素)。一定要记住，这个属性要设置给盒子，不能设置给这些文字、图片、表单元素。
2.盒子水平居中
让盒子设置：margin:0 auto;
margin: 0 auto; 是给盒子用的，要加给盒子自己。它将在自己的父元素内部居中。
3.单行文本的垂直居中
line-height:盒子的高度;
行高=盒子高， 此时单行文本就将在盒子中居中。注意，这个方法只能适用于单行文本，多行不适用。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
p{
400px;
background-color: yellow;
border: 1px solid #ABCDEF;
line-height: 60px;
text-align: center;
height: 60px;
}
</style>
</head>
<body>
<p class="tip">点击查看更多</p>
</body>
</html>
标准文档流
1.什么是标准文档流
我们发现，Fireworks作图，可以在任何一个地方落笔；word这个软件则不一样，有一个“光标”位置，你必须在当前光标位置去书写文字。
第二行文字的位置，仰赖于第一行文字，比如第一行文字多，第二行文字就下移了；比如第一行文字大，第二行文字又下移了。
网页也是这样，从左至右、从上到下，有一个“光标”的概念。 标准文档流中，内置了很多性质。
2.标准文档流有什么性质
1.空白折叠现象
标签内的文字，不管有多少个空格、换行、tab，都会缩减为同一个空格。
2.高矮不齐，底边对齐
最最重要的性质来了，就是标准文档流中，把元素分为“块级元素”和“行内级元素”两种。
3.块级元素和行内级元素
块级元素是能单独在一行的，行内元素是不能单独在一行的。
我们把HTML标签分为两大类：
- 块级元素(block level)：div、h系列、p、ul、li、dl、dt、dd
- 行内级元素(inline level)：span、a、b、u、i、em、strong
块级元素：
- 能够设置宽度、高度；
- 不能并排；
- 不设置宽度，那么宽度将默认变为父亲的width
行内级元素：
- 不能设置宽度、高度；(但是可以设置行高)
- 可以并排；
4.行内元素和块级元素可以自由转换
给任何一个元素，设置
display:block;
它将转为块级元素，拥有块级元素的所有性质；
相仿的，给任何一个元素，设置
display:inline;
它将转为行内元素，拥有行内元素的所有性质；
有什么用？
把一个块 → 行内 丝毫无用，工作10年都遇不见。
但是行内 → 块 非常有用！
我们发现标准文档流是做不出网页的，因为它太迂腐：能设置宽高的不能并排，能并排的不能设置宽高。
所以脱离标准流！ 脱离标准流一共有三种方法：浮动、绝对定位、相对定位。
浮动
浮动的理论知识挺多的，头头是道。但是我们为了考虑吸收，我们今天忽视科学性，就看一些皮毛的“浮动”。下次课我们深入研究浮动。
今天只用，不研究。
1.浮动 —— 做并排用的
float就是英语“浮”的意思，left就是左浮动。要浮动就是两个都要浮动的。
float:left;
right右浮动。
float:right;
浮动的元素会去贴父盒子的边，贴边的过程中，如果被它的哥哥们挡住了，就会贴在哥哥的边上。
如果要保证儿子的并排，父亲要有足够的width。
我们下节课将详细研究浮动，记住一个结论：浮动的元素不能撑高父亲了。