CSS笔记-盒子模型
1. 盒子模型
css开发中,常常会提到一个词 叫做“盒子”,这里的盒子专业名词叫“盒子模型(Box Model)”,这一术语是从来设计和布局时使用的。通俗的讲,所有的HTML元素都可以看做是一个盒子;那么,将页面中所有的元素都设置成一个矩形的盒子后,对页面的布局就可以理解成把不同的盒子放到不同的位置上。
2. 盒子组成部分
css盒子模型从里到外的组成部分依次为:
- 内容区(content)
盒子的主要内容,即元素中所有的子元素和文本内容等都在内容中排列展示。内容大小由 宽度“width”和 高度“height”两属性控制。
- 内边距(padding)
内容区与边框之间的距离。一共有四个方向的内边距:
2.1 padding-left
2.2 padding-right
2.3 padding-top
2.4 padding-buttom)
- 边框(border)
围绕在内容区和内边距外的边框。这里需要注意的是,在较为精细的设计中,边框的大小也会影响盒子的大小。
- 外边距(margin)
围绕在元素边框外的空白区域。设置外边距不会影响盒子的大小,但是会影响盒子的实际占用空间。如内边距padding一样,它也有四个方向的外边距:
4.1 margin-left
4.2 margin-right
4.3 margin-top
4.4 margin-buttom
注:外边距margin 可以设置负值,即可往反方向移动。
3. 盒子的宽度和高度
通常情况下,盒子的可见宽度和高度,是由内容宽高、内边距大小、边框大小 三部分共同决定的。
以下面div的css样式为例:
div {
width: 300px;
height:300px;
border: 25px solid red;
padding: 25px;
margin: 25px; }
该 div 的宽度为 300(宽)+50(左右内边距padding)+50(左右边框border)+50(左右外边距margin)=450px。
由此可得出盒子宽高的计算规则为:
盒子总宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
盒子总高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
标签:盒子,笔记,边框,padding,宽度,内边,margin,CSS From: https://blog.51cto.com/u_16231760/7162384