theme: simplicity-green
六、盒模型
1、文档流(normalflow)
网页是一个多层的结构,一层摁着一层![【Web前端HTML5&CSS3】06、盒模型 插图1-烟雨网 427afb11d92e0c4a6b1dea762d85c5d1png](https://www.xhybk.com/wp-content/uploads/2022/12/434ad8ce12943d70c57e9cef9b2212a9.png)
- 在文档流中
- 不在文档流中(脱离文档流)
2、块元素
- 块元素会在页面中独占一行
- 默认宽度是父元素的全部(会把父元素撑满)
- 默认高度是被内容撑开(子元素)
![【Web前端HTML5&CSS3】06、盒模型 插图2-烟雨网 080c032067884d770c86ccbf274ed5e6png](https://www.xhybk.com/wp-content/uploads/2022/12/efb9171387dbfe0ac968f19df398fc98.png)
3、行内元素
- 行内元素不会独占页面的一行,只占自身的大小
- 行内元素在页面中左向右水平排列(书写习惯一致)
- 如果一行之中不能容纳下所有的行内元素,则元素会换到第二行继续自左向右排列
- 行内元素的默认宽度和高度都是被内容撑开
![【Web前端HTML5&CSS3】06、盒模型 插图3-烟雨网 979118a55475dd62fc9ec197e46b9e53jpeg](https://www.xhybk.com/wp-content/uploads/2022/12/4fe6746e68a4a0043d7c506db731a08e.jpg)
4、盒子模型
盒模型、盒子模型、框模型(box model)
CSS 将页面中的所有元素都设置为了一个矩形的盒子![【Web前端HTML5&CSS3】06、盒模型 插图4-烟雨网 d06232c90cee4c38a9a3bda54145bb69gif](https://www.xhybk.com/wp-content/uploads/2022/12/c580025870a54f7bce45ae6d445657e2.gif)
- 内容区(content)
- 内边距(padding)
- 边框(border)
- 外边距(margin)
![【Web前端HTML5&CSS3】06、盒模型 插图5-烟雨网 image20220829202637363png](https://www.xhybk.com/wp-content/uploads/2022/12/8233cad68b5915a2035b4fca8ca1e29c.png)
内容区(content)
内容区是盒子模型的中心,它呈现了盒子的主要信息内容,这些内容可以是文本、图片等多种类型![【Web前端HTML5&CSS3】06、盒模型 插图6-烟雨网 image20220829203427397png](https://www.xhybk.com/wp-content/uploads/2022/12/fce78d9bfe5e8ca9341f6c87148ec531.png)
-
width和height
设置排列内容区的大小 -
width
设置内容区的宽度 -
height
设置内容区的高度
.box1 {
width: 200px;
height: 200px;
border-color: red;
/*
solid 实线
dotted 点状虚线
dashed 虚线
double 双线
*/
border-style: solid;
background-color: rgb(73, 184, 139);
}
效果
![【Web前端HTML5&CSS3】06、盒模型 插图7-烟雨网 image20220829232008345png](https://www.xhybk.com/wp-content/uploads/2022/12/9a843f5dad17e73a40c3ce2a153b652e.png)
边框(border)
边框属于盒子边缘,边框里边属于盒子内部,出了边框都是盒子的外部![【Web前端HTML5&CSS3】06、盒模型 插图8-烟雨网 e54266bf90d5dc77568f7f0bc92fb923gif](https://www.xhybk.com/wp-content/uploads/2022/12/ba217bb16a650ba5830a72ab9e47f4cb.gif)
border-width
:边框的宽度:默认 3px-
border-top-width
上边框的宽度 -
border-right-width
右边框的宽度 -
border-bottom-width
下边框的宽度 -
border-left-width
左边框的宽度
-
border-color
边框的颜色:默认使用 color 的颜色值border-top-color
上边框的颜色border-right-color
右边框的颜色border-bottom-color
下边框的颜色border-left-color
左边框的颜色border-style
:边框的样式:没有默认值,必须指定-
border-top-style
上边框的样式 -
border-right-style
右边框的样式 -
border-bottom-style
下边框的样式 -
border-left-style
左边框的样式
-
![【Web前端HTML5&CSS3】06、盒模型 插图9-烟雨网 image20220830102319275png](https://www.xhybk.com/wp-content/uploads/2022/12/fb55d742b9dffec7b0a4821a60111451.png)
![【Web前端HTML5&CSS3】06、盒模型 插图10-烟雨网 image20220830102506680png](https://www.xhybk.com/wp-content/uploads/2022/12/0fe9479c323f2ecf8a3fb0393b1c25f9.png)
![【Web前端HTML5&CSS3】06、盒模型 插图11-烟雨网 image20220830102558654png](https://www.xhybk.com/wp-content/uploads/2022/12/770306cacb5db512809cac6b88b94639.png)
![【Web前端HTML5&CSS3】06、盒模型 插图12-烟雨网 image20220830102632241png](https://www.xhybk.com/wp-content/uploads/2022/12/fcf358beaa7deea34b38be0501a1597b.png)
border-width
、 border-color
、border-style
还是其衍生出来的属性写法,都可以指定每个方向的边框情况
设定几个值就决定了对应方向的宽度、颜色或样式
- 四个值:
上 右 下 左
- 三个值:
上 左右 下
- 两个值:
上下 左右
- 一个值:
上下左右
border
:简写属性,通过该属性可以同时设置边框所有的相关样式,并且没有顺序要求
-
border-top
上边框的宽度、颜色和样式 -
border-right
右边框的宽度、颜色和样式 -
border-bottom
下边框的宽度、颜色和样式 -
border-left
左边框的宽度、颜色和样式
.box1 {
border: 10px red solid;
}
内边距(padding)
内边距,也叫填充,是内容区和边框之间的空间-
padding-top
上内边距 -
padding-right
右内边距 -
padding-bottom
下内边距 -
padding-left
左内边距
<style>
.outer {
width: 200px;
height: 200px;
border: 10px orange solid;
background-color: pink;
padding-right: 100px;
padding-top: 100px;
padding-bottom: 100px;
padding-left: 100px;
}
.inner {
width: 200px;
height: 200px;
background-color: greenyellow;
}
</style>
<div class="outer">
<div class="inner"></div>
</div>
效果
![【Web前端HTML5&CSS3】06、盒模型 插图13-烟雨网 image20220830154742336png](https://www.xhybk.com/wp-content/uploads/2022/12/a6edbe32272aa1a4891d5213dd47a436.png)
外边距(margin)
外边距,也叫空白边,位于盒子的最外围,是添加在边框外周围的空间。空白边使盒子之间不会紧凑地连接在一起,是 CSS 布局的一个重要手段 注意:外边距不会影响盒子可见框的大小,但是外边距会影响盒子的位置和占用空间 一共有四个方向的外边距:margin-top
:上外边距- 设置正值,元素自身向下移动
- 设置负值,元素自身向上移动
margin-right
:右外边距- 设置正值,其右边的元素向右移动
- 设置负值,其右边的元素向左移动
- 上述说法并不准确,对于块元素,设置
margin-right
不会产生任何效果
margin-bottom
:下外边距- 设置正值,其下边的元素向下移动
- 设置负值,其下边的元素向上移动
- 上述说法并不准确,对于块元素,会有垂直方向上的边距重叠问题(后面会细说)
margin-left
:左外边距- 设置正值,元素自身向右移动
- 设置负值,元素自身向左移动
- 如果我们设置的左和上外边距则会移动元素自身
- 而设置下和右外边距会移动其他元素
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px orange solid;
margin-top: 100px;
margin-right: 100px;
margin-bottom: 100px;
margin-left: 100px;
}
效果
![【Web前端HTML5&CSS3】06、盒模型 插图14-烟雨网 image20220830154845734png](https://www.xhybk.com/wp-content/uploads/2022/12/d8276be82a26aceb32649ff549319750.png)
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px orange solid;
margin-bottom: 100px;
}
.box2 {
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px red solid;
margin-top: 100px;
}
效果
![【Web前端HTML5&CSS3】06、盒模型 插图15-烟雨网 c5f16dc4f083b514f7e53b1f37f520dbpng](https://www.xhybk.com/wp-content/uploads/2022/12/0eaf62cd0387edc2beab6df32f34268c.png)
5、水平方向布局
元素在其父元素中水平方向的位置由以下几个属性共同决定margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素的宽度
以上等式必须满足,如果相加结果使等式不成立,则称为==过渡约束==
![【Web前端HTML5&CSS3】06、盒模型 插图16-烟雨网 30c7e982a9aaeaaac7181f5e51427098jpeg](https://www.xhybk.com/wp-content/uploads/2022/12/7d5f1d70f5324f0fbf66ca9c62917b38.jpg)
- 如果这七个值中没有
auto
的情况,则浏览器会自动调整margin-right
值以使等式满足100 + 0 + 0 + 200 + 0 + 0 + 0 = 800
==>100 + 0 + 0 + 200 + 0 + 0 + 500 = 800
- 如果这七个值中有
auto
的情况,则会自动调整auto
值以使等式成立 这七个值中有三个值可以设置为auto
:width
、margin-left
、maring-right
- 如果某个值为 auto,则会自动调整
auto
的那个值以使等式成立200 + 0 + 0 + auto + 0 + 0 + 200 = 600
==>200 + 0 + 0 + 400 + 0 + 0 + 200 = 800
auto + 0 + 0 + 200 + 0 + 0 + 200 = 600
==>400 + 0 + 0 + 200 + 0 + 0 + 200 = 800
200 + 0 + 0 + 200 + 0 + 0 + auto = 600
==>200 + 0 + 0 + 200 + 0 + 0 + 400 = 800
- 如果宽度为
auto
,则宽度会调整到最大,其他auto
的外边距会自动设置为 0auto + 0 + 0 + auto + 0 + 0 + 200 = 600
==>0 + 0 + 0 + 600 + 0 + 0 + 200 = 800
200 + 0 + 0 + auto + 0 + 0 + auto = 600
==>200 + 0 + 0 + 600 + 0 + 0 + 0 = 800
auto + 0 + 0 + auto + 0 + 0 + auto = 600
==>0 + 0 + 0 + 800 + 0 + 0 + 0 = 800
- 如果外边距都为
auto
,则auto
的外边距会自动均分以使等式成立auto + 0 + 0 + 200 + 0 + 0 + auto = 600
==>300 + 0 + 0 + 200 + 0 + 0 + 300 = 800
- 如果某个值为 auto,则会自动调整
![【Web前端HTML5&CSS3】06、盒模型 插图17-烟雨网 8e724b2f4df77f1fef55ff9a7c8b82adjpeg](https://www.xhybk.com/wp-content/uploads/2022/12/3c89d1ad3936cc6abbbe51c3bbfab669.jpg)
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px orange solid;
/* 下列条件等价于 margin: 0 auto */
margin-left: auto;
margin-right: auto;
}
</style>
<div class="box1"></div>
效果
![【Web前端HTML5&CSS3】06、盒模型 插图18-烟雨网 image20220830172408221png](https://www.xhybk.com/wp-content/uploads/2022/12/3ca8a212ba9164a4d854c7b5f8e2a7e8.png)
6、垂直方向布局
元素溢出
子元素是在父元素的内容区中排列的,如果子元素的大小超过了父元素,则子元素会从父元素中溢出![【Web前端HTML5&CSS3】06、盒模型 插图19-烟雨网 3bd5d68af80a8c4eb2743de0f3103c6ajpeg](https://www.xhybk.com/wp-content/uploads/2022/12/ca93073401be3e71360e7957a57928de.jpg)
overflow
/overflow-x
/overflow-y
属性来设置父元素如何处理溢出的子元素
可选值:visible
/hidden
/scroll
/auto
visible
溢出内容会在父元素外部位置显示,默认值
示例
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px orange solid;
overflow: visible; /* 默认值 */
}
</style>
<div class="box1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores aspernatur
illo inventore deleniti laudantium quaerat excepturi sed quidem tempore?
Eaque, cumque porro. Fuga quam error cupiditate quasi eveniet in numquam!
</div>
效果
![【Web前端HTML5&CSS3】06、盒模型 插图20-烟雨网 image20220830172703579png](https://www.xhybk.com/wp-content/uploads/2022/12/76b45d30b9a6b1967812244aa3f74f44.png)
hidden
溢出内容会被裁剪,不会显示
示例
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
overflow: hidden; /* 隐藏溢出内容 */
}
</style>
<div class="box1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores aspernatur
illo inventore deleniti laudantium quaerat excepturi sed quidem tempore?
Eaque, cumque porro. Fuga quam error cupiditate quasi eveniet in numquam!
</div>
效果
![【Web前端HTML5&CSS3】06、盒模型 插图21-烟雨网 image20220830172809315png](https://www.xhybk.com/wp-content/uploads/2022/12/9fa07ba391dba00a79c94f8ea9c3fc3f.png)
scroll
生成两个滚动条,通过滚动条来查看完整的内容
示例
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
overflow: scroll;
}
</style>
<div class="box1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores aspernatur
illo inventore deleniti laudantium quaerat excepturi sed quidem tempore?
Eaque, cumque porro. Fuga quam error cupiditate quasi eveniet in numquam!
</div>
效果
![【Web前端HTML5&CSS3】06、盒模型 插图22-烟雨网 image20220830172908376png](https://www.xhybk.com/wp-content/uploads/2022/12/abe363de2d356028e50c0350e551a67d.png)
![【Web前端HTML5&CSS3】06、盒模型 插图23-烟雨网 image20220830172922423png](https://www.xhybk.com/wp-content/uploads/2022/12/abe363de2d356028e50c0350e551a67d.png)
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
overflow: auto;
}
</style>
<div class="box1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores aspernatur
illo inventore deleniti laudantium quaerat excepturi sed quidem tempore?
Eaque, cumque porro. Fuga quam error cupiditate quasi eveniet in numquam!
</div>
效果
![【Web前端HTML5&CSS3】06、盒模型 插图24-烟雨网 image20220830172958570png](https://www.xhybk.com/wp-content/uploads/2022/12/d5256f0e68360315cbfa6b8443404daa.png)
边距折叠
垂直外边距的重叠(折叠):相邻的垂直方向外边距会发生重叠现象兄弟元素
兄弟元素间的相邻,垂直外边距会取两者之间的较大值(两者都是正值) 特殊情况:- 如果相邻的外边距一正一负,则取两者的和
- 如果相邻的外边距都是负值,则取两者中绝对值较大的
.box1,
.box2 {
width: 200px;
height: 200px;
font-size: 100px;
}
.boxl {
background-color: #bfa;
/*设置一个下外边距*/
margin-bottom: 100px;
}
.box2 {
background-color: orange;
/*设置一个上外边距*/
margin-top: 100px;
}
效果
![【Web前端HTML5&CSS3】06、盒模型 插图25-烟雨网 f931e5ffe869cb7af81742c7f1ef712dpng](https://www.xhybk.com/wp-content/uploads/2022/12/6e3955db1da9c35eefece1caae0122a5.png)
在网页布局中,通过谷歌浏览器或火狐浏览器预览时,发现我们定义的盒模型 width,height,margin,padding 值都是不准确的 谷歌、火狐浏览器 缩放为 80% 时,margin 值才正确[2]总结 兄弟元素之间的外边距的重叠,对于开发是有利的,所以我们不需要进行处理
![【Web前端HTML5&CSS3】06、盒模型 插图26-烟雨网 26ccb9a9096d2bfda42e2a3b2aa95047gif](https://www.xhybk.com/wp-content/uploads/2022/12/cfe6c8192c7ed4e05400194aa24061a5.gif)
父子元素
父子元素间相邻外边距,子元素会传递给父元素(上外边距) 示例.box3{
width:200px;
height:200px;
background-color: #bfa;
}
.box4{
width: 100px;
height: 100px;
background-color: orange;
/* margin-top: 100px; */
}
效果
不加 margin-top
![【Web前端HTML5&CSS3】06、盒模型 插图27-烟雨网 watermark,typeZmFuZ3poZW5naGVpdGk,shadow10,textaHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTI1NTU4,size16,colorFFFFFF,t7020220830173213517png](https://www.xhybk.com/wp-content/uploads/2022/12/b3d36ef348cd1abd6e639276f49f8b86.png)
![【Web前端HTML5&CSS3】06、盒模型 插图28-烟雨网 watermark,typeZmFuZ3poZW5naGVpdGk,shadow10,textaHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTI1NTU4,size16,colorFFFFFF,t70png](https://www.xhybk.com/wp-content/uploads/2022/12/02877b6e5e3ce6feb7a30ba483642fad.png)
![【Web前端HTML5&CSS3】06、盒模型 插图29-烟雨网 24c1780e17f9b956261732c6d8bec903jpeg](https://www.xhybk.com/wp-content/uploads/2022/12/4633d1fc3fd9cb93d8fb9ab45c30b0be.jpg)
.box3 {
width: 200px;
height: 200px;
background-color: #bfa;
padding-top: 100px; /* 不调整子元素的margin,而是转而调整父元素的padding */
}
.box4 {
width: 100px;
height: 100px;
background-color: orange;
/* margin-top: 100px; */
}
效果
![【Web前端HTML5&CSS3】06、盒模型 插图30-烟雨网 5f0dc3466e5630ff04359a80a0205f38png](https://www.xhybk.com/wp-content/uploads/2022/12/75adaa667de79a3cf978bc13b891bb17.png)
.box3 {
width: 200px;
height: 100px; /* height: 200px; */
background-color: #bfa;
padding-top: 100px;
}
.box4 {
width: 100px;
height: 100px;
background-color: orange;
}
效果
![【Web前端HTML5&CSS3】06、盒模型 插图31-烟雨网 765e417b0251acba822de090ddfdf6dbpng](https://www.xhybk.com/wp-content/uploads/2022/12/0f7595b22be24ca5cbb16236891c9ab3.png)
margin-top
属性,但是给父元素加一个上边框
.box3 {
width: 200px;
height: 200px;
background-color: #bfa;
border-top: 1px rebeccapurple solid; /* 在父元素上加一个border-top(上边框) */
}
.box4 {
width: 100px;
height: 100px;
background-color: orange;
margin-top: 100px; /* 不删除,保留 */
}
效果
![【Web前端HTML5&CSS3】06、盒模型 插图32-烟雨网 c56fa4594b82be6a80f6fc34d84e531bpng](https://www.xhybk.com/wp-content/uploads/2022/12/0d94ea48739e74f672443f614b8a0f48.png)
.box3 {
width: 200px;
height: 199px; /* height: 200px; */
background-color: #bfa;
border-top: 1px #bfa solid;
}
.box4 {
width: 100px;
height: 100px;
background-color: orange;
margin-top: 100px;
}
![【Web前端HTML5&CSS3】06、盒模型 插图33-烟雨网 f7446f62897af28d0cecdaa227510984png](https://www.xhybk.com/wp-content/uploads/2022/12/56685e86dee0d7b1302f5f46d5f73894.png)
![【Web前端HTML5&CSS3】06、盒模型 插图34-烟雨网 6a06c3e28a6a86ccfaff8715170b81c7gif](https://www.xhybk.com/wp-content/uploads/2022/12/f4bc4462276c58d0fd0bb5833a642077.gif)
.box3 {
width: 200px;
height: 199px;
background-color: #bfa;
border-top: 1px #bfa solid;
}
.box4 {
width: 100px;
height: 100px;
background-color: orange;
margin-top: 99px; /* margin-top: 100px; */
}
效果
![【Web前端HTML5&CSS3】06、盒模型 插图35-烟雨网 9e66ca2ff5e5da3492054a3ebd49fdb4png](https://www.xhybk.com/wp-content/uploads/2022/12/7cc40b94744e34ede3a1f5bf0e7a550f.png)
![【Web前端HTML5&CSS3】06、盒模型 插图36-烟雨网 84d32f4309e7e2870d60334ec76b6809png](https://www.xhybk.com/wp-content/uploads/2022/12/c1d33cbc6b07f5988b43d6684d267c7a.png)
脱离文档流
上述示例 2 中,使用了 border 属性,就让子元素的外边距不去传递给父元素了,这是为什么呢?margin (子元素远离父元素边框)[3] 如果父盒子没有设置 border 框着,那么他的子元素无法利用 margin-top 来远离父元素的上边框 如果使用了 margin-top 会使子元素和父元素一起往下移 (子想离,父不设置 border 边框 则离得是流 不是父盒子)
![【Web前端HTML5&CSS3】06、盒模型 插图37-烟雨网 d8cca9d19c3e1688ee2572d9b6b85238jpeg](https://www.xhybk.com/wp-content/uploads/2022/12/d0b20f5500698fbe2f80586596704aa3.jpg)
![【Web前端HTML5&CSS3】06、盒模型 插图38-烟雨网 b17cf83f82b5698f2759a1a1e4700f9ajpeg](https://www.xhybk.com/wp-content/uploads/2022/12/e5fe409e60631d977b650274d8e99dc0.jpg)
感谢您的来访,获取更多精彩文章请收藏本站。
![](https://www.xhybk.com/wp-content/uploads/2022/10/88dbbdacf7bc69c8813ebfdb22c7f7b3.gif)
© 版权声明
THE END
暂无评论内容