1. 盒模型

css盒模型
CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。
元素的总宽度应该这样计算：
元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
元素的总高度应该这样计算：
元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距
document.getElementById("box").offsetWidth

    <style>
         .box{
             height: 200px;
             padding: 10px;
             border: 1px solid #ccc;
             margin: 10px;
             box-sizing: border-box;
             /* box-sizing: content-box;默认值 */
         }
        
     </style>
     <div id="box">
        盒模型
     </div>

2.BFC

BFC
BFC(Block formatting context 块级格式上下文)，会形成独立的渲染区域，内部元素的渲染不会影响外界
形成BFC的条件：
-浮动元素：float不是none
-绝对定位元素： position 是absolute或者fixed
-块级元素：overflow不是visible
-flex元素
-inline-block元素
应用场景：清除浮动等

      <!-- BFC -->
       <style>
         .container{
             background-color: #ccc;
         }
         .container div{
             float: left;
             width: 300px;
             height: 53px;
             border: 1px solid #000;
         }
         .bfc{
             overflow: hidden;
         }
     </style>
      <div class="container bfc">
         <div>过来的</div>
         <p class="bfc" style="border: 1px solid red;">友谊富家大室</p>
      </div>

3.圣杯布局

圣杯布局、双飞翼布局（一般用于PC端网页布局）
目的：两侧内容宽度固定，中间内容宽度自适应；
三栏布局，中间一栏最先加载、渲染出来（主要内容）
实现方法：float + margin
两者的不同：左右盒子外边距的设置以及dom结构的布局

##圣杯布局
   <style>
       #header{
           background-color: #f1f1f1;
           text-align: center;
       }
       #content{
           padding-left: 300px;
           padding-right: 200px;
       }
       #content #center{
           background-color: #ddd;
           width: 100%;
       }
       #content #left{
           position: relative;
           background-color: orange;
           width: 300px;
           margin-left: -100%;
           right: 300px;
       }
       #content #right{
           background-color: green;
           width: 200px;
           margin-right: -200px;
       }
       #content .column{
           float: left;
      }
       #footer{
           background-color: #f1f1f1;
           clear: both;
           text-align: center;
       }

     
   </style>
   <h1>实现圣杯布局</h1>
   <div id="header">header</div>
   <div id="content">
      <div id="center" class="column">center</div>
      <div id="left" class="column">left</div>
      <div id="right" class="column">right</div>
   </div>
   <div id="footer">footer</div>

## 双飞翼布局
     <style>
        #main{
            background-color: #ddd;  
            width: 100%;
         }
         #main #main-wrapper{
             margin-left: 100px;
             margin-right: 50px;
         }
         #main-box #left{
             background-color: orange;
             width: 100px;
             margin-left: -100%;
         }
         #main-box #right{
             background-color: green;
             width: 50px;
             margin-left: -50px;
         }
         .column2{
             float: left;
         }
     </style>
       <h1>双飞翼布局</h1>
      <div id="main" class="column2">
           <div id="main-wrapper">main </div>
       </div>
       <div id="left" class="column2">left</div>
       <div id="right" class="column2">right</div>

4. flex布局

flex 布局
父级容器相关：
flex-direction 主轴方向（水平方向、垂直方向）
justify-content 主轴上的对齐方式（开始对齐、结束对齐、居中对齐、两端对齐）
align-items 交叉轴上的对齐（开始对齐、结束对齐、居中对齐）
flex-wrap 是否换行
子元素相关：
align-self 子元素在交叉轴上的对齐方式（开始对齐、结束对齐、居中对齐），
可以覆盖align-items 属性

    <style>
        .box {
            display: flex;
            justify-content: space-between;
            /*水平方向*/
            width: 150px;
            height: 150px;
            border: 1px solid #ccc;
            padding: 15px;
            box-sizing: border-box;
            border-radius: 10px;
        }

        .item {
            display: block;
            width: 20px;
            height: 20px;
            background-color: #666;
            border-radius: 50%;
        }

        .item:nth-child(2) {
            /*第二个圆点垂直居中对齐*/
            align-self: center;
        }

        .item:nth-child(3) {
            align-self: flex-end;
        }
    </style>

    <h1>flex布局</h1>
    <div class="box">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>

html语义化的好处：提高代码可读性，让搜索引擎优化的爬虫程序更容易理解代码；
块级元素：独占一行(displa:blcok/table),div/hx/p/address/ul/ol/li/dl/dt/dd/table/form/fieldset/legend；
内联元素：不会独占一行，会紧跟排列，直到没有足够的空间(displa:inline/inline-block),span/strong/em/del/ins/label/a/sub/sup
内联块元素：input/img/select/textarea/iframe