什么是盒模型
英语(box module)是w3c规定一个浏览器如何渲染，显示一个元素。
盒模型的分类
块级元素盒模型和行内元素盒模型。
理解单个盒模型的内部结构
content 内容 width宽 height高
宽高定义了一个元素内容区的大小,内容从元素盒子的左上角开始排列
overflow:hidden;超出盒模型的部分隐藏
我们先来了解盒模型的组成
-
padding (内边距 )
把这个盒子 和 盒子里边的内容 隔开
特点:
- 把这个盒子撑大
- padding区域的颜色和内容区的颜色保持一致
- padding用于设置盒子的边框和内容区的距离
- padding: --复合样式 顺时针方向
1个值: 上= 右=下=左
2个值: 上下-----左右
3个值: 上------左右 -----下
4个值:上---右----下----- 左
5.分样式:
padding-top---上内边距
padding-right:---右内边距
padding-left --- 左内边距
padding-bottom: ---下内边距
-
margin 外边距
盒子 与 盒子之间的 距离
复合样式 分样式与padding相同
特殊值: auto---自动 浏览器会帮助你计算 左右一样
-
border边框线
复合样式 : border:20px solid red;
border的分样式
1. border-width ----边框线大小
- border-style ----边框线的样式
实线solid 虚线dashed 点线 dotted 双边框线 double- border-color: 边框颜色 transparent 透明色
-
单个边框复合样式:
border-top: 20px solid red; 上边框线
border-left:左
border-right:右
border-bottom:下
-
单个边框分样式:
border-top-width 上边框宽度
border-top-style 上边框样式
border-top-color 上边框颜色
-
一个标准盒模型占据页面的总空间大小
总宽: width = width(内容) + padding(左,右) + border (左,右) +margin(左,右)
总高: height = height(内容) +padding(上下 ) +border (上下 ) +margin (上下)
-
一个标准盒模型的 实际大小
宽 width = width(内容) + padding(左,右) + border (左,右)
高 height = height(内容) +padding(上下 ) +border (上下 )
让我们看图来理解
标签类型
1.块级标签
特点:独占一行
例如:div p ul ol li h1~h6 dl dt dd
2.行级标签
特点:横排显示
例如:span a em strong b i
怪异盒模型的整体概念
块元素在网页内容中实际占据空间的大小在怪异盒模型和标准盒模型下是不一样的：
-
标准盒模型下：
标准盒模型的实际宽度=width+左padding+右padding+左border+右border
标准盒模型的内容区宽度=width -
怪异盒模型下：
怪异盒模型的实际宽尺寸=width
怪异盒模型的内容区宽尺寸=width-左border-右border-左padding-右padding 高度同理可得。
怪异盒模型应用场景
如果不想因为改变padding的时候盒子的大小也会跟着变化的话就可以使用怪异盒模型,而如果想让盒子的大小被padding撑开的话就可以使用标准盒模型
案例
<style>
#box{
width:200px;
height: 200px;
background-color: deeppink;
}
</style>
<body>
<div id="box">小明</div>
</body>
这里有个200px的盒子 我们增大盒子的padding 让文字距离左侧右边距 然后还不能改变盒子大小
此时就需要用到怪异盒模型
<style>
#box{
padding: 50px;
width:200px;
height: 200px;
background-color: deeppink;
box-sizing: border-box;
}
</style>
这里我们可以看到使用怪异盒模型既不会改变盒子大小 还完成了我们的需求
外边距合并
外边距 合并的两种情况:
- 相邻:
谁的外边距大就显示谁的外边距值
解决问题方案:中间加一个元素设置 border:1px solid transparent;
案例
<style>
#box{
width:200px;
height: 200px;
margin: 30px;
background-color: deeppink;
}
.text{
width: 100px;
height: 100px;
margin: 20px;
background-color: skyblue;
}
</style>
<body>
<div id="box"></div>
<div class="text"></div>
</body>
解决办法
<style>
#box{
width:200px;
height: 200px;
margin: 30px;
background-color: deeppink;
}
.text{
width: 100px;
height: 100px;
margin: 20px;
background-color: skyblue;
}
.wrap{
border: 1px solid transparent;
}
</style>
<body>
<div id="box"></div>
<div class="wrap"></div>
<div class="text"></div>
</body>
- 嵌套:
谁的外边距大就显示谁的外边距值
解决问题方案:
1. 给父亲添加边框线 : border:1px solid red;
2. 给父亲添加padding
3. 给父亲添加 overflow:hidden;
案例
<style>
#box{
width:300px;
height: 300px;
margin: 30px 0;
background-color: deeppink;
}
.text{
width: 100px;
height: 100px;
margin: 100px 0;
background-color: skyblue;
}
</style>
<body>
<div id="box">
<div class="text"></div>
</div>
解决方法
<style>
#box{
width:300px;
height: 300px;
margin: 30px 0;
background-color: deeppink;
overflow: hidden;
}
.text{
width: 100px;
height: 100px;
margin: 100px 0;
background-color: skyblue;
}
</style>
