【CSS布局】盒子模型
目录
- 1.盒子模型的介绍
- 2.内容区域的宽度和高度
- 3.边框(border)
- 4.盒子实际大小初级计算公式
- 5.(案例)新浪导航案例
- 6.内边距(padding)
- 7.盒子实际大小终极计算公式
- 6.(案例)新浪导航的优化
- 7.自动内减
- 8.外边距(margin)
- 9.清除默认内外边距
- 10.(案例)网页新闻列表案例
- 11.外边距折叠现象
- 11.1 合并现象
- 11.2 塌陷现象
- 12.行内元素的margin和padding无效情况
1.盒子模型的介绍
-
盒子的概念
- 页面中的每一个标签,都可看做是一个“盒子”,通过盒子的视角更方便的进行布局
- 浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称之为盒子
-
盒子模型
- CSS 中规定每个盒子分别由:
内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域( margin)
构成,这就是盒子模型
- CSS 中规定每个盒子分别由:
-
记忆:可以联想现实中的包装盒
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 纸箱子, 填充泡沫 */
div {
width: 100px;
height: 100px;
background-color: pink;
/* 边框线 == 纸箱子 */
border: 1px solid #000;
/* 内边距 == 填充泡沫 : 出现在内容和盒子边缘之间 */
padding: 20px;
/* 外边距 : 出现在两个盒子之间, 出现在盒子的外面*/
margin: 50px;
}
</style>
</head>
<body>
<div>内容电脑</div>
<div>内容电脑</div>
</body>
</html>
2.内容区域的宽度和高度
- 作用:利用 width 和 height 属性,设置盒子内容区域的大小
- 属性:width / height
- 常见取值:数字+px
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div>文字</div>
</body>
</html>
3.边框(border)
border
可以设置元素的边框。
边框有三部分组成:边框宽度(粗细)
、边框样式
、边框颜色
。
语法:
border: border-width || border-style || border-color
属性 | 作用 |
---|---|
border-width | 定义边框粗细,单位是 px |
border-style | 边框的样式 |
border-color | 边框颜色 |
边框样式 border-style 可以设置如下值:
none
:没有边框,即忽略所有边框的宽度(默认值)solid
:边框为单实线(最为常用的)dashed
:边框为虚线dotted
:边框为点线
边框简写:
border: 1px solid red; /* 没有顺序 */
边框分开写法:
border-top: 1px solid red; /* 只设定上边框,其余同理 */
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/* border: 粗细 线条样式 颜色 -- 不分先后顺序 */
/* solid : 实线 */
/* border: 1px solid #000; */
/* dashed: 虚线 */
/* border: 5px dashed #000; */
/* dotted : 点线 */
/* border: 5px dotted #000; */
border-left: 5px dotted #000;
border-right: 5px dotted #000;
border-top: 1px solid red;
border-bottom: 1px solid red;
}
</style>
</head>
<body>
<div>内容</div>
</body>
</html>
4.盒子实际大小初级计算公式
- 盒子实际大小初级计算公式:
- 盒子宽度 = 左边框 + 内容宽度 + 右边框
- 盒子高度 = 上边框 + 内容高度 + 下边框
需求:盒子尺寸 400*400,背景绿色,边框10px 实线 黑色,如何完成?
- 注意点:①设置width和height是内容的宽高!②设置border会撑大盒子!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
/* border 撑大盒子尺寸 */
/* 盒子尺寸 = width / height + 边框线 */
/* 如果400 * 400 尺寸 */
width: 380px;
height: 380px;
background-color: green;
border: 10px solid #000;
}
</style>
</head>
<body>
<div>div</div>
</body>
</html>
5.(案例)新浪导航案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 40px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
}
/* 后代: box里面的a */
.box a {
width: 80px;
height: 40px;
/* 推荐先加上: 清楚的看到文字在什么位置 */
/* background-color: #edeef0; */
display: inline-block;
text-align: center;
line-height: 40px;
font-size: 12px;
color: #4c4c4c;
text-decoration: none;
}
.box a:hover {
background-color: #edeef0;
color: #ff8400;
}
</style>
<!-- 从外到内 : 先宽高背景色, 放内容, 调节内容的位置; 控制文字细节 -->
</head>
<body>
<div class="box">
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
</div>
<p>
<a href="#"></a>
</p>
</body>
</html>
6.内边距(padding)
padding 属性用于设置内边距,即边框与内容之间的距离。
属性 | 作用 |
---|---|
padding-left | 左内边距 |
padding-rigth | 右内边距 |
padding-top | 上内边距 |
padding-bottom | 下内边距 |
padding 属性(简写属性)可以有一到四个值。
值的个数 | 表达意思 |
---|---|
padding: 5px; | 1 个值,代表上下左右都有 5 像素内边距 |
padding: 5px 10px; | 2 个值,代表上下内边距是 5 像素,左右内边距是 10 像素 |
padding: 5px 10px 20px; | 3 个值,代表上内边距 5 像素,左右内边距 10 像素,下内边距 20 像素 |
padding: 5px 10px 20px 30px; | 4 个值,上是 5 像素,右 10 像素,下 20 像素,左是 30 像素(顺时针) |
小案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
/* 添加了4个方向的内边距 */
/* padding: 50px; */
/* padding 属性可以当做复合属性使用, 表示单独设置某个方向的内边距 */
/* padding 最多取4个值 */
/* 四值: 上 右 下 左 */
/* padding: 10px 20px 40px 80px; */
/* 三值 : 上 左右 下*/
/* padding: 10px 40px 80px; */
/* 两值 : 上下 左右*/
/* padding: 10px 80px; */
padding-left: 10px;
padding-bottom: 50px;
}
/* 多值写法, 永远都是从上开始顺时针转一圈, 如果数不够, 看对面 */
</style>
</head>
<body>
<div>文字</div>
</body>
</html>
7.盒子实际大小终极计算公式
- 盒子实际大小终极计算公式:
- 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
- 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
需求:盒子尺寸300*300,背景粉色,边框10px实线黑色,上下左右20px的内边距,如何完成?
- 注意点:①设置width和height是内容的宽高!②设置border会撑大盒子③设置padding会撑大盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
/* 撑大盒子的都有啥? border + padding */
width: 240px;
height: 240px;
background-color: pink;
border: 10px solid #000;
padding: 20px;
}
</style>
</head>
<body>
<div>文字</div>
</body>
</html>
6.(案例)新浪导航的优化
需求:优化之前的新浪导航,如果每个导航的字数增加,如何完成效果?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 40px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
}
/* 后代: box里面的a */
.box a {
/* 没有指定宽度,此时设置 padding 会使盒子内容之间的距离相同 */
padding: 0 16px;
/* width: 80px; */
height: 40px;
/* 推荐先加上: 清楚的看到文字在什么位置 */
/* background-color: #edeef0; */
display: inline-block;
text-align: center;
line-height: 40px;
font-size: 12px;
color: #4c4c4c;
text-decoration: none;
}
.box a:hover {
background-color: #edeef0;
color: #ff8400;
}
</style>
<!-- 从外到内 : 先宽高背景色, 放内容, 调节内容的位置; 控制文字细节 -->
</head>
<body>
<div class="box">
<a href="#">新浪</a>
<a href="#">新浪导航新浪导航</a>
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
</div>
<p>
<a href="#"></a>
</p>
</body>
</html>
7.自动内减
-
手动内减
- 操作:自己计算多余大小,手动在内容中减去
- 缺点:项目中计算量太大,很麻烦
-
自动内减
- 操作:给盒子设置属性
box-sizing : border-box
; 即可 - 优点:浏览器会自动计算多余大小,自动在内容中减去
- 操作:给盒子设置属性
需求:盒子尺寸300*300,背景粉色,边框10px实线黑色,上下左右20px的内边距,如何完成?
- 给盒子设置border或padding时,盒子会被撑大,如果不想手动内减怎么办?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
border: 10px solid #000;
padding: 20px;
/* 內减模式 */
/* 变成CSS3的盒子模型, 好处: 加了border和padding不需要手动减法 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div>文字</div>
</body>
</html>
8.外边距(margin)
margin
属性用于设置外边距,即控制盒子和盒子之间的距离。
属性 | 作用 |
---|---|
margin-left | 左外边距 |
margin-right | 右外边距 |
margin-top | 上外边距 |
margin-bottom | 下外边距 |
margin
简写方式代表的意义跟 padding
完全一致。
值的个数 | 表达意思 |
---|---|
margin: 5px; | 1 个值,代表上下左右都有 5 像素外边距 |
margin: 5px 10px; | 2 个值,代表上下外边距是 5 像素,左右外边距是 10 像素 |
margin: 5px 10px 20px; | 3 个值,代表上外边距 5 像素,左右外边距 10 像素,下外边距 20 像素 |
margin: 5px 10px 20px 30px; | 4 个值,上是 5 像素,右 10 像素,下 20 像素,左是 30 像素(顺时针) |
小案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
margin: 50px;
margin-left: 100px;
}
</style>
</head>
<body>
<div>div</div>
</body>
</html>
外边距典型应用:
外边距可以让块级盒子水平居中,但是必须满足两个条件:
- 盒子必须指定了宽度
width
- 盒子左右的外边距都设置为
auto
.header { width: 960px; margin: 0 auto;}
常见的写法,以下三种都可以:
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
注意:以上方法是让块级元素水平居中,行内元素或者行内块元素水平居中给其父元素添加 text-align: center
即可。
小案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 1000px;
height: 300px;
background-color: pink;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 版心: 网页的有效内容 -->
<!-- 版心居中 -->
<div>版心</div>
</body>
</html>
9.清除默认内外边距
网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。因此我们在布局前,首先要清除下网页元素的内外边距。
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距(某些时候,行内元素对上下内外边距不生效)。但是转换为块级和行内块元素就可以了。
小案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>pppp</p>
<p>pppp</p>
<h1>h1</h1>
<ul>
<li>lili</li>
</ul>
</body>
</html>
10.(案例)网页新闻列表案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
/* 所有的标签都可能添加内边距或border, 都內减模式 */
box-sizing: border-box;
}
.news {
width: 500px;
height: 400px;
border: 1px solid #ccc;
margin: 50px auto;
padding: 42px 30px 0;
}
.news h2 {
border-bottom: 1px solid #ccc;
font-size: 30px;
/* 行高是1倍, 就是字号的大小 */
line-height: 1;
padding-bottom: 9px;
}
/* 去掉列表的符号 */
ul {
list-style: none;
}
/* li {} */
.news li {
height: 50px;
border-bottom: 1px dashed #ccc;
padding-left: 28px;
line-height: 50px;
}
.news a {
text-decoration: none;
color: #666;
font-size: 18px;
}
</style>
</head>
<body>
<!-- 从外到内 -->
<div class="news">
<h2>最新文章/New Articles</h2>
<ul>
<li><a href="#">北京招聘网页设计,平面设计,php</a></li>
<li><a href="#">北京招聘网页设计,平面设计,php</a></li>
<li><a href="#">北京招聘网页设计,平面设计,php</a></li>
<li><a href="#">北京招聘网页设计,平面设计,php</a></li>
<li><a href="#">北京招聘网页设计,平面设计,php</a></li>
</ul>
</div>
</body>
</html>
11.外边距折叠现象
11.1 合并现象
- 场景:垂直布局的块级元素,上下的margin会合并
- 结果:最终两者距离为margin的最大值
- 解决方法:避免就好
- 只给其中一个盒子设置margin即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.one {
/* margin-bottom: 50px; */
margin-bottom: 60px;
}
.two {
margin-top: 50px;
}
</style>
</head>
<body>
<div class="one">11</div>
<div class="two">22</div>
</body>
</html>
11.2 塌陷现象
- 场景:互相嵌套的块级元素,子元素的
margin-top
会作用在父元素上 - 结果:导致父元素一起往下移动
- 解决方法:
- 给父元素设置
border-top
或者padding-top
(分隔父子元素的margin-top
) - 给父元素设置
overflow:hidden
- 转换成行内块元素
- 设置浮动
- 给父元素设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 300px;
height: 300px;
background-color: pink;
/* padding-top: 50px; */
/* 如果设计稿没有border, 不能使用这个解决办法 */
/* border: 1px solid #000; */
/* overflow: hidden; */
}
.son {
width: 100px;
height: 100px;
background-color: skyblue;
margin-top: 50px;
display: inline-block;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son</div>
</div>
</body>
</html>
12.行内元素的margin和padding无效情况
-
场景:
给行内元素设置margin和padding时
-
结果:
- 水平方向的margin和padding布局中有效!
- 垂直方向的margin和padding布局中无效!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
/* margin: 100px; */
padding: 100px;
line-height: 100px;
}
</style>
</head>
<body>
<!-- 行内元素 内外边距 margin padding -->
<!-- 如果想要通过margin或padding改变行内标签的垂直位置, 无法生效 -->
<!-- 行内标签的margin-top和bottom 不生效 -->
<!-- 行内标签的padding-top或botttom 不生效 -->
<span>span</span>
<span>span</span>
</body>
</html>