一、盒模型概述:
通过对日常生活中的盒子和网页中单个模块内部结构的分析,我们发现它们的结构是非常类似的,由外到内分别是:外边距、边框、内边距、内容。是用来布局网页的重要容器。 网页布局中的盒模型运用是非常广泛的,所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间。
边框(border)、内边距(padding)、外边距(margin)、宽度(width)、高度(height)等。
*width、height(可设固定值或百分比,如果设百分比则是占据父级容器的百分比)
*margin:margin-top/margin-bottom/margin-left/margin-right(可设负值)
*padding:padding-top/padding-bottom/padding-left/margin-right
*border:border-top/border-bottom/border-left/border-right
四、盒模型的简写形式:
按照规定的顺序,给出2个、3个或者4个属性值,它们的含义将有所区别,具体含义如下:
*如果给出2个属性值,前者表示上下边框的属性,后者表示左右边框的属性;
*如果给出3个属性值,前者表示上边框的属性,中间的数值表示左右边框的属性,后者表示下边框的属性;
*如果给出4个属性值,依次表示上、右、下、左边框的属性,即顺时针排序。
五、盒模型的其他相关属性:
*溢出:
overflow:hidden、visible、auto、scroll
*可见性:
visibility: visible、hidden
*呈现:
display:none、inline、block、list-item、table-cell等
通过对日常生活中的盒子和网页中单个模块内部结构的分析,我们发现它们的结构是非常类似的,由外到内分别是:外边距、边框、内边距、内容。是用来布局网页的重要容器。 网页布局中的盒模型运用是非常广泛的,所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间。
二、盒模型基本结构:
边框(border)、内边距(padding)、外边距(margin)、宽度(width)、高度(height)等。
*width、height(可设固定值或百分比,如果设百分比则是占据父级容器的百分比)
*margin:margin-top/margin-bottom/margin-left/margin-right(可设负值)
*padding:padding-top/padding-bottom/padding-left/margin-right
*border:border-top/border-bottom/border-left/border-right
四、盒模型的简写形式:
按照规定的顺序,给出2个、3个或者4个属性值,它们的含义将有所区别,具体含义如下:
*如果给出2个属性值,前者表示上下边框的属性,后者表示左右边框的属性;
*如果给出3个属性值,前者表示上边框的属性,中间的数值表示左右边框的属性,后者表示下边框的属性;
*如果给出4个属性值,依次表示上、右、下、左边框的属性,即顺时针排序。
五、盒模型的其他相关属性:
*溢出:
overflow:hidden、visible、auto、scroll
*可见性:
visibility: visible、hidden
*呈现:
display:none、inline、block、list-item、table-cell等
Display:none与visibility: hidden的区别
使用 visibility:hidden属性会使对象不可见,但该对象在网页所占的空间没有改变(看不见但摸得到),等于留出了一块空白区域,而 display:none属性会使这个对象彻底消失(看不见也摸不到)。