一、盒模型

盒模型定义了display、width、height、padding、border、margin、background、overflow、visibility这些属性之间的关系。

  • display

使用display属性可以改变浏览器对元素的解析方式。例:

//阻止对元素的解析
SELECTOR{
	display: none;	
}
//当作内联元素解析
SELECTOR{
	display: inline;	
}
//当作内联块状元素解析
SELECTOR{
	display: inline-block;	
}
//当作块状元素解析
SELECTOR{
	display: block;
}
//当作列表项解析
SELECTOR{
	display: list-item;	
}
当把元素作为列表项时,它的父元素必须是块状元素,还需要为项目标识符设置左内边距和左外边距。
  • width

设置内盒(Inner Box)的宽度,默认值为auto

  • height

设置内盒(Inner Box)的高度,默认值为auto

widthheight值为auto时,浏览器会从外往里计算被拉伸元素的宽和高:用父元素内盒的值减去被拉伸元素的外边距、边框和内边距得到它的内盒尺寸;与之相反,对定义了尺寸和被包裹的元素而言,是从里往外计算的。
  • border

设置围绕在内边距(Padding)外的边框,包括:大小、颜色和样式。

border的默认值为none,它不能被设置为负值。

静态块状元素之间的边框是不会被抵消的,内联元素的上下边框会与邻近行相互重叠,除非增大行高为它们腾出足够的空间;内联元素的左右边框只在元素的首尾可见,中间内容的右侧边框和左侧边框是不显示的。

  • padding

设置围绕在内盒(Inner Box)外的边距,内边距相对元素背景是透明的(视觉上与元素的背景相同)。

padding的默认值是0,它也不能设置为负值。它和边框一样,内联元素的上下内边距会覆盖邻近行,除非增大行高为它们腾出足够的空间。

  • margin

设置围绕在边框(Border)外的边距,外边距相对父元素背景也是透明的(视觉上与父元素背景相同)。

外边距可以为正值也可以为负值,负值会造成元素的重叠;浏览器会抵消邻近块状元素的上下外边距。

margin的默认值为0,它还可以设置为百分比,如果设置为百分比,则是相对它块状容器的尺寸。margin可应用于大多数元素,但它对表格内部元素不起作用,垂直外边距对内联元素不起作用。

  • background

设置边框(Border)以内区域的背景颜色及图片等。它可由background-colorbackground-imagebackground-repeatbackground-positionbackground-attachment属性合成;每个属性值是不分前后顺序的,各个属性值之间用空格分隔,例:background:none transparent repeat left top scroll

background-attachment:设置背景图是否随滚动条滚动。// background-position:设置图片的横竖坐标,第一个值为水平坐标,第二个值为竖直坐标;如果设置为百分比,则会把图片定位在整个元素的宽和高的相对位置上(left:width * x%、top:height * y%)。

当为元素设置了background-image时,都应该同时定义一个background-color和相反的color,这样可以保证在图片载入失败时确保文本是清晰可见的。

  • overflow

设置当元素内容大于内盒时的处理方式,默认是显示溢出的内容(visible)。

此属性只有当块状元素的尺寸小于它的内容时,才是必需的。

  • visibility

设置元素是可见的(visible)还是隐藏(hidden)的。

该属性会隐藏元素但又不影响其他元素在排列中的位置;display: none正好与之相反,它是把元素从所有排列中移除。由于绝对定位元素不在排列队伍中,因此这些元素使用visibility:hiddendisplay:none效果一样。

SELECTOR{
	display: CONSTANT;
	overflow: CONSTANT;
	visibility: CONSTANT;
	width: +VALUE;
	height: +VALUE;
	padding: +VALUE;
	border: +WIDTH STYLE COLOR;
	margin: ±VALUE;
	background: VALUES;
}

二、内联盒模型

内联盒模型是按内联元素的排列顺序进行解析的,它们按水平从左到右的顺序进行排列(内联格式化环境);当宽度超过它们最近的终端块状祖先的宽度时,会换到新的一行。

widthheightoverflow对内联元素不起作用,因为它们总是与内容的宽高一致,但内联元素可以用line-height设置的高度。

margin-topmargin-bottom对内联元素也不起作用。

SELECTOR{
	display: inline;
	visibility: CONSTANT;
	line-height: +VALUE;
	margin: ±VALUE;/*只有margin-left、margin-right的值有效*/
	padding: VALUE;
	border: +WIDTH STYLE COLOR;
	background: VALUES;
}

三、内联块状盒模型

内联块状元素也是按内联排列顺序水平从左到右排列的,与其他内联元素相比,可以通过widthheight设置元素的宽高;如果设置widthheightauto,那么会把内联块状元素包裹住;如果设置width100%,那么它和块状元素是一样的。

margin中的所有属性和overflow对内联块状元素都起作用。

SELECTOR{
	display: inline-block;
	visibility: CONSTANT;
	line-height: +VALUE;
	margin: ±VALUE;
	padding: VALUE;
	border: +WIDTH STYLE COLOR;
	background: VALUES;
	width: +VALUE;
	height: +VALUE;
	overflow: VALUE;
}

四、块状盒模型

在块状格式化环境下,块状盒模型是按竖直方向从上到下排列的。

块状元素的宽高可以与它父元素一致、小于父元素宽高或大于父元素宽高。当它的尺寸大于父元素时就会出现溢出。此时可以使用overflow属性处理溢出。

  • widthheight

width的默认值是auto,使元素的宽度与父元素一致;height的默认值也是auto,使元素的高度包裹住它的所有子元素;但无法水平包裹一个块状元素。

  • margin

    margin-topmargin-bottom:浏览器会抵消相邻块状元素的顶部和底部外边距。
    margin-leftmargin-right:控制已设置了固定尺寸的块状元素的水平排列。

如果为某个块状元素设置了widthmargin-right:auto;会让该元素排列在其父元素的左侧;margin-left:auto;会让该元素排列在其父元素的右侧;如果margin-leftmargin-right都设置为auto,那么块状元素将位于其父元素的中间。

  • borderpadding

borderpadding会扩展盒模型的外宽和外高,但如果设置了固定尺寸,它们会调整内盒。

SELECTOR{
	display: block;
	visibility: CONSTANT;
	margin: ±VALUE;
	padding: VALUE;
	border: +WIDTH STYLE COLOR;
	background: VALUES;
	width: +VALUE;
	height: +VALUE;
	overflow: VALUE;
}

五、表格盒模型

表格是一个含有很多单元格的块状盒模型,也位于块状元素的排列中,表格中的单元格按行和列来排列;表格中的单元格没有外边距,表格的border-collapse属性为collapse时表格内边距无效。

  • widthheight

设置表格的宽度和高度,但表格的widthheight是指边框外围(Outer Box里面)的宽度/高度

  • overflow

不能把overflow应用于表格,因为表格是不能溢出的,只有表格的单元格能溢出。应该给单元格设置overflow:hidden;,以确保固定尺寸的单元格溢出时,在所有浏览器中的显示是一致的。

  • border-collapse

设置邻近的边框是否合并

  • table-layout

设置表格是固定大小(fixed)还是随内容而变动(auto)

SELECTOR{
	display: table;
	visibility: CONSTANT;
	margin: ±VALUE;
	padding: VALUE;/*某些情况下无效*/
	border: +WIDTH STYLE COLOR;
	background: VALUES;
	width: +VALUE;
	height: +VALUE;
	border-collapse: CONSTANT;
	table-layout: CONSTANT;
}

六、绝对定位盒模型

绝对定位元素从正常元素的排列顺序中脱离了,它是相对于最近的定位祖先来定位或固定于视窗的某个位置,它不会影响其他盒模型的位置;任何元素都可以绝对定位。

  • z-index

控制定位元素的叠放顺序

  • left right top bottomwidth height

可以用leftrighttopbottom来定位元素,它们的默认值为auto;如果不设置这些属性,绝对盒模型的位置和它在排列顺序中的位置一致。

如果widthautoleftright也为auto时,盒模型是被包裹的;
如果widthautoleftright是0或其他固定值时,盒模型会被拉伸;
如果width为固定值,leftright其中之一是auto时,盒模型会向另一侧偏离。

heighttopbottom的关系和widthleftright的关系类似。
height:autotopbottom为固定值时,绝对定位盒模型被拉伸,这是竖直拉伸盒模型的最好方法。

  • border padding

borderpadding会缩小已位伸的绝对定位盒模型的内盒;
borderpadding会扩展固定尺寸的绝对定位盒模型的外盒,并将其移向容器的中心。

SELECTOR{
	position: ABSOLUTE_OR_FIXED;
	z-index: +VALUE;
	left: ±VALUE;
	right: ±VALUE;
	top: ±VALUE;
	bottom: ±VALUE;
	overflow: CONSTANT;
	visibility: CONSTANT;
	margin: ±VALUE;
	padding: VALUE;
	border: +WIDTH STYLE COLOR;
	background: VALUES;
	width: +VALUE;
	height: +VALUE;
}

七、浮动盒模型

给任何元素设置float属性会让该元素浮动起来,浮动元素也脱离了正常的元素排列,被置于邻近块状元素的边框和背景之上。这会缩小浮动元素的父元素,当所有子元素都浮动时,父元素便在视觉上消失了。

浮动元素脱离了原来的排列队伍,它会使排列中邻近的内容朝某个方向缩进。左浮动会让邻近的内容向右缩进,右浮动会让邻近的内容向左缩进。

浮动元素是在原来的位置上垂直定位的,它在父元素的内边距里是从左或从右水平定位的。如果浮动元素不能紧邻它的上一个浮动元素,那么它会挪动到下方。

浮动元素的精确位置是不能事先定义的;浮动元素的外边距是不会相互抵消的。

  • width height

widthauto时,浮动元素的宽度和该元素中最长行的宽度一致;
heightauto时,浮动元素的高度和其子元素的高度一致。

  • border padding

borderpadding增大了浮动元素的外盒尺寸。

SELECTOR{
	float: LEFT_OR_RIGHT;
	overflow: CONSTANT;
	visibility: CONSTANT;
	margin: ±VALUE;
	padding: VALUE;
	border: +WIDTH STYLE COLOR;
	background: VALUES;
	width: +VALUE;
	height: +VALUE;
	z-index: +VALUE;
}
参考资料
  • 精通CSS与HTML设计模式