• CSS - 盒子模型

    目录

    CSS盒子模型

    盒子模型

    content

    padding

    padding使用注意点

    padding妙用

    border

    border使用注意

    border妙用：生成三角

    margin

    margin使用注意

    margin: 0 auto 使块级元素水平居中

    margin: auto 0 为什么不能用于块级元素垂直居中

    相邻、嵌套盒子水平方向margin的表现

    相邻、嵌套块级元素垂直方向margin合并问题，及解决方案

    BFC简介

    margin负值的妙用

    CSS盒子模型

    盒子模型

    CSS将所有的元素都看成一个盒子，盒子组成包括：

    • content：内容区
    • padding：内边距
    • border：边框线
    • margin：外边距

    content

    CSS有两类盒子，分别是：

    • CSS2的content-box，也是元素默认的盒子模型
    • CSS3的border-box，可以通过元素box-sizing样式设置为border-box将元素盒子转为border-box

    二者区别在于：

    • content-box元素的width、height就是盒子content内容区的宽高

    • border-box元素的width、height是盒子border以内（包括border自身）区域的宽高

    所以border-box盒子内容区的

    宽度为：

    content-width = width - padding-left - padding-right - border-left - border-right

    高度为：

    content-height = height - padding-top - padding-bottom - border-top - border-bottom

    padding

    padding指的是元素的内边距，所谓内边距，即元素盒子的content内容区 和 border边框线之间的距离。

    padding有四个方向上的距离，分别是padding-left，padding-right，padding-top，padding-bottom，我们可以分别设置它们

    也可以使用复合写法：padding：上 右 下 左 

    padding使用注意点

    块级元素、行内块元素，行内元素都支持四个方向上的padding设置。

    对于content-box而言，padding会撑开盒子 ，内容区不变

    对于border-box而言，padding不会撑开盒子，但相应的内容区变小

    padding妙用

    对于多组，文字内容长度不定的，盒子而言，我们可以将其定义为content-box，利用padding来撑开盒子，而不是找出最大宽度

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>Documenttitle>
    8.     <style>
    9.       ul {
    10.         list-style: none;
    11.         border-bottom: 1px solid #000;
    12.         cursor: pointer;
    13.       }
    14.  
    15.       li {
    16.         display: inline-block;
    17.         padding: 10px;
    18.       }
    19.  
    20.       li:hover {
    21.         background-color: #eee;
    22.       }
    23.     style>
    24.   head>
    25.   <body>
    26.     <ul>
    27.       <li>首页li>
    28.       <li>手机帅哥网li>
    29.       <li>移动客户端li>
    30.       <li>博客li>
    31.       <li>微博li>
    32.       <li>关注我li>
    33.     ul>
    34.   body>
    35. html>

    border

    border指的是元素的边框线，border是盒子模型中margin和padding的分界线。

    border分别有四个方向的距离：border-left、border-right 、border-top 、border-bottom

    我们可以分别设置它们 

    也可以使用复合写法

    只是此时只能设置上右下左边框线等宽，因为要兼顾边框线样式和颜色属性设置。

    border使用注意

    块级元素、行内块元素、行内元素都支持设置四个方向的border。

    对于content-box而言，border会撑开盒子

    对于border-box而言，border不会撑开盒子

    border妙用：生成三角

    上下左右四个border其实互相之间由交叉区域，就是四个直角的区域，为了保证公平分配，哪个border越宽，则在直角区域占比越大，如上图。

    所以理论上来说，

    • 如果相邻border宽度相同，则会在直角区域产生一个45度的分界线 
    • 并且如果content内容宽高为0，则相邻直角区域会接触

    此时我们只要让某些border颜色变为透明，即可得到一些不同方向的三角

     

    当然我们也可以生成一些不等边三角形

     

    但是这种效果，我们发现其斜边不是顺滑的，此时我们可以使用另一种方式

     三角的应用主要有如下：

    提示框

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Documenttitle>
    8.   <style>
    9.     .main {
    10.       width: 100px;
    11.       height: 30px;
    12.       background-color: black;
    13.  
    14.       text-align: center;
    15.       line-height: 30px;
    16.       color: white;
    17.     }
    18.  
    19.     .triangle {
    20.       width: 0;
    21.       height: 0;
    22.       border-width: 5px;
    23.       border-color: black transparent transparent transparent;
    24.       border-style: solid;
    25.       margin-left: 45px;
    26.     }
    27.   style>
    28. head>
    29. <body>
    30.   <div class="main">提示框div>
    31.   <div class="triangle">
    32.   div>
    33. body>
    34. html>

    对抗三角

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>Documenttitle>
    8.     <style>
    9.       .container {
    10.         width: 180px;
    11.         height: 30px;
    12.         border: 1px solid red;
    13.       }
    14.  
    15.       .left,.right,.triangle {
    16.         display: inline-block;
    17.         vertical-align: top;
    18.         text-align: center;
    19.         line-height: 30px;
    20.       }
    21.  
    22.       .left,.right {
    23.         width: 80px;
    24.         height: 30px;
    25.       }
    26.  
    27.       .left {
    28.         background-color: red;
    29.         color: white;
    30.       }
    31.  
    32.       .right {
    33.         color: gray;
    34.       }
    35.  
    36.       .triangle {
    37.         width: 0;
    38.         height: 0;
    39.         border-width: 30px 20px 0 0;
    40.         border-style: solid;
    41.         border-color: red transparent transparent transparent;
    42.       }
    43.     style>
    44.   head>
    45.   <body>
    46.     <div class="container">
    47.       <div class="left"><strong>$9.99strong>div><div class="triangle">div><div class="right"><del>$39.9del>div>
    48.     div>
    49.   body>
    50. html>

    margin

    margin是盒子模型中的外边距，所谓外边距，即相对于自身盒子border的距离

    margin也分为四个方向上的距离：margin-left、margin-right、margin-top、margin-bottom

    我们可以分别设置它们，也可以使用复合写法：margin: 上 右 下 左

    margin使用注意

    • 块级元素、行内块元素支持四个方向的margin设置，但是行内元素只支持左右margin、不支持上下margin。
    • margin不会撑开盒子，无论是content-box还是border-box。
    • 当margin-xxx增大时，盒子会表现为沿xxx方向反向移动，当margin-xxx减少时，盒子会表现为沿xxx方向正向移动。
    • margin和content、padding、border最大的区别在于，margin可以是负数

    margin: 0 auto 使块级元素水平居中

    我们知道块级元素会独占一行，无论块级元素的宽度是否能够独占一行

     本质上，块级元素无法占据的行的剩余宽度部分，都是被块级元素的margin占据的。

    所以如果我们想要让块级元素水平居中的话，只要让块级元素的左右margin平均占据行的剩余宽度即可。

    如果行宽值确定，则可以margin-left = margin-right = (行宽度 - 块级元素自身宽度) / 2

    如果行宽值不确定，则可以让margin-left = margin-right = auto，让他们自动平分 (行宽度 - 块级元素自身宽度)

     当然，auto也适用于行宽确定的情况。 

    margin还支持复合写法：

    • margin：上  右  下  左
    • margin：上下  左右

    margin: auto 0 为什么不能用于块级元素垂直居中

    因为块级元素的特性：只有独占一行，没有独占一列的说法。

    为了保证块级元素能独占一行，块级元素的margin-left、margin-right会占据行的剩余宽度。

    而块级元素不会独占一列，所以对于块级元素来说，在垂直方向上不存在剩余高度的概念，所以也就不会有margin-top、margin-bottom占据剩余高度的情况。

    所以margin: auto 0 无法使块级元素垂直居中。

    相邻、嵌套盒子水平方向margin的表现

    可以发现，相邻、嵌套盒子之间水平方向的margin是互斥的，非侵入的。 

    相邻、嵌套块级元素垂直方向margin合并问题，及解决方案

    相邻块级元素垂直方向margin合并现象 

    如果相邻的块级元素A、B中，上面的A块级元素有margin-bottom，下面的B块级元素有margin-top，则两个块级元素的垂直margin间距并非 A.margin-bottom + B.margin-top的和，而是取max(A.margin-bottom，B.margin-top)最大值。

    嵌套块级元素垂直方向margin合并现象

     当父子块级元素都有margin-top时，则子块级元素的margin-top会塌陷到父级元素外部

    而父块级元素会以父子中最大的margin-top作为自身外间距。

    可以总结出，相邻、嵌套的元素间垂直方向margin是侵入性的，即垂直方向margin会发生合并，导致margin塌陷问题。

    相邻块级元素垂直方向margin合并问题 解决方案：

    尽量只给一个块级元素指定垂直方向margin，不要出现相邻块级元素分别指定margin-bottom，margin-top的情况。

    嵌套块级元素垂直方向margin合并问题 解决方案：

     父级元素添加border-top

    这种方案会增加无意义的边框线，不是最优解，只适合父级有边框线场景。 

     父级元素添加padding-top 

    这种方案会增加无意义的内边距，不是最优解，只适合父级有内边距的情况。 

    将父级元素变为BFC容器，如给父级元素设置overflow: auto/hidden/scroll

     这种方案目前来看兼容性较好

    BFC简介

    BFC，即Block formatting context 块级格式化上下文。

    BFC可以理解为一种特殊的渲染模式。

    BFC容器的内部会形成独立的渲染区域，保护容器内部元素的渲染不会影响外界。

    而一个元素转为BFC渲染模式的方式有如下：

    • 设置float样式，float值非none，即将元素转为浮动元素
    • 设置position样式，position值为absolute或fixed，即将元素转为脱离标准流的定位元素
    • 设置display:flex，即将元素转为弹性元素
    • 针对块级元素，设置overflow样式，overflow值非visible
    • 转为行内块元素，行内块元素天生是BFC渲染模式

    由于BFC容器内部元素的渲染不会影响外界，所以BFC可以解决：

    • 嵌套块级元素margin合并（子块级的margin-top会塌陷到父级外部，影响了外界）
    • 清除浮动
    • ......

    margin负值的妙用

    我们经常需要渲染列表，并且给列表加上border边框，此时就有可能出现相邻border堆积的情况，造成视觉上，border变粗的现象。

    此时我们可以让第一个之后的列表项都margin-top:负值

    此时就会发生后面列表项的border-top压住上面一个列表项border-bottom的动作，解决border堆积变粗问题。

    margin-xxx负值表现为：元素向xxx方向正向移动

    margin负值还有一个妙用就是结合浮动，实现圣杯布局、双飞翼布局，这个妙用我们在下一个章节中介绍。

  • 相关阅读:
    如何排版一篇优秀的公众号文章呢？
    NIO学习
    Newman+Jenkins实现接口自动化测试
    STC16f40k128 使用VOFA+进行电机PID参数整定
    Vue组件自定义事件父子
    呕心整理的常用热门API大全
    【C++】C++入门
    被生活、房贷车贷压得喘不过气的35岁程序员，拿什么去谈追求~
    数据挖掘——机器学习
    CSPJ2023简析
  • 原文地址：https://blog.csdn.net/qfc_128220/article/details/125889425