一、框模型

简介：模型定义了以下属性之间的关系：display/width/height/padding/border/margin/background/overflow/visibility

Width、height：设置元素内框的宽度和高度

Padding:内框外围的内边距尺寸

Border；内边距外围边框的宽度

Background:为框内内边距区域设置背景颜色或图片

Overflow:当元素内容大于内部框时的显示方式；visibility:显示或隐藏元素

Dispaly:      改变一个元素在浏览器中的渲染方式

Display : none  inline  block   list-item   inline-block

None:隐藏元素；list-item：渲染为一个带行内项目符号的块级元素，

使用list-style-type指定项目符号；inline-block：将行内元素渲染为嵌套在行内元素中 的块级元素。

 

1、         行内元素的框模式:width height 和overflow对行内元素不起作用，margin的上下外边距被自动忽略，使用line-height设置行高；border上下边框不会扩大行高或改变元素的垂直位置，边框不影响行高，左右边框改变行内元素在流中的位置，且只能显示在元素的开头和结尾。

2、         行内块级框：在行内流中与行内框相似，但具有与块级框相似的外边距、边框、内边距、宽度、高度。

3、         块级框：overflow可以控制浏览器处理溢出的显示方式；可以设置外边距、边框、内边距、宽度、高度。

4、         表格框：表格有外边距无内边距，单元格有内边距无外边距；width  height设置表格宽高度，指的是框外部的宽高度；border会减小表格内部框的尺寸；只有表格的单元格会溢出，单元格的overflow应设置为hidden  ;border-collapse决定是否合并相邻的边框；table-layout:根据表格内容决定表格是设置为固定尺寸还是自适应尺寸。

5、         绝对框  :  绝对元素会被从正常流中删除，它的位置相对于最近的已定位祖先元素或窗口的固定位置，它的位置不会影响其他框的位置，可以随意重叠；

z-index 控制确定位置的元素叠放顺序；left  right  top  bottom  适用于绝对框。

 

6、浮动框： float:left  或float:right   可以使任意元素变成浮动元素。浮动元素的位置、尺寸、内边距、边框、外边距都会影响相邻的浮动元素和相邻的行内内容；浮动元素相邻的外边距不会合并。