话不多说，继续开搞

一、实现两栏，三栏布局

两栏布局

flex：直接display：flex
float+BFC

.left{
            width: 100px;
            height: 100px;
            background-color: #000;
            float: left;
        }
        .right{
            height: 100px;
            background-color: aqua;
            overflow: hidden;
        }

三栏布局

float left+right+margin：content容器放最后面，然后另外两个各自左右浮动

  .left{
            width: 100px;
            height: 100px;
            background-color: gray;
            float: left;
        }
        .right{
            height: 100px;
            width: 100px;
            background-color: aqua;
            float: right;
        }
        .content{
            background-color: red;
            height: 100px;
            margin: 0 100px;
        }

全部float left + mrgin-left 负值：经典双飞翼布局，可以吧content放前面，优先加载，给content容器套一层main容器，然后全部左浮动，通过margin-left给负值来调整位置

   .left{
            width: 100px;
            height: 100px;
            background-color: #000;
            float: left;
            margin-left: -100%;
        }
        .right{
            height: 100px;
            width: 100px;
            background-color: aqua;
            float: left;
            margin-left: -100px;
        }
        .content{
            background-color: red;
            margin: 0 100px;
        }
        .main{
            width: 100%;
            float: left;
        }

flex 1：左右容器给固定宽，中间容器给flex：1，父容器display：flex
用table + table-cell：不给宽度的table-cell会自动继承父容器宽度

 .box{
      background: #eee;
      height: 200px;
      display: table;
      width: 100%;
    }
    .left, .right, .content{
      display: table-cell;
    }
    .left, .right{
      width: 100px;
      background: rgb(91, 225, 43);
    }

    .content{
      background: rgb(226, 97, 97);
    }

grid 网格 grid-template-columns: 100px auto 100px; 网格三列

二、flex弹性布局

当我们把一个盒子设置为display：flex时，我们称这个盒子为弹性布局，它内部所有的子元素会成为弹性对象，默认成为它的成员，并默认沿弹性布局主轴排列

flex-direction：column/clumn-reverse 修改主轴方向
flex-wrap:nowrap 主轴方向排不下了，是否允许换行，以哪种方式换行
flex-flow:row nowrap 上面两个属性的简写
justify-content：center 主轴居中，主轴左对齐，右对齐，两端对齐（space-between），均等对齐（space-around）
align-items：stretch（如果父容器不设高度，则占满） flex-start（开始）flex-end（末尾）center（居中）baseline（基准线）
alight-content：控制多根主轴之间的对齐方式
子元素属性
order：0 给子元素加排名，排民越靠前，排列越前
flex-grow:; 定义当前子容器的放大比例（父容器宽度大于子元素宽度之和生效）
flex-shrink 缩小已缩放值的多少倍，比如原来缩小了10px，给个2，则缩小20px，值为0则不缩放（父容器宽度小于子元素宽度之和生效）
flex：flex-grow + flex-shrink + flex-basis（固定宽度）前两个参数，只生效一个
align-self：center 允许单个项目以自己的方式对齐

三、grid网格布局

定义：一种二维布局方式，能同时处理行与列，用横纵相交的网格线将一个页面划分成多个区域，并定义各区域的大小位置，层次

容器属性

grid-template-columns：x x x 分多少列，每列多宽 repeat(5,200px) repeat(auto-fill,200px) repeat(auto-fill,200px) 按比例 1fr
grid-template-rows: y y 分多少行，每行多高
grid-template-areas：'a b c d e f h i j'给单元格取名
grid-auto-flow：column/row 先排满column，再排row
align-items: 垂直对齐
justify-item: 主轴对齐
justify-content content居中
align-centent:
grid-row-gap 行间距
grid-colums-gap 列间距
grid-gap：x y 行列间距

项目属性

grid-colunm-start 开始
grid-colunm-end 结束
justify-self 以自身为基准对齐

三、CSS新增新特性

选择器

属性选择器
伪类选择器
:first-of-type(父级第一个元素)
:nth-child()

样式

border-radius
box-shadow
border-image
background-size
background-clip 确定背景画图的区域
word-wrap
text-shadow

动画

transition
transform
animation
渐变

四、CSS3中的动画

平移，旋转，缩放，渐变

transition：属性名过渡时间速度曲线延迟触发时间给属性的变化施加一个过渡时间，从而形成了动画
transform：转变动画，平移，旋转，缩放，倾斜时的变化所形成的一个动画
animation 播放一个已经写好了的动画。并设置其播放时长，变化率等

五、回流和重绘

定义

回流：当页面文档流的布局发送变化时，浏览器需要重新计算页面布局并重新排列
重绘：浏览器需要重新绘制页面容器的非几何属性

触发

回流：首次刷新，增删DOM元素，DOM的几何属性发生变化，浏览器窗口发生变化、offset...、scroll...、client
重绘：颜色修改，文本方向修改，阴影变化
浏览器的优化机制
浏览器中维护了一个优化队列，每当有回流操作，则加入队列，队列满则进行一次重排

如何减少

对一个DOM结构做多次操作时，先将该dom结构脱离文档流，修改完成后再放回文档流
尽量少用table布局，table中每个元素的修改都会导致整个table的重新计算
用js向文档流中插入节点，可以使用DocumentFragment(虚拟文档片段)

六、响应式布局

定义:网站的布局随着设备屏幕的变化而自适应

实现：

百分比单位
使用相对单位 rem
媒体查询 @media screen and (min-width:800px) and (max-width:1000px){}
vw/vh

七、如果要做优化，css中可以有哪些优化手段？

异步加载css代码
资源压缩
合理使用选择器
减少@import url()的使用

八、实现单行/多行文本溢出省略号

单行:

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

多行：

      overflow：hidden
     -webkit-line-clamp:行数
     -webkit-box-orient：vertical

九、零零碎碎

css实现视差滚动

使用background-attachment：fixed属性

画三角形

用border去画

实现小于12px的字体

使用transform缩小
zoom:0.5焦点放大

css的预编语言

有哪些 less，styles，sass
优点
定义公共变量
有作用域
代码混合、嵌套、模块化

CSS基础？轻松搞定！第二弹~

话不多说，继续开搞

一、实现两栏，三栏布局

二、flex弹性布局

三、CSS新增新特性

四、CSS3中的动画

五、回流和重绘

六、响应式布局

七、如果要做优化，css中可以有哪些优化手段？

八、实现单行/多行文本溢出省略号

九、零零碎碎