三、CSS布局

常用布局方法

• table表格布局
• float浮动+margin
• inline-block布局
• flexbox布局

表格布局

设定元素 display:table,display:table-row,display:table-cell,可模拟出表格的行和单元

盒模型

设定的宽度和高度只对content生效，盒子占用的空间是margin+border+padding+content

display/position

• 确定元素的显示类型
  • block 有独立宽高。默认占据一行
  • inline 像文本一样，不会有独立宽高
  • inline-block 对外inline,对内block,可以设置宽高，但是和别人在一行，可以通过vertical-align修改和别人的对齐方式
• 确定元素的位置
  • static 按照文档流布局
  • relative 相对定位，偏移相对元素本身，不会改变占据的空间
  • absolute 绝对定位，脱离文档流，它相对于最近的absolute/relative进行定位
  • fixed 相对于可视区域固定
• 层叠
  • 默认按照先后顺序层叠
  • z-index设置层叠（定位为absolute/relative/fixed可设置，值越大，越在上，用于遮罩等）

flexbox布局

• 弹性盒子
• 盒子本身就是并列的
• 指定宽度即可

float布局

• 元素浮动，脱离文档流，但不脱离文字流(如图所示，两个元素重叠，但是文字不会占据float的元素位置---形成文字环绕效果)

  
  

• 对自身的影响

  • 形成块（BFC）---行内元素也会变得可以设置宽高
  • 位置尽量靠上
  • 位置尽量靠左（float:left）
  • 宽度足够尽量往左，不够就会往下掉

• 对兄弟的影响

  • 上面贴非float元素
  • 旁边帖float元素
  • 不影响其他块级元素位置
  • 影响其他块级元素内部文本

• 对父级元素的影响

  • 从布局上"消失"

  • 高度塌陷

    • 父元素加over-flow:auto/hidden
    • 通过父元素增加after伪元素

    container::after{
        content:'';
        display:block;
        visibility:hidden;
        clear:both
    }
    

• float两列/三列布局

// 两栏布局
.left{
    width:200px;
    float:left;
    height:800px
}
.right{
    width:100%
    heigth:800px;
    margin-left:200px
}

// 三栏布局
.left{
    width:200px;
    float:left;
    height:800px
}
.right{
    width:200px
    heigth:800px;
    margin-left:200px
}
.middle{
    width:100px;
    margin-left:200px;
    margin-right:200px;
    heigth:800px
}
//浮动先行
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>

inline-block布局

• 像文本一样排列block
• 没有清除浮动等问题
• 需要处理间隙（因为对外inline,就像文字，文字和文字之间就会有间隙）

解决方案

1. 父元素font-size设置为0，子元素重新设置font-size

.container{
    width:800px;
    height:200px;
    font-size:0;
}
.left{
    font-size:14px;
    background:red;
    display: inline-block;
    width:200px;
    height:200px;
}
.right{
    font-size:14px;
    background:blue;
    display: inline-block;
    width:600px;
    height:200px;
}
<div class="container">
    <div class="left">
        左
    </div>
    <div class="right">
        右
    </div>
</div>

2.子元素不加空白

<div class="container">
    <div class="left">
        左
    </div><div class="right">// 重点
        右
    </div>
</div>

响应式布局和设计

• 在不同设备上正常使用
• 一般主要处理屏幕大小问题
• 主要方法
  • 隐藏+折行+自适应空间（pc上广告栏侧边栏在手机端隐藏；折行就是pc里面一行内容，在移动端分多行）
  • rem
  • viewport
  • media query

// 第一步
<meta name="viewport" content="width=device-width, initial-scale=1.0">

// 媒体查询
@media (max-width: 640px){
    .left{
        display: none;
    }
}

// rem单位,一个rem等于设置的font-size的值
// 通过媒体查询对不同大小屏幕设定不同html的font-size值
html{
    font-size: 20px;// 1rem
}
// 范围大的放在上面
@media (max-width: 375px){
    html{
        font-size:24px;
    }
}
@media (max-width: 320px){
    html{
        font-size:20px;
    }
}