HTML学习之四CSS盒子
CSS盒子模型
Content, padding(内补丁), border; margin（外补丁）;
计算宽度，左右内外边界，左右内外边框，内容，左右内外边距。
如果上下左右四个参数，顺序：上右下左，依次写出padding: 0,0,0,0; 两个值：上下 左右；
三个值：上 左右 下。没有值的去对面找。
Padding-left, top, right, bottom.
使用外边距时注意浏览器兼容性。
除了值为0的情况，其他所有值后面都要是像素为单位，加px。
基本上所有网站，都把padding 和margin设为0. 因为各浏览器都设置了内外边距的不同默认值。所以为了兼容性，将所有内外边距都设为0. 或都从0开始。
所以用到哪些元素，就把那些元素的默认值归零。用到哪些HTML元素，就重置他们的边距。因为他们有自己默认的边距，要控制它，就重置。
CSS模型主要通过盒子模型实现。
内容：width, height
边框：margin, padding.
继承性，有的继承，有的不能继承。
列表，符号都存在兼容性问题，所以：ul, ol {list-style:none;}都设为无。
边框border属性：border-width ； border-style ； border-color。
如果只写border，那就直接跟着三个值。
单独控制一条边：border-top。顺序一样。
margin:100px auto; 左右水平居中。
文字垂直居中： height:50px;
line-height:50px;
CSS元素分类，块状，内联（行内）。
块状：改变：{display:block}。可以容纳内联元素和其他元素。但是排斥同一行内的其他元素。内敛元素中能容纳文本或者其他内联元素，但是宽高不起作用。
Display设置对象如何显示。
可以将某个元素从内联改为block。用display。都有默认值，有的是inline,有的是block。
背景：background:颜色 图片 平铺方式（重复） 固定方式 位置
图片默认：水平、垂直平铺。默认左上角显示。
background-color:gold;
background-image:url(../pic/bupt.jpg);
background-repeat:no-repeat; 不让它平铺。
background-position:right bottom; 设定位置。
background-position:50px 30px; 横坐标，纵坐标。
background-attachment:fixed;/scroll；背景图片是否随着背景滚动。依附方式。将图片固定在屏幕某个地方，而不是盒子某个地方。
Ie6只有HTML 和body支持这个属性。
图片的翻转效果：两张大小相同，内容不同，正常显示一张。鼠标经过显示另一张。
CSS精灵技巧，为了减少http请求。将两个颜色不同的内容一样的图片合为一张图片，调整其位置。
Div+css页面布局。
1. 默认。Html结构顺序。
2. 浮动属性：float:center；
3. 定位。屏幕某个位置。
#two {background:green;position:absolute；
top:50px; left: 150px;}
浮动：取消元素的霸道属性（独占一行！）后面的元素将视其不存在。只有两个：要么left要么right。
飘到父元素边界。
浮动的元素相当于消失了，原来霸占的地方就空了。后面的元素补充。存在浏览器兼容性。
浮动布局几个图片：飘起来啦！
#p1 {float:left; margin:30px;}
#p2 {float:left;margin:30px;}
#p3 {float:left;margin:30px;}
#p4 {float:left;margin:30px;}
有的兼容，有的不兼容，就可能挡住了，看不到了。
清楚浮动：虽然前面的没有了，但是后面的不要占据人家的位置，仍然在自己的地方。
不允许其哪个方向有浮动。Clear：none/left/right/both
clear:both;保证不随浏览器大小改变，浮动元素相对位置改变。
常见博客，网页等布局。
#head {background:red;height:100px; }
#left {background:green;float:right;width:400px;height:300px;float:left;clear:left;}
#right {background:blue;width:200px;height:200px; clear:left;float:right;}
#foot {background:gold;height:200px; clear:left;height:50px;clear:both;}
#header {margin:0 auto;}默认铺满。设定宽度后，则居中。
如果让同一行的两个盒子居中，那么在外面加一个大盒子，一定要有宽度，否则默认全屏幕。
同一行的浮动同方向。
清除浮动的方法：主要对后面元素的影响。但是对父元素也会有影响。
当父元素没有指定高度是，它的子元素有浮动，其父元素的高度不会增加。
1. 额外标签法。在最底下加一个空盒子（没有内容）。
2. Overflow：auto。根据子元素的需要增加宽度。Hidden:切除多余部分。Scroll显示滚动条。但是如果子元素出现定位，那就有问题了。
上述两种方法：等价表示：1.在大盒子最底下：
2.在大盒子定义中：overflow:hidden。
效果相同。
注意：想要使用绝对定位时，要有两个条件：
1. 必须给父元素加定位属性，position:relative。
2. 给子元素加绝对定位: position：absolute。
3. 利用伪对象，after。