关于盒子模型的不是笔记的笔记

盒子模型，css将页面所有的元素设置成一个矩形的盒子，对页面的布局就变成将不同的盒子摆放到不同的位置

盒子的组成

  1. 内容区（content）
  2. 内边距（padding）
  3. 边框（border）
  4. 外边距（margin）

前三者决定了一个盒子的大小，最后一个决定了盒子与盒子之间的位置距离

盒子的水平布局

元素的水平方向的布局：

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

    1. margin-left
    2. border-left
    3. padding-left
    4. width
    5. padding-right
    6. border-right
    7. margin-right

  • 一个元素在其父元素中，水平布局必须满足（若不满足则称为过度约束）：（上述七个属性之和=父元素内容区的宽度）

    • 如果不满足，浏览器会自动调整margin-right的值使等式成立
    • 若七个属性中有设置auto值，浏览器会自动调整auto的值使等式成立

盒子的垂直布局

相邻的盒子的垂直外边距会发生折叠（块内元素）

  • 兄弟元素

    • 两者外边距都是正值会取较大值
    • 一正一负，取两者和
    • 都是负值，取绝对值大的

  • 父子元素

    • 父子元素相邻外边距，子元素的会传递给父元素
    • 父元素的外边距的折叠会影响到页面的布局

行内元素：

  1. 行内元素不支持设置宽度和高度
  2. 行内元素可以设置padding、border、margin，但是在垂直方向上都不会影响布局

盒子大小

默认情况下，盒子可见框的大小由内容区，内边距和边框共同决定

  • box-sizing用来设置盒子尺寸的计算方式（设置width和height的作用）

    可选值：

    1. content-box：这是默认值，此时的width和height设置的是内容区的大小
    2. border-box：此时的width和height设置的整个盒子的可见大小

盒子的阴影效果

box-shadow：10px 10px 50px rgba(0,0,0,0.3);

表示该阴影向左向下偏移10px，模糊半径为50px，需要注意的是rgba里面最后一个之表示的是阴影的透明度

盒子浮动

通过浮动可以使一个元素向其父元素的左侧或者右侧移动

  • 使用float属性来设置

浮动特点：

  1. 浮动元素会脱离文档流，不再占据文档流的位置
  2. 浮动元素不会从父元素中移出
  3. 浮动元素向左或向右移动，不会超出它前边的其他浮动元素
  4. 如果浮动元素的上边是一个没有浮动的元素，则浮动元素无法上移
  5. 浮动元素不会超过它上边的兄弟元素，最多和它一样高

其他特点：

  1. 文字环绕

  2. 脱离文档流

    • 块元素

      1. 不再独占页面一行
      2. 宽度和高度默认都按内容撑开

    • 行内元素

      1. 会变成块元素

盒子盖度塌陷

发生原因：当父元素宽高未被写死，内部元素设置为float后无法撑起父元素的高度

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        #box1{
        border: red 10px solid;
        }
        #box2{
            width: 600px;
            height: 300px;
            background-color: #008000;
            float: left;
        }
        #box3{
            clear: both;
        }
        #box1::after{
            clear: both;
            display: block;
            content: "";
        }
        </style>
    </head>
    <body>
        <div id="box1">
            <div id="box2"></div>
            <!-- <div id="box3"></div> -->
        </div>
    </body>
</html>

***解决方法

.clearfix::after
        {
            content: "";
            display: block;
            clear: both;
        }
赏