页面布局与css盒子模型

六大方向：
页面布局
css盒模型
DOM事件
HTTP协议
面向对象
原型链

难度提升：通信，安全（web安全，xss），算法

页面布局：

浮动，定位，flexBox , table-cell, 网格布局（grid）【兼容性不好】
关于浮动和定位很简单，就不写了。
html结构:

<section class="layout flex">
        <div class="left">左边</div>
        <div class="center">flex
            <p>内容加长以后是否依然适用</p>
            <p>内容加长以后是否依然适用</p>
            <p>内容加长以后是否依然适用</p>
            <p>内容加长以后是否依然适用</p></div>
        <div class="right">右边</div>
    </section>

统一css样式：

.layout{
    width: 100%;
    //min-width: 1000px;
    height: 100px;
    background-color: orange;
    margin: 20px 0;
    .left{
      width: 200px;
      height: 100%;
      background-color: skyblue;
    }
    .right{
      width: 200px;
      height: 100%;
      background-color: pink;
    }
    .center{
      height: 100%;
      background-color: palegoldenrod;
    }
  }

flex布局：

.flex{
    display: flex;
    .center{
      flex: 1;
    }
  }

table的方式也特别简单，就是设置容器与子容器的display方式
分别为table和table-cell就好

grid布局：

.grid{
    display: grid;
    grid-template-columns: 200px auto 200px;
    grid-template-rows: 100px;
  }

注释：   grid-template-columns:有几列就定义多少个列宽
        grid-template-rows: 有几行就定义几行的行高

盒子模型

    box-sizing:border-box;
        包含内边距，以及border宽高
    box-sizing:content-box;
    宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。