CSS——盒子模型以及盒子的水平、垂直布局

文章目录

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

---

前言

           本文主要介绍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个值相加的和=父元素内容区的宽度（必须成立）     

相加结果不等，则为过度约束，则等式自动调整

1. 如果这7个值中没有为auto 的情况，则浏览器自动调整margin-right 以使等式成立 
2. 若子元素的宽度，超过父元素的宽度，则将margin-right设为负值，使等式成立——加上一个负值相当于没有加
3. 7个值中3个值可设为auto    包括：width    margin(margin-left   margin-right)
4. 如果某个值为auto,则会自动调整设为auto的那个值使等式成立
5. 如果将一个宽度和外边距设为auto，则宽度会调整到最大，auto的外边距则自动为0
6. 这三个值都为auto,则外边距都为0，宽度最大
7. 两个外边距设为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;

        }

---

总结

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