持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天，点击查看活动详情。

CSS中间宽度自适应布局

浮动布局

通过HTML的 float 属性显示浮动是将该块元素从原来的文档流中分离出来，他后面的对象，视它不存在，从而占领他的位置 元素浮动，脱离文档流，但不脱离文本流 不影响其他块级元素的位置、影响其他块级元素的内部文本从父级的布局中”消失“，造成父级元素的高度塌陷
CSS的定位，利用CSS的定位机制，建立各种页面的布局结构

两侧固定中间自适应布局

flex布局 父盒子设置 display：flex；左右盒子设置固定宽高、中间盒子设置 flex：1；
绝对定位布局 父盒子相对定位，子盒子绝对定位，左右盒子分别设置top、left 为 0和 top、right 为 0，中间设置margin为0 和左右盒子宽
父盒子设置左右padding值，给左右盒子的width 设置为父盒子的padding值，分别定位到padding 处，中间盒子自适应
Table 布局 父盒子设置 display：table；子盒子设置 display：table-cell；左右盒子设置固定宽度，中间自适应

BFC块级格式化上下文 左右固定宽高，进行浮动；中间 overflow：hidden(right 和 left 必须放在center 前面)

让一个块级元素居中 绝对定位 + (margin) / translate 、flex布局、flex布局 + margin:auto;

盒子水平居中 父盒子利用 display: flex；父盒子利用 display：table-cell；利用定位利用 transfrom 利用 margin：auto

让flex盒子中的子元素们，居中

flex布局常用的三行代码：

    display: flex;
    justify-content: center; // 子元素在横轴的对齐方式 （左右居中）
    align-items: center;  // 子元素在竖轴的对齐方式（上下居中）

只显示一行文字

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

只显示两行文字

    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;

CSS学习笔记(捌)