CSS——盒子模型

时间：2021-03-25 17:03:40

一、盒子模型：

模型如下：

CSS——盒子模型

如图：盒子模型包括：margin、padding、border、content四部分。

margin：外边距，透明，能够显示父级的背景颜色等。表示元素与元素之间的间隔或者说是距离。

padding：内边距，显示当前元素本身的背景颜色。

border：边框。

content：显示内容的区域，对于CSS的width设置的宽度就是该区域的宽度。不过 IE 认为width是 border_left + border_right + paddiing_left + paddiing_right + content 。

对于一个元素来说其显示区域只是 border_left + border_right + paddiing_left + paddiing_right + content ，如下图的红色区域。对于margion只是表示元素之间的间隔。

CSS——盒子模型

http://blog.csdn.net/tomatozq/article/details/7178144

二、 box-sizing：

1、box-sizing的意义。

　　width表示的是 content 的宽度；由于很多时候还要设置 border 显示，这样导致宽度通常不好计算，导致显示效果不好甚至出现滚动条。box-sizing就是解决这个问题的。

　　2、box-sizing 的属性值：

  • content-box:默认值，即 width 表示的是 content 的宽度；
  • border-box：即块级元素的 width 包含 border的宽度，自然也就包含padding的宽度。即 width=content+padding-left+padding-right+ border-left-width +border-right-width;
  • inherit：从父元素继承。即父元素的 box-sizing 为何值，则该元素就为何值。
  • initial：与其他所有CSS 样式属性一样，表示默认值。此处则为content-box，但是IE不支持。

　　常用：

* {

        -webkit-box-sizing: border-box;

         -moz-box-sizing: border-box;

         box-sizing: border-box;

}

嗯

相关文章