05_CSS入门和高级技巧(3)
上节课复习
!important不能影响就近原则，远的标签若是加上!important也干不过近的标签！css
!important不能影响继承权重是0，经过继承的标签加上!important也干不过直接选中的标签！html
盒模型
网页中的全部标签都是盒子，都是矩形，都有width、height、padding、border、margin属性的。
最重要的一个知识点，就是width和真实宽度的关系。浏览器
1.会看懂盒模型图
div{
width: 200px;
background-color: greenyellow;
padding: 20px;
border:30px solid red;
}
也就说，padding、border都是外扩的。ui
2.padding内边距
padding就是内边距，指的是边框内侧到内容的距离。
padding的设置有不少方法
padding:50px;设置四个方向的padding都是50px;spa
四个值：
padding:10px 20px 30px 40px;等价于单独设置了上、右、下、左的padding分别分十、20、30、40等价于3d
padding-top:10px; padding-right:20px; padding-bottom:30px; padding-left:40px;
三个值：
padding:10px 20px 30px;
等价于code
padding-top:10px; padding-right:20px; padding-bottom:30px; padding-left:20px; /*左边的值没有指定，因此和右边相同*/
两个值：
padding:10px 20px;
等价于xml
padding-top:10px; padding-right:20px; padding-bottom:10px; padding-left:20px;
注意，一些元素默认带有padding：好比ul等等，
为了防止这些默认的padding、margin影响咱们制做页面，咱们要在页面开头书写：htm
<style type="text/css">
*{
padding:0;
margin:0;
}
</style>
就能把全部标签的默认的padding、margin都去掉。
固然这么写有效率问题，别担忧，项目课将告诉你最正确的清除默认padding、margin的方法。blog
3.border边框
边框有三要素：粗细、线型、颜色。
border:1px solid red;
px就是边框的宽度， solid就是边框的线型 ， red就是边框的颜色。
线型：
工做中只许使用solid(实线)和dashed(虚线)，其余的全部的线型都有兼容性问题，若是想制做其余类型的边框，必须切图！
兼容性问题，IE浏览器中和Chrome浏览器中的边框，明显长得不同。
注意，三要素分别对应了三个小属性：
border:10px solid red;
等价于
border-width:10px; border-style:solid; border-color:red;
咱们称呼border为“复合属性”。
特别的，若是咱们想为某一个边，单独设置三要素，那么能够拆分为12个小属性：
border:10px solid red;
等价于：
border-top-width:10px; border-top-style:solid; border-top-color:red; border-right-width:10px; border-right-style:solid; border-right-color:red; border-bottom-width:10px; border-bottom-style:solid; border-bottom-color:red; border-left-width: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-width: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{
width: 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。
咱们下节课将详细研究浮动，记住一个结论：浮动的元素不能撑高父亲了。