一、盒子模型的概念
盒子模型概念:页面中的每一个标签,都可看做是一个
“盒子”
,通过盒子的视角更方便的进行布局 ,浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称之为
盒子
二、盒子模型的组成
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>
效果展示: