一、盒子模型的概念
盒子模型概念：页面中的每一个标签，都可看做是一个
“盒子”
，通过盒子的视角更方便的进行布局 ，浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为
盒子
二、盒子模型的组成
CSS 中规定每个盒子分别由：
内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（ margin）
构成，这就是
盒子模型
三、盒子模型的边框（border）
1.border：
给设置边框粗细、边框样式、边框颜色效果
2.边框连写：单个取值的连写，取值之间以空格隔开 。如：border : 10px solid red;
3.边框的
单方向设置：只给盒子的某个方向单独设置边框。如：border - 方位名词
四、盒子模型的内边距（ padding ）
1.作用：设置
边框
与
内容区域
之间的距离
2.
单方向设置：只给盒子的某个方向单独设置边框。如：padding - 方位名词
3.padding的计算：
4.不会撑大盒子的特殊情况（块级元素）
（1） 如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
（2）此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子
五、盒子模型的外边距（margin）
1.作用：设置边框以外，盒子与盒子之间的距离
2.单方向设置：只给盒子的某个方向单独设置边框。如：margin - 方位名词
3.margin的常见取值
4. margin的应用
5.清除默认内外边距
浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的margin和padding，后续自己设置。
6.外边距正常情况
（1）
场景：
水平布局
的盒子，左右的margin正常，互不影响
（2）结果：最终两者距离为左右margin的和
7.外边距折叠现象
① 合并现象
1.场景：
垂直布局
的
块级元素
，上下的margin会合并
2.结果：最终两者距离为margin的最大值
3.解决方法：避免就好 （
只给其中一个盒子设置margin即可
）
② 塌陷现象
1.
场景：
互相嵌套
的
块级元素
，子元素的
margin-top
会作用在父元素上
2.
结果：导致父元素一起往下移动
3.
解决方法：
（1）给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
（2）给父元素设置overflow：hidden
（3）转换成行内块元素
（4）设置浮动
8.行内元素的margin和padding无效情况
1.
场景：给行内元素设置margin和padding时
2.结果：
（1）水平方向的margin和padding布局中有效！
（2）垂直方向的margin和padding布局中无效！
六.盒子模型综合案例
1.小米登录框基本案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 356px;
height: 339px;
margin: 100px auto;
}
.box h1 {
width: 49px;
height: 49px;
/* logo这个背景图片是透明的四周中间有白色的logo，所以需要设置背景颜色从而衬托出白色的logo */
background: #ff4c00 url('./images/mi-logo.png');
margin: 0 auto;
}
.box h2 {
height: 77px;
margin-top: 35px;
text-align: center;
font-size: 30px;
font-weight: 400;
}
.box input {
width: 356px;
height: 50px;
border: 1px solid #ccc;
padding-left: 15px;
margin-bottom: 14px;
/* 不要盒子被撑大，自动内减 */
box-sizing: border-box;
}
.box button {
width: 356px;
height: 50px;
background-color: #ff4c00;
color: #fff;
border: none;
}
</style>
</head>
<body>
<div class="box">
<h1></h1>
<h2>小米账号登录</h2>
<input type="text" placeholder="邮箱/手机/小米ID">
<input type="text" placeholder="邮箱/手机/小米ID">
<button>登录</button>
</div>
</body>
</html>效果展示：
2.小米导航栏
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
height: 50px;
background-color: black;
}
.nav {
width: 1226px;
height: 50px;
margin: 0 auto;
}
.nav a {
color: #b0b0b0;
font-size: 14px;
text-decoration: none;
line-height: 50px;
border-right: 1px solid #b0b0b0;
padding: 0px 7px;
}
a:hover {
color: white;
}
</style>
</head>
<body>
<div class="box">
<div class="nav">
<a href="#">小米商城</a>
<a href="#">MIUI</a>
<a href="#">LOT</a>
<a href="#">云服务</a>
<a href="#">金融</a>
<a href="#">有品</a>
<a href="#">小爱开放平台</a>
<a href="#">企业团购</a>
<a href="#">资质证照</a>
<a href="#">协议规则</a>
<a href="#">下载app</a>
<a href="#">小米商城app</a>
</div>
</div>
</body>
</html>效果展示：
1496
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
