css基础知识整理[CSS渲染规则+CSS小知识点]（一）只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就

一、CSS渲染规则

@ BFC块级格式化上下文

BFC块级格式化上下文 Formatting Context Formatting Context 是页面的一块渲染区域，并且有一套渲染规则，决定了其子元素将如何定位，以及和其它元素的关系和相互作用。

@ BFC （是块级元素的布局规则）

@ BFC的主要用途 BFC能用来做什么？

清除元素内部浮动只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式，对于IE6加上zoom:1就可以了。
比如增加overflow：hidden，来阻止外边距合并问题给这些元素添加如下属性就可以触发BFC。

float属性不为none position为absolute或fixed display为inline-block, table-cell, table-caption, flex, inline-flex ; overflow不为visible。

@ BFC布局规则特性：

在BFC中，盒子从顶端开始垂直地一个接一个地排列.
盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠

@ Formatting Context一共有几种：

BFC (Block formatting context) 块级元素的布局规则(包括浮动无元素、绝对定位与固定定位元素)
IFC (Inline formatting context) 行内元素的布局规则
FFC (Flex formatting context) flex元素的布局规则
GFC (Grid formatting context) grid元素的布局规则

FFC 和 GFC 为 CC3 中新增。

@ 请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。

二、CSS小知识点

2.1 @ 使用css,让一个div消失

display: none;隐藏不占位
visibility: hidden;隐藏占位
opacity: 0;
background-color:transparent;透明
transform: scale(0);缩放
定位，减低层级，遮挡起来

2.2 @ 实现水平垂直居中的方式（定宽高和不定宽高）

@@ 定宽高

1. 绝对定位和负margin值

<tempate>
    <div id="app">
        <div class="box">
            <div class="children-box"></div>
        </div>
    </div>
</template>
<style type="text/css">
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    position: relative;
}
.children-box {
    position: absolute;
    width: 100px;
    height: 100px;
    background: yellow;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px; 
}
</style>

2. 绝对定位+transform

<template>
    <div id="app">
        <div class="box">
            <div class="children-box"></div>
        </div>
    </div>
</template>
<style type="text/css">
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    position: relative;
}
.children-box {
    position: absolute;
    width: 100px;
    height: 100px;
    background: yellow;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); 
}
</style>

3. 绝对定位 + left/right/bottom/top + margin

<template>
    <div id="app">
        <div class="box">
            <div class="children-box"></div>
        </div>
    </div>
</template>
<style type="text/css">
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    position: relative;
}
.children-box {
    position: absolute;
    display: inline;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0px;
    background: yellow;
    margin: auto;
    height: 100px;
    width: 100px;
}
</style>

4. flex布局（给父元素增加flex属性）

<template>
    <div id="app">
        <div class="box">
            <div class="children-box"></div>
        </div>
    </div>
</template>
<style type="text/css">
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
}
.children-box {
    background: yellow;
    height: 100px;
    width: 100px;
}
</style>

5. grid布局（给父元素增加grid属性）

<template>
    <div id="app">
        <div class="box">
            <div class="children-box"></div>
        </div>
    </div>
</template>
<style type="text/css">
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: grid;
}
.children-box {
    width: 100px;
    height: 100px;
    background: yellow;
    margin: auto;
}</style>

@@ 不定宽高

1. 绝对定位 + transform translate

<template>
    <div id="app">
        <div class="box">
            <div class="children-box">111111</div>
        </div>
    </div>
</template>
<style type="text/css">
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    position: relative;
}
.children-box {
   position: absolute;
   background: yellow;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}
</style>

2. gird + margin布局兼容性相对比较差

<template>
    <div id="app">
        <div class="box">
            <div class="children-box">11111111</div>
        </div>
    </div>
</template>
<style type="text/css">
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: grid;
}
.children-box {
    background: yellow;
    margin: auto;
}
</style>

@内联元素居中布局

水平居中

行内元素可设置：text-align: center;
flex布局设置父元素：display: flex; justify-content: center;

垂直居中

单行文本父元素确认高度：height === line-height
多行文本父元素确认高度：disaply: table-cell; vertical-align: middle;

2.3 @介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

W3C盒模型和IE盒模型的区别

W3C盒模型:width(宽度）=content(内容宽度）；
IE盒模型:width(宽度）=padding+border(边框）+content(内容宽度）；

{box-sizing:border-box}的作用是什么呢？

box-sizing:content-box W3C盒模型；
box-sizing:border-box IE盒模型；
盒子模型基准尺寸有两种，一种是content-box，这是对于W3C盒模型尺寸计算的；另一种是border-box,这是对于IE盒模型尺寸计算的；
border-box和content-box之间的区别其实就是在于有没有包含表边框（border)和内边距（padding).

css的盒模型由content(内容)、padding(内边距)、border(边框)、margin(外边距)组成。但盒子的大小由content+padding+border这几部分决定，把margin算进去的那是盒子占据的位置，而不是盒子的大小！

2.4 @为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。
浮动带来的问题：

父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素（内联元素）会跟随其后
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

父级div定义height
最后一个浮动元素后加空div标签并添加样式clear:both。
包含浮动元素的父标签添加样式overflow为hidden或auto。
父级div定义zoom

2.5 @ ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after

2.6 @有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度

外层div使用position：relative；高度要求自适应的div使用position: absolute; top: 100px; bottom: 0; left: 0

2.7 @png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。大多数地方都可以用。
jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.
webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。

2.8 @请描述css选择器的优先级原则

总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

2.9 @实现三栏布局

实现一个三栏布局，左右固定，中间自适应

@ 2. 9.1 浮动布局

这种布局方式是利用浮动脱离文档流实现的，这里需要特别注意一下，left、right都在content前面布局，如果按照正常的顺序left-content-right，中间元素形成定位，那么就会将right顶下去。无法实现三栏布局。

浮动元素特征：脱离文档流，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性。也就是说，如果一个父盒子中有两个子元素，其中一个子元素浮动，若另一个元素为块级元素，则会无视浮动元素，被浮动元素覆盖；若另一个元素为内联元素，则会环绕浮动元素。

优点：兼容性好。

缺点：元素脱离文档流，产生浮动。

<template>
    <div class="box">
        <div class="left">1</div>
        <div class="right">3</div>    
        <div class="content">2</div>
    </div>
</template>
<style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    .box > div {
        min-height: 100px;
    }
    .left {
        float: left;
        width: 100px;
        background: red;
    }
    .content {
        background: yellow;
    }
    .right {
        float: right;
        width: 100px;
        background: blue;
    }
</style>

2. 9.2 定位布局

优点：简单，适合快速开发页面。

缺点：元素脱离文档流，导致后面的元素也会脱离文档流，可使用性比较差。

<template>
    <div class="box">
        <div class="left">1</div>
        <div class="content">2</div>
        <div class="right">3</div>    
    </div>
</template>
<style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    .box {
        position: relative;
    }
    .box > div {
        min-height: 100px;
        position: absolute;
    }
    .left {
        left: 0px;
        width: 100px;
        background: red;
    }
    .content {
        left: 100px;
        right: 100px;
        background: yellow;
    }
    .right {
        right: 0px;
        width: 100px;
        background: blue;
    }
</style>

2.9.3 flex布局

<template>
    <div class="box">
        <div class="left">1</div>
        <div class="content">2</div>
        <div class="right">3</div>    
    </div>
</template>
<style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    .box {
        display: flex;
    }
    .box > div {
        min-height: 100px;
    }
    .left {
        width: 100px;
        background: red;
    }
    .content {
        flex: 1;
        background: yellow;
    }
    .right {
        width: 100px;
        background: blue;
    }
</style>

3.0 @ 如何实现左侧宽度固定，右侧宽度自适应的布局

3.1 利用float + margin实现

DOM结构

<div class="box">
  <div class="box-left"></div>
  <div class="box-right"></div>
</div>

.box {
 height: 200px;
}

.box > div {
  height: 100%;
}

.box-left {
  width: 200px;
  float: left;
  background-color: blue;
}

.box-right {
  margin-left: 200px;
  background-color: red;
}

3.2 @利用calc计算宽度 (不推荐）

.box {
 height: 200px;
}

.box > div {
  height: 100%;
}

.box-left {
  width: 200px;
  float: left;
  background-color: blue;
}

.box-right {
  width: calc(100% - 200px);
  float: right;
  background-color: red;
}

利用float + overflow实现

.box {
 height: 200px;
}

.box > div {
  height: 100%;
}

.box-left {
  width: 200px;
  float: left;
  background-color: blue;
}

.box-right {
  overflow: hidden;
  background-color: red;
}

利用flex实现

.box {
  height: 200px;
  display: flex;
}

.box > div {
  height: 100%;
}

.box-left {
  width: 200px;
  background-color: blue;
}

.box-right {
  flex: 1; // 设置flex-grow属性为1，默认为0
  overflow: hidden;
  background-color: red;
}

3.1 CSS3 动画

@ animation keyframes transform

li:nth-child(4){
    animation: myMove 1.5s ease 1.5s alternate infinite ;
}

@keyframes myMove{
    0%{
        color: rgb(229, 255, 80);
        top: 160px;
        transform: rotateY(0deg) scale(1.0);
    }
    50%{
        color:rgb(2, 150, 200);
        top: 0px;
        transform: rotateY(180deg) scale(1.5);
    }
    100%{
        color: rgb(255, 106, 198);
        top: 160px;
        transform: rotateY(0deg) scale(1.0);
    }
}

transform的常见属性，rotate(旋转)、skew(扭曲)、scale(缩放)、translate(移动)，所代表的的含义就是会像X和Y轴同时变形，而加上X或者Y就代表会向着该方向进行变形。