• 水平布局与垂直布局（外边距折叠）

    一、水平布局

    1、布局规则（此布局规则基于父子嵌套样式）

    内盒子模型整体 = 外盒子模型内容（content）

    即：

    （内）margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = （外）width

    2、特殊规则

    （1）当左边的大小不等于右边大小时，会默认修改margin-right进行填充

    （2）当（内）width设置为auto时，width默认为最大

    （3）当有margin-left或靠左边的设置为auto时，会优先填充该选项

    （3）当有靠左一边的样式（例如margin-left）和width同时设置为auto时，width默认最大，另一个auto会设置为0

    （4）当两边的样式（例如margin-left和margin-right）和width同时设置为auto时，width将会居中，两边的样式大小相同

    二、垂直布局

    1、规则

    垂直布局不会出现强制匹配的情况，设置多少就是多少，可以超出也可以不足

    2、溢出处理

    （1）当子样式height超过父样式height时，为了美观，我们对溢出进行处理

    （2）在子样式中加入overflow属性

    （3）overfl有auto、hidden、scroll三个值，第一个是自适应，第二个是裁剪隐藏，第三个是滚动条，多用auto

    三、外边距折叠（margin）

    1、外边距折叠情况

    多见于一个盒子加下边距，一个盒子加上边距，则为了节省空缺，只会加上一个边距，也会出现在父子盒子之中

    2、兄弟盒子边距折叠规则

    （1）两边距符号相同，取绝对值最大

    （2）两边距符号不同，取和

    3、父子盒子边距折叠规则

    子影响父

    4、父子盒子边距影响解决方案

    不适用外边距，使用padding控制子盒子在父盒子中的位置，缺点，需要修改height

    四、代码实例

    1、水平布局

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <title>水平布局title>
    6.         <style>
    7.             #box1{
    8.                 border: red solid 5px;
    9.                 height: 100px;
    10.                 width: 1000px;
    11.             }
    12.             #inner{
    13.                 background-color: #bfa;
    14.                 width: 200px;
    15.                 margin-left: auto;
    16.                 margin-right: auto;
    17.                 height: 100%;
    18.             }
    19.  
    20.  
    21.             #box2{
    22.                 border: red solid 5px;
    23.                 height: 100px;
    24.                 width: 1000px;
    25.             }
    26.             #outer{
    27.                 background-color: #bfa;
    28.                 width: 1100px;
    29.                 margin-left: auto;
    30.                 margin-right: auto;
    31.                 height: 100%;
    32.             }
    33.  
    34.         style>
    35.     head>
    36.     <body>
    37.         <div id="box1">
    38.             <div id="inner">
    39.                 我是内部的div
    40.             div>
    41.         div>
    42.  
    43.         <div id="box2">
    44.             
    45.             <div id="outer">
    46.                 我是第二个div内部的div
    47.             div>
    48.  
    49.  
    50.         div>
    51.  
    52.     body>
    53. html>

    2、垂直布局

    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>垂直布局title>
    8.     <style>
    9.         #box1{
    10.             background-color: #bfa;
    11.             height: 200px;
    12.             width: 400px;
    13.         }
    14.         #box2{
    15.             height: 200px;
    16.             width: 100%;
    17.             overflow: auto;
    18.             /* overflow-x: scroll;
    19.             overflow-y: scroll; */
    20.             /* overflow: hidden; */
    21.             font-size: 40px;
    22.         }
    23.     style>
    24. head>
    25. <body>
    26.     <div id="box1">
    27.         <div id="box2">
    28.             Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae odit in illum dolorum neque error maxime alias dolore quasi praesentium deserunt a esse est, vero aliquam adipisci? Quod, exercitationem est?
    29.             Lorem, ipsum dolor sit amet consectetur adipisicing elit. Recusandae doloremque consequuntur cupiditate odio aspernatur quia nulla deserunt voluptate perspiciatis mollitia corrupti ullam temporibus animi porro ut, neque natus ex provident.
    30.             Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem magni animi accusantium necessitatibus aut quibusdam reprehenderit repudiandae quia harum quam quas blanditiis, obcaecati labore voluptates eaque. Consequuntur porro velit assumenda.
    31.         div>
    32.  
    33.     div>
    34. body>
    35. html>

    3、外边距折叠

    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>外边距的折叠title>
    8.     <style>
    9.         #box1,#box2{
    10.             background-color: #bfa;
    11.             width: 100px;
    12.             height: 100px;
    13.             
    14.         }
    15.         #box1{
    16.             margin-bottom: 100px;
    17.         }
    18.         #box2{
    19.             margin-top: 100px;
    20.             margin-bottom: 100px;
    21.         }
    22.         #box3{
    23.             background-color: red;
    24.             width: 100px;
    25.             height: 50px;
    26.             padding-top: 50px;
    27.         }
    28.         #box4{
    29.             background-color: orange;
    30.             width: 50px;
    31.             height: 50px;
    32.         }
    33.     style>
    34. head>
    35. <body>
    36.     <div id="box1">div>
    37.     <div id="box2">div>
    38.  
    39.     <div id="box3">
    40.         <div id="box4">div>
    41.     div>
    42. body>
    43. html>

  • 相关阅读:
    Python爬虫入门教程之快速理解HTTP协议
    简析DNS攻击的常见类型、危害与防护建议
    FreeRTOS入门教程（空闲任务和钩子函数及任务调度算法）
    【我的前端】面向 JavaScript 开发：前端必学的4种函数式编程技术
    01_中间件
    队栈
    中国家电市场深度调查研究报告
    用于一型糖尿病血糖调节的无模型iPID控制器
    计算机毕业设计 高校普法系统的设计与实现 Java实战项目 附源码+文档+视频讲解
    每日一题： leetcode1726 同积元组
  • 原文地址：https://blog.csdn.net/comegoing_xin_lv/article/details/125901077