一：盒模型
1、 盒模型的概念
广义盒模型：文档中所有功能性及内容性标签，及文档中显示性标签
侠义盒模型：文档中以块级形式存在的标签（块级标签拥有盒模型100%特性且最常用）
盒模型组成：margin + border + padding + content
v_hint（提示）：content = width x height
2、 盒模型成员介绍
content \ border \ padding \ margin
1. content
- 通过设置width与height来规定
- 块级标签，可以设置自身宽高，默认宽父级宽（width = auto）、高为0（可由内容决定）
- 内联标签，不可以设置自身宽高，默认宽高均为0，宽高一定是由内容决定的
2.border
border（边框）由border-width（宽度）、border-color（颜色）、border-style（风格）三部分组成
border成员：border-left 、border-right 、border-top 、border-bottom
3.padding
- padding成员：padding-left 、padding-right 、padding-top 、padding-bottom
- 整体设置
4.margin
- margin成员：margin-left 、margin-right 、margin-top 、margin-bottom
- 整体设置
二：盒模型布局
分为两大布局：
影响自身布局
影响兄弟布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒模型布局</title>
<style>
/*做页面必备reset操作*/
html, body {
margin: 0
}
.box, .wrap {
width: 200px;
height: 200px;
background-color: red;
}
.wrap {
background: orange;
}
/*影响自身布局*/
/*.box {
margin-top: 30px;
margin-left: 100px;
}*/
/*影响兄弟布局*/
/*margin-bottom影响上下兄弟,尽量别对margin-right进行设置*/
/*margin-right影响左右兄弟,尽量别对margin-bottom进行设置*/
.box {
/*margin-bottom: 30px;*/
margin-right: 100px;
} /*display:显示方式*/
/*块:block*/
/*内联:inline*/
/*内联块:inline-block*/
.box, .wrap {
display: inline-block;
/*vertical-align: top;*/
} /*兄弟坑*/
/*盒模型布局坑只出现在和margin-top相关的地方*/
.s1, .s2 {
width: 100px;
height: 100px;
background-color: pink;
}
/*重叠取大值*/
.s1 {
margin-bottom: 30px;
}
.s2 {
margin-top: 50px;
} /*父子坑*/
.sup {
width: 200px;
height: 200px;
background-color: cyan;
}
.sub {
width: 100px;
height: 100px;
background-color: orange;
}
/*父子top重叠,取大值*/
.sup {
margin-top: 50px;
}
.sub {
margin-left: 50px;
}
/*解决盒模型经典布局坑*/
/*1.将父级固定*/
.sup {
/*border-top: 1px solid black;*/
/*border-top: 1px solid transparent;*/
/*保证显示区域 200*200 */
/*height: 199px;*/
}
.sub {
/*margin-top: 50px;*/
}
/*2.通过padding*/
.sup {
padding-top: 50px;
height: 150px;
} </style>
</head>
<body>
<div class="box"></div>
<div class="wrap"></div> <!-- 坑 -->
<section class="s1"></section>
<section class="s2"></section> <div class="sup">
<div class="sub"></div>
</div>
</body>
</html>
盒模型的两种布局方式