一、盒子模型(Box Model)
盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。
- 盒子模型有元素的内容(content)、边框(border)、内边距(padding)、外边距(margin)组成。
- 盒子里面的文字和图片等元素是内容区域
- 盒子的厚度称为盒子的边框
- 盒子内容与边框的距离是内边距(类似单元格的 cellpadding)
- 盒子与盒子之间的距离是外边距(类似单元格的 cellspacing)
1. border 盒子边框
/* 语法 border : border-width border-style border-color */
/* 边框简写 */
border: 1px solid red;
/* 边框分开写 */
border-top: 5px solid cyan;
border-right: 2px solid green;
border-bottom: 1px dashed red;
border-left: 6px dotted yellow;
属性 | 作用 |
---|---|
border-width | 定义边框粗细,单位是px |
border-style | 边框的样式: none 默认 无边框; solid单实线; dashed虚线; dotted点线; double双实线 |
border-color | 边框颜色 |
2. padding 内边距
padding属性用于设置内边距。 是指边框与内容之间的距离。
属性 | 作用 |
---|---|
padding-left | 左内边距 |
padding-right | 右内边距 |
padding-top | 上内边距 |
padding-bottom | 下内边距 |
当给盒子指定了padding值之后, 发生了2件事情:
- 内容和边框 有了距离,添加了内边距。
- 盒子会变大了。
- 内边距简写:
值的个数 | 表达意思 |
---|---|
1个值 | padding:上下左右内边距; |
2个值 | padding:上下内边距 左右内边距 ; |
3个值 | padding:上内边距 左右内边距 下内边距; |
4个值 | padding:上内边距 右内边距 下内边距 左内边距 ; |
1)内盒尺寸计算(元素实际大小)
-
宽度
Element Height = content height + padding + border (Height为内容高度)
-
高度
Element Width = content width + padding + border (Width为内容宽度)
-
盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框
div {
/* 以下设置盒子的内核尺寸-- 宽/高:100+2+20=122px */
width: 100px;
height: 100px;
border: 1px solid black;
padding: 10px;
background-color: pink;
}
2)内边距产生的问题
-
会撑大原来的盒子
-
解决:通过给设置了宽高的盒子,减去相应的内边距的值,维持盒子原有的大小
div {
/* 若要维持设置的盒子宽高为100px的大小,则应设置宽/高为100-2-20=78px */
width: 78px;
height: 78px;
border: 1px solid black;
padding: 10px;
background-color: pink;
}
3. margin 外边距
margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离。
属性 | 作用 |
---|---|
margin-left | 左外边距 |
margin-right | 右外边距 |
margin-top | 上外边距 |
margin-bottom | 下外边距 |
margin值的简写 (复合写法)代表意思 跟 padding 完全相同。
1)块级盒子水平居中
让一个块级盒子实现水平居中必须:
- 盒子必须指定了宽度(width)
- 然后就给左右的外边距都设置为auto
实际工作中常用这种方式进行网页布局,示例代码如下:
.main {
width: 960px;
/* 让盒子在页面中水平居中 */
margin: 0 auto;
/* 让盒子内的文字在盒子里水平居中 */
text-align: center;
background-color: pink;
}
注意:
- 盒子内的文字水平居中是 text-align: center, 而且还可以让 行内元素和行内块居中对齐
- 块级盒子水平居中是 左右margin 改为 auto
2)外边距合并(塌陷)
① 相邻块元素垂直外边距的合并(塌陷)
- 当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom
- 下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和
- 取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。
解决方案:尽量给只给一个盒子添加margin值
② 嵌套块元素垂直外边距的合并(塌陷)
- 对于两个嵌套关系的块元素,如果父元素没有上内边距及边框
- 父元素的上外边距会与子元素的上外边距发生合并
- 合并后的外边距为两者中的较大者
解决方案:
- 可以为父元素定义上边框。
- 可以为父元素定义上内边距
- 可以为父元素添加overflow:hidden。
还有其他方法:比如浮动、固定、绝对定位的盒子不会有塌陷问题
4. 清除元素的默认内外边距
HTML较多元素默认有自己的内外边距,为了更灵活方便地控制网页中的元素,制作网页时通常需要将元素的默认内外边距清除
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
5. box-sizing 盒子大小
b