盒子模型
# 1 盒子分类
每个元素都有默认的显示方式, 包括
- 块盒: 独占一行, 可以设置宽高
- 行盒: 不独占一行, 高度由字体大小撑开
显示方式都是由display属性控制的
display常见的值:
- block: 块盒
- inline: 行盒
- inline-block: 行内块
# 重要结论
块盒(div)可以设置宽高
行盒(span)设置宽高不生效, 由内容决定
行内块(img)可以设置宽高, 又跟其它元素在同一行显示
# 2 盒子模型
# 1) 网页的布局
网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？
网页布局
- 首先利用CSS设置好盒子的大小，然后摆放盒子的位置
- 最后把网页元素比如文字图片等等，放入盒子里面
因此, 我们需要先了解如何摆放盒子
# 2) 盒子模型
现实中的盒子有
- 边框(厚度): border
- 填充泡沫: padding
- 内容: content
盒子与盒子之间的距离就是外边距
代码中的盒子模型, 打开浏览器, 通过调试窗口, 可以看到
示例
div {
width: 100px;
height: 100px;
border: 1px solid;
margin: 10px;
padding: 10px;
}
2
3
4
5
6
7
# 3) 边框border
语法
border : border-width || border-style || border-color
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式 |
| border-color | 边框颜色 |
边框的样式包括:
- none：没有边框即忽略所有边框的宽度（默认值）
- solid：边框为单实线(最为常用的)
- dashed：边框为虚线
- dotted：边框为点线
示例
div {
border: 1px solid red;
}
2
3
圆角边框
在新的设计语言里, 圆角边框也是非常常见的表现形式, 在CSS3中新增了border-radius
比如:
示例
p {
width: 80px;
height: 30px;
background-color: red;
font-size: 16px;
color: #fff;
text-align: center;
line-height: 30px;
border-radius: 15px;
}
2
3
4
5
6
7
8
9
10
通过调整border-radius的值改变弧度, 当值为height的一半时, 就是表现为一个半圆形
也可以通过border-radius: 50%画一个圆
div {
width: 200px;
height: 200px;
background-color: skyblue;
border-radius: 50%;
}
2
3
4
5
6
# 4) 内边距padding
内边距也叫内填充, 是内容和边框border之间的距离
| 属性 | 作用 |
|---|---|
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
简写
按顺时针的方向: 上右下左
示例
div {
/* 上:10px 右:20px 下:10px 左:20px */
padding: 10px 20px 10px 20px;
}
2
3
4
一般, 写两个值的情况比较常见
分别表示: 上下和左右
示例
div {
/* 上:10px 右:20px 下:10px 左:20px */
padding: 10px 20px;
}
2
3
4
实战案例
新浪导航栏的核心就是因为里面的字数不一样多，所以我们不方便给具体的宽度
这个时候, 我们就可以通过设置padding的方式撑开盒子
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新浪导航栏案例</title>
<style>
/*清除元素默认的内外边距*/
* {
margin: 0;
padding: 0;
}
.nav {
height: 41px;
background-color: #FCFCFC;
/*上边框*/
border-top: 3px solid #FF8500;
/*下边框*/
border-bottom: 1px solid #EDEEF0;
}
.nav a {
/*转换为行内块*/
display: inline-block;
height: 41px;
line-height: 41px;
color: #4C4C4C;
/*代表 上下是 0 左右是 20 内边距*/
padding: 0 20px;
text-decoration: none;
font-size: 12px;
}
.nav a:hover {
background-color: #eee;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">设为首页</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">博客</a>
<a href="#">微博</a>
<a href="#">关注我</a>
</div>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
影响
设置padding会使盒子的宽度变大, 而影响布局
比如, 使最后一个盒子被挤到下一行, 这里需要学了浮动后再给大家演示
演示
盒子的宽度改变
设置box-sizing
默认情况下, 盒子是content-box, 宽高都是基于内容计算的, 但是这样计算不方便
为了解决这个问题, CSS3引入了box-sizing, 宽高的计算可以根据border-box计算
# 5) 外边距margin
外边距通常用来设置两个盒子之间的距离, 可以用来确定盒子之间的相对位置关系
| 属性 | 作用 |
|---|---|
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
块盒水平居中
- 盒子必须指定了宽度（width）
- 左右的外边距都设置为auto
示例
.container {
width: 1100px;
margin: 0 auto;
}
2
3
4
清除默认内外边距
由于浏览器会有一个默认的样式, 为了使我们的网页在所有的浏览器中看起来是一样的效果, 通常我们会先清除一些默认样式, 这个过程叫reset
最简单的reset
示例
* {
margin: 0;
padding: 0;
}
2
3
4
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
# 相邻块元素垂直外边距的合并
- 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom
- 下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和
- 取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
解决方案：尽量给只给一个盒子添加margin值。
# 嵌套块元素垂直外边距的合并（塌陷）
- 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
- 父元素的上外边距会与子元素的上外边距发生合并
- 合并后的外边距为两者中的较大者
解决方案：
- 可以为父元素定义上边框
- 可以为父元素定义上内边距
#
如果觉得有帮助, 可以微信扫码, 请杰哥喝杯咖啡~
