HTML5 第二课

盒子模型宽度和高度

• 盒子模型内容的宽高
• 盒子模型元素的宽高
• 盒子模型元素空间的宽高

盒子模型内边距和外边距

• 盒子模型内边距（padding）：内边距会撑大元素的宽高，边框也是，想要元素的宽高不变需要使用css3样式box-sizing，内边距一般以左边为准
• 盒子模型外边距（margin）：两个盒子上下外边距有合并现象，嵌套盒子里面的盒子经历别用margin,会把外盒子一起顶下来，想不被顶要加上边框属性或者overflow:hidden，margin是兄弟盒子直接控制间隙用，嵌套里面尽量用内边距，

盒子居中和文字图片水平居中

• text-align:对文字和图片居中设置
• margin:0 auto :让盒子自己水平居中，无法上下居中

行高

• line-height:行高，默认文字是在他的行高中垂直居中，在开发中盒子的高和行高一致，即可达到文字在盒子中垂直居中的效果。有行高时，上下内边距计算需考虑行高！

网页布局

• 标准流（文档流、普通流）排版：浏览器默认排版方式，css中将元素分为块级，行内，行内块级三种元素。垂直排版和水平排版
• 浮动流排版：先处理标准流，再处理定位流。增加float属性，元素将半脱离标准流，按浮动流排版，相对父元素进行水平排版，有且只有一种水平排版方式，且没有center取值，margin:0 auto居中对齐方式也失效，不区分行内，块级，行内块级元素，都可以设置宽高。
• 相同方向上的浮动，先浮动的元素显示在前面，后浮动的显示在后面
• 不同方向的浮动，左浮动找左浮动，右浮动找右浮动 
• 顶部对齐，两个元素都浮动！
• 浮动元素，浮动之后的位置，是由元素浮动前在标准流的位置来确定的！原先在第几行，浮动后也是第几行！
• 贴靠现象：当父元素宽度不够时，最后一个浮动元素会自动往原来贴靠元素的前一个元素贴，当最终都不够时，最后会贴着父元素！
• 浮动元素自围现象：文字会让开浮动元素！
• 浮动元素不会撑起父元素的高度
• 实际开发中，复杂布局分析，先划分左右，再对左边或右边进一步布局，由外向内分析！
• 清除浮动的方式：1.给前面一个父元素设置高度，但是不建议使用，因为实际开发中不建议设置高度。2. clear属性：告诉当前盒子里的浮动元素不要找前面盒子的浮动元素，但是当前元素margin属性会失效！3.隔墙法：外墙法，两个盒子之间的间隙用墙来设置。内墙法的margin元素不会被影响，还能撑起盒子的高度。也不建议使用，无用代码！4.css3伪元素选择器：给指定标签的内容前面后后面添加子元素,*zoom兼容IE6。5.overflow:hidden,同样需要兼容ie6
• 定位流：先处理标准流，再处理定位流.
• 相对定位：不会脱离标准流，仍然在标准流中占用空间，区分块级、行内、行内块级元素。相对自己以前在标准流的位置移动，同一个方向的定位属性中，只能用一个！
• 绝对定位：脱离标准流，不区分行内，块级，行内块级元素，都可以设置宽高。
• 默认情况下相对body来定位！
• 如果绝对定位元素的祖先元素也是定位流（静态定位除外），那么这个绝对定位元素就以离他最近的那个祖先元素作为参考点！
• 居中：left:50%;margin-left:元素宽度的一半；
• 子绝父相：常用定位方式
• 固定定位：效果和背景图关联属性fixed类似，不随着滚动条的滚动而滚动，脱离标准流，
• 静态定位：默认用法，跟没有定位一样！