CSS详解五 ——文档流，盒子模型内外边距等

本文链接：https://blog.youkuaiyun.com/2301_76428778/article/details/145064976

文档流

文档流（normal flow）

-网页是一个多层的结构，一层叠着一层，通过css可以分别为每一层来设置样式

-作为用户来讲，只能看到最顶上一层

-文档流处在网页的最底层，文档流是网页的基础，

它表示的是一个页面中的位置，

我们所创建的元素默认都处在文档流中，在其上排列

-元素主要有两个状态，在文档流中，不在文档流中（脱离文档流）

元素在文档流中的特点

块元素

1.块元素在文档流中会独占一行，块元素会自上向下排列。

2.块元素在文档流中默认宽度是父元素的100%

3.块元素在文档流中的高度默认被内容(子元素)撑开

内联元素（行内元素）

1.内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。

2.在文档流中，内联元素的宽度和高度默认都被内容撑开

盒子模型

把元素布局到页面，就像想买个桌子，放到家里，要知道桌子的大小，形状，然后才能放到家里，所以我们把所有的元素都想成盒子，矩形

盒模型、盒子模型、框模型（box model）

css将页面中所有元素都设置为一个矩形的盒子

-将元素设置为矩形的盒子后，对页面的布局就变成了不同的盒子摆放到不同的位置

-每一个盒子，都有以下几个部分组成

内容区(content)

内边距(padding)

边框(border)

外边距(margin) 决定位置

-盒子可见框的大小由内容区，内边距和边框共同决定

1:内容区(content)

元素中所有的子元素和文本内容都在内容区中排列

* 使用width来设置盒子内容区的宽度

* 使用height来设置盒子内容区的高度

* width和height只是设置的盒子内容区的大小，而不是盒子的整个大小，

width: 300px;

height: 300px;

background-color: #bfa; /*设置背景颜色*/

2:边框（border）元素设置边框

边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部

设置边框必须指定三个样式

* border-width:边框的宽度

* border-color:边框颜色

* border-style:边框的样式

边框的大小会影响整个盒子的大小

border-width: 10px;

border-color: #ff0;

border-style: dashed;

padding: 10px;

margin: 10px;

盒子边框

.box{

width: 300px;

height: 200px;

background-color: rgb(222, 255, 170);}

设置边框

大部分的浏览器中，边框的宽度和颜色都是有默认值，而边框的样式默认值都是none

设置上2px,下4px,左边6px, 右边1px

border-width: 2px 1px 4px 6px;

设置上下4px 左右6px

border-width: 4px 6px;

设置上4px 左右6px 下2px

border-width:4px 6px 2px;

/* border-color: #f00; */

/* border-style: dotted; */

1:border-width 默认值一般是3px

使用border-width可以分别指定四个边框的宽度

如果在border-width指定了四个值，则四个值会分别设置给上右下左，按照顺时针的方向设置的

如果指定三个值，则三个值会分别设置给上左右下

如果指定两个值，则两个值会分别设置给上下左右

如果指定一个值，则四边全都是该值

除了border-width，CSS中还提供了四个border-xxx-width，xxx的值可能是top right bottom left

专门用来设置指定边的宽度

border-bottom-width:1px;

border-bottom-style: dashed;

border-bottom-color:#ccc;

四个值设置边框大小顺序上右下左

三个值设置边框的大小顺序上左右下

两个值设置边框的大小上下左右

2:border-color

设置边框的颜色默认值是黑色

和宽度一样，color也提供四个方向的样式，可以分别指定颜色

border-xxx-color

3:border-style

设置边框的样式

可选值：

* none，默认值，没有边框

* solid 实线

double 双线

dashed [dæʃt] 虚线

* dotted ['dɔtid] 点状边框

* style也可以分别指定四个边的边框样式，规则和width一致，

* 同时它也提供border-xxx-style四个样式，来分别设置四个边

统一设置

border: 1px dotted #f00;

/* 单独设置 */

/* border-top:1px solid #ff0;

border-left:1px solid #fc0;

border-right:1px solid #f00;

border-bottom:1px solid #cf0; */

* border

* - 边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色

* - 而且没有任何的顺序要求

* - border一指定就是同时指定四个边不能分别指定

* border-top border-right border-bottom border-left

* 可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效

.box2{

width: 400px;

padding: 10px 0;

border-bottom: 1px solid #ccc;

}

内边距（padding）：

内容区和边框之间的距离，它会影响到盒子的大小

（1）、分别给每边设置内边距

padding-top: ;

padding-right: ;

padding-bottom: ;

padding-left: ;

（2）padding简写

padding后可以写多个值

4个值

3个值

2个值

1个值

规则跟之前讲的border-width是一样

.box1 {

width: 100px;

height: 100px;

background-color: #bfa;

border: 10px solid orange;

/* 设置内边距 */

/* padding-top:40px ;

padding-right: 40px;

padding-bottom: 40px;

padding-left: 40px; */

padding:40px;

/* margin-bottom: 20px; */ }

* 需求：创建一个子元素box2占满box1，box2把内容区撑满了

.box2{

width: 100%;

height: 100%;

background-color: red; }

外边距

* 外边距指的是当前盒子与其他盒子之间的距离，

* 他不会影响可见框的大小，而是会影响到盒子的位置。

* 盒子有四个方向的外边距：

* margin-top

上外边距，设置一个正值，元素会向下移动

* margin-right

默认情况下设置margin-right不会产生任何效果

* margin-bottom

下外边距，设置一个正值，其下边的元素会向下移动，挤别人

* margin-left

左外边距，设置一个正值，元素会向右移动

* 由于页面中的元素都是靠左靠上摆放的，

* 所以当我们设置上和左外边距时，会导致盒子自身的位置发生改变，

* 而如果是设置右和下外边距会改变其他盒子的位置（挤别人）

外边距也可以指定为一个负值，如果外边距设置的是负值，则元素会向反方向移动

外边距同样可以使用简写属性 margin，可以同时设置四个方向的外边距,规则和padding一样

元素的水平方向的布局

元素在其父元素中水平方向的位置由以下几个属性共同决定

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

=父元素内容区的宽度（必须满足）

举例：子元素 inner七个元素的值如下

0 +0 + 0+ 200 + 0 + 0 + 0 =600 ？？不成立

以上等式必须满足，如果相加结果等式不成立，则称为过度约束，则浏览器会让等式自动调整

-调整的情况

1:如果七个值中没有auto情况，则浏览器会调整margin-right值以使等式满足

0 +0 + 0+ 200 + 0 + 0 + 400 =600

2:这7个值中width，margin-left，margin-right，这三个值可以设置auto

如果有设置auto，则浏览器会自动调整auto的值，以使等式成立

0 +0 + 0+ auto + 0 + 0 + 0 =600 auto=600

0 +0 + 0+ auto + 0 + 0 + 200 =600 auto=400

3:如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大

4:如果三个值都是auto，也只会调整宽度

5:如果将两个外边距设为auto，宽度固定，则两侧外边距会设置为相同的值

会使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto

/* 有宽先调宽，宽固定，再调两边 */

.inner {

width: 200px;

margin:0 auto;

height: 200px;

background-color: sandybrown;

}

<style>

.outer {

background-color: sandybrown;

/* height: 400px; */

}

.inner {

width: 100px;

height: 100px;

background-color: yellowgreen;

margin-bottom: 100px;

}

/* 默认情况下，父元素的高度是被子元素撑开的，

若父元素设置了，就是设置多少就是多少 */

.box1 {

width: 700px;

/* white-space: nowrap; */

height: 100px;

background-color: #bfa;

overflow:auto;

}

子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出

使用overflow属性设置父元素如何处理溢出的子元素

可选值：

visible 默认值 子元素会从父元素中溢出，在父元素外部的位置显示

hidden 溢出的内容将会被裁剪不会显示

scroll 生成两个滚动条，通过滚动条来查看完整的内容

auto 根据需要生成滚动条

额外两个属性，了解一下

overflow-x 生横轴时注意换行

overflow-y

</style>

</head>

<body>

<!-- <div class="outer">

</div> -->

</div>

</body>

外边距的重叠

.box1 {

width: 100px;

height: 100px;

background-color: red;

* 为上边的元素设置一个下外边距

margin-bottom:10px;

}

.box2 {

width: 100px;

height: 100px;

background-color: green;

* 为下边的元素设置一个上外边距

margin-top: -10px;

}

* 垂直外边距的重叠

* - 在网页中相邻的垂直方向的外边距，会发生外边距的重叠

-兄弟元素

* 兄弟元素之间的相邻外边距会取最大值而不是取和，谁大听谁的

特殊情况：如果相邻的外边距一正一负，则取两者的和

如果相邻的外边距都是负值，则取绝对值较大的

兄弟元素的外边距重叠，对开发有利，不用处理

需求：将子元素移动到父元素的左下角

-父子元素

如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素

暂时解决方案：

1:不用外边距

2:使不相邻

transparent透明

当父元素没有内边距（padding）、边框（border）或者内容将其与子元素分隔开时，子元素的外边距会与父元素的外边距发生塌陷。

.outer {

width: 200px;

/* height: 200px; */

height: 200px;

background-color: yellow;

/* overflow: hidden; */

/*改变padding的时候同时改变盒子的高度 */

/* padding-top:100px; */

/* border: 1px solid transparent; */

/* 开启元素的隐含属性 overflow，BFC */

/* BFC（Block Formatting Context，块格式化上下文）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 */

/* BFC简单理解子元素不会影响到其他元素 */

/* overflow: hidden; */

/* margin-top: 100px; */

方案1:用padding ，改父元素高度

/* padding-top: 100px;

height: 100px; */

方案2:为outer设置一个上边框 会改变盒子的大小，有个1px的边框 transparent

/* border: 1px solid transparent; */

添加边框（border）

原理：通过给父元素添加边框，可以将父元素和子元素在视觉上和布局逻辑上分隔开，阻止外边距的塌陷。
给父元素添加了一个透明的边框（border: 1px solid transparent），这样就防止了子元素的上外边距使父元素一起向下移动。边框的宽度和样式可以根据实际设计需求进行调整。

添加内边距（padding）

原理：内边距在父元素内部创造了一个空间，使得子元素的外边距不会直接与父元素的外边距相互影响，从而避免塌陷。

这里给父元素添加了 1px 的上内边距（padding - top: 1px），这就有效地分隔了父元素和子元素的外边距，解决了塌陷问题。内边距的大小可以根据具体情况进行调整，不过要注意它会影响元素内部的空间布局。

触发块格式化上下文（BFC）

原理：BFC 是 CSS 中的一个概念，它是一个独立的布局环境，其中的元素布局不会影响到外面的元素，也不会被外面的元素所影响。通过触发父元素的 BFC，可以避免外边距塌陷。
给父元素设置了overflow: auto，这就触发了父元素的 BFC，使得子元素的外边距不会与父元素的外边距塌陷。除了auto，overflow:hidden等其他非visible的值也可以触发 BFC。