文章目录

前言一、什么是文档流二、盒子模型三、盒子的水平布局四、盒子的垂直布局五、盒子的垂直外边距重叠总结

前言

本文主要介绍CSS中的盒子模型，以及盒子的水平与垂直布局等相关知识点，感兴趣的小伙伴可以驻足阅读一下~

一、什么是文档流

1.1文档流

最底下的一层是文档流，文档流是网页的基础，所创建的元素默认都是在文档流中进行排列。

1.2元素在文档流中的两个状态

元素在文档流中的特点：

1.对于块元素 块元素会在页面中独占一行（自上向下垂直排列）默认宽度是父元素的全部（会把父元素撑满）默认高度是被内容撑开（子元素） 2.对于行内元素 行内元素不会独占页面的一行，只占自身的大小行内元素在页面中自左向右水平排列，如果一行之中不能占满，则元素会换到第二行继续自左向右排列，默认高度与宽度都是被内容撑开

元素不在文档流中的特点：可以这样理解当元素脱离文档流之后，就不再区分块元素和行内元素。

二、盒子模型

盒子都由以下几个部分组成： 内容区（content）内边距（padding）边框（border）外边距（margin）

2.1内容区（content）

元素中的所有的子元素和文本内容都在内容区中排列，内容区的大小是由width（内容区的宽度）,height（内容区的高度）两个属相来设置

2.2边框(border)

属于盒子边缘，边框里边属于盒子内容，出了边框都是盒子的外部，边框的大小会影响到整个盒子的大小， 边框的宽度 border-width(border-width 如果不写，也会有一个默认值，3个像素)边框的颜色 border-color边框的样式 border-style（粗细）border-style：solid(实线 ） (三者缺一不可)值的情况四个值 上、右、下、左 三个值：上、 左右、下 两个值：上下、左右 一个值：上下左右 除了border-width 还有一个border-xxx-width xxx可以是top,left,right,bottom 例如:border-top-width用来单独指定某一个边的宽度border-color边框颜色 :用来设置边框的颜色值的情况和width相同border-style边框样式solid表示实线 dotted点状实线 dashed虚线 double双线 默认值是none ,表示没有边框border简写形式：通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求，例如 border: 10px red solid;border也有四个border-xxx top,right,bottom,left

2.3内边距(padding)

内容区和边框之间的距离是内边距，一共有四个方向的内边距 padding-top padding-right -padding-bottom padding-left 内边框的设置会影响到盒子的大 小，背景颜色会延伸到内边框上 盒子的可见框大小，由内容区、 内边距 、 边框 共同决定 所以在计算盒子大小，需要将这三个区域加到一起计算 padding简写属性 ，可以同时指定四个方向的内边距，规则和border-width一样(值的情况) padding:10px,20px,30px,40px;

2.4外边距(margin)

外边距不会影响盒子可见框的大小，但是外边距会影响盒子的位置，一共有四个方向的外边距： margin-top 上外边距,设置一个正值，元素会向下移动,负值则会向上移动margin-bottom 下外边距,设置一个正值，其下边的元素会向下移动，负值，下边的元素会向上移动margin-left 左外边距，设置一个正值，元素会向右移动，负值，元素会向左移动margin-right 右外边距，默认情况下，设置margin-right 不会产生任何效果 元素在页面中是按照自左向右的顺序排列的，所以默认情况下如果我们设置的左和上外边距则会移动元素自身，而设置下和右外边距会移动其他元素margin的简写属性：margin可以同时设置四个方向的外边距，用法和padding一样

三、盒子的水平布局

元素的水平方向的布局，元素在其父元素中水平方向的位置由以下几个元素决定margin-left border-left padding-left width padding-right border-right margin-right公式——这7个值相加的和=父元素内容区的宽度（必须成立）相加结果不等，则为过度约束，则等式自动调整 如果这7个值中没有为auto的情况，则浏览器自动调整margin-right以使等式成立 若子元素的宽度，超过父元素的宽度，则将margin-right设为负值，使等式成立——加上一个负值相当于没有加 7个值中3个值可设为auto 包括：width margin(margin-left margin-right) 如果某个值为auto,则会自动调整设为auto的那个值使等式成立 如果将一个宽度和外边距设为auto，则宽度会调整到最大，auto的外边距则自动为0 这三个值都为auto,则外边距都为0，宽度最大 两个外边距设为auto,宽度为固定值，则两个外边距自动设置为相同的值，这个方法可使一个元素在父元素中居中，例如 width:xxxxpx; margin:0 auto;（margin值得情况，两个值时为——上下，左右）

四、盒子的垂直布局

子元素在父元素的内容区中排列时，如果子元素的大小超过了父元素，则子元素会从父元素中溢出， 使用overflow属性来设置父元素如何处理溢出的子元素可选值:visible 默认值，子元素会从父元素中溢出，在父元素外部的位置显示hidden 溢出内容将会裁剪不会显示scroll 生成两个滚动条，通过滚动条来查看完整的内容overflow-x(水平滚动条) overflow-y（垂直滚动条）若只设置了一边的滚动条，但另一边无法自动显示时，也会自动生成，依据事实情况显示auto 根据需要生成滚动条

五、垂直外边距的重叠（折叠）

5.1什么是外边距重叠现象？

相邻的垂直方向外边距会发生重叠现象兄弟元素（在开发中，兄弟元素的外边距重叠是好的，无需处理） ————兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值） 特殊情况： 如果相邻的外边距一正一负，则取两者的和； 如果相邻的外边距都是负值，则取两者中绝对值较大的父子元素（父子外边距的折叠会影响到页面的布局，必须要处理） 父子元素间的相邻外边距，子元素的会传递给父元素（上外边距）

5.2解决外边距重叠的方法：

1.使它们不相邻 给父元素开启 padding-top:xxxpx; 同时修改父元素的高度 2.使用伪类解决，例如

.box1::before, .box1::after{content:''; clear:both; display:table; }

总结

以上就是今天所要分享的内容，知识点有些多，但都是在布局中经常会使用到的，希望可以帮助到你，另外，依旧祝福看到这篇文章的朋友健康喜乐，拜~