旷世的忧伤

Huoty's Blog

CSS盒子模型

CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content)、内边距(padding)、边框(border) 和 外边距(margin) 的方式。在HTML文档中,每个元素(element)都有盒子模型,所以说在Web世界里(特别是页面布局),Box Model无处不在。下图是CSS盒子模型的示意图:

CSS2.0 盒子模型的层次3D示意图

图1 CSS2.0盒子模型的层次3D示意图

CSS 二维盒子模型示意图

图2 CSS 二维盒子模型示意图

元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。背景可以应用于由内容和内边距、边框组成的区域。

内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选择器对所有元素进行设置:

* {
  margin: 0;
  padding: 0;
}

提示: 在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。看一个例子:

假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为 70 像素,请看下图:

css boxmodel example

图3 CSS盒子模型示例

代码如下所示:

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

提示: 内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。外边距可以是负值,而且在很多情况下都要使用负值的外边距。

盒子模型各属性详解:

盒子模型详细图解

图4 盒子模型详细图解
  • border(边框): border-top,border-bottom, border-left,border-right

1、border-color(边框颜色);

2、border-width(边框粗细):medium thin thick 数值;
3、border-style(边框样式):none hidden(隐藏) dotted(虚线) dashed(点线) solid(实线) double(双实线) groove(IE不支持) ridge(IE不支持) inset(IE不支持) outset(IE不支持)。

4、边框简写属性格式:border: border-width border-style (required) border-color

  • padding(内边距): padding-top,padding-bottom ,padding-left,padding-rightborder

  • margin(外边距): margin-top,margin-bottom ,margin-left,margin-right

当 margin 设为负数时,会使被设为负数的块向相反的方向移动,甚至覆盖在另外的块上。当块之间是父子关系时,通过设置子块的margin参数为负数,可以将子块从父块中“分离”出来。

  • 盒子的浮动:
1、设置浮动:float:none left right
2、清除浮动:clear:none left right both
  • 属性值的简写形式说明:

1、如果给出2个属性值,前者表示上下的属性,后者表示左右的属性;

2、如果给出3个属性值,前者表示上的属性,中间的数值表示左右的属性,后者表示下的属性;

3、如果给出4个属性值,依次表示上、右、下、左的属性,即顺时针排序。

注:本文中所引用的图片均收集自网络,内容也整理自各大学习网站,如涉及侵权问题,请留言告知!

参考资料:

Top