肉渣教程

CSS Box模式

上一节 下一节

CSS Box模式

一生二,二生三,三生万物。所有的HTML元素都可以看做是一个承载内容的盒子。而CSS中的所谓的“Box模式(Box Modal)”则是在本元层面上设置HTML元素的设计与布局。

如下所示,如果用Box的视角去看一个HTML元素,则包括四部分,margins(外边距)borders(边框)padding(内边距)content(实际内容)

Margin(外边距)
Border(边框)
Padding(内边距)
Content(实际内容)



对上述不同的部分的详解:

  • Content - 内容部分,也就是内容、图片的显示的区域
  • Padding - 内边距也就是内容部分周围的一圈空白间距(该区域透明)
  • Border - 边框部分在内容部分、内边距部分之外
  • Margin - 边框周围透明空白部分(该区域透明)

案例如下所示:

div {
    background-color: #eef8f8;
    width: 300px;
    border: 25px solid #46acb6;
    padding: 25px;
    margin: 25px;
}

运行一下

HTML元素的宽度和高度

HTML元素的宽度和高度特指该元素content内容部分、padding内边距部分和border边框部分合在一起的宽度和高度,不包括元素的外边距部分。

重要提示默认情况下在CSS中设置的width和height属性都只是设置了内容部分的宽度和高度,所以要计算元素的整体尺寸,则要再继续加上padding内边距、border边框粗细。如果想直接在CSS中设置元素的整体宽度和高度,把box-sizing属性设置为border-box即可。

div {
    width: 320px;
    padding: 10px;
    border: 5px solid #46acb6;
    margin: 1px;
}

运行一下

计算方式如下所示:

320px(width)
+ 20px(left + right padding)
+ 10px (left + right border)
= 350px

如上例所示,box的总宽度的计算方式则如下:
元素总宽度 = 左边框宽度 + 左内边距宽度 + width(内容部分宽度)+ 右内边距宽度 + 右边框宽度

总高度的计算方式如下:
元素总高度 = 上边框宽度 + 上内边距宽度 + height(内容部分高度)+ 下内边距宽度 + 下边框宽度


很多教程中计算元素高度和宽度时把外边距也算在内,那是错误的而不是争论;不过不论这个问题是对错还是争论,不必深究,当这个问题影响实际操作时,自己动手试试就ok啦!


CSS Box模式

上一节 下一节