之前我们大概总结了关于HTML，以及网页如何传输，还有浏览器如何显示我们的页面的知识点。
下面讲讲CSS，它主要用于渲染我们的页面。
我们知道的是HTML里面有很多的标签，那如果我们只有那个标签的内容的话，它就会排列混乱，因为没有东西可以约束它的排版。
所以就出现了CSS。 CSS其中一个知识点就是盒模型，也就是把每一个元素都装到了一个盒子里，然后就可以实现给这个盒子定位，设置元素内容的边框，颜色等等就更方便整齐了。CSS的盒模型包括两个，一个是标准盒模型，还有一个是IE盒模型。 当写CSS的时候，如果给相应元素写了box-sizing 属性，就代表设置了一个盒模型。box-sizing 属性一共有三个，分别是border-box, padding-box,和content-box. border-box就是那个盒模型的height 和width一直包括到了border那一层。然后content-box 就只包括最中间的content部分啦！这个在之后计算元素之间的宽度大小的时候会有用，关于盒模型大家可以自己去网上查一下图片，最中间是content,依次向外就是padding, border,margin .
但是只有盒模型是不够的，因为对于一些负责的页面比如说实现垂直居中就不容易。所以🈶了flex盒模型。
flex盒模型主要有两种属性，分别是容器属性还有元素属性。
容器属性有：flex-direction(决定横着排还是竖着排）, flex-wrap（决定是否换行）,justify-content(水平对齐方式）, align-items（纵向对齐方式）。
元素属性：flex-grow(按比例放大属性，即使有足够的空间也不沾满）；flex-shrink（缩小比例）;flex 为flex-grow,flex-shrink,以及flex-basis 的简写， flex-basis 定义了分配多余的空间的时候，项目占据的空间。order定义了元素的排列顺序，越小越靠前。
可以用flex实现一个圣杯布局：👇
https://segmentfault.com/a/1190000013631838
BFC（块级格式化上下文）这个名词听上去很复杂，其实尝试过就会更好理解一点。比如说，我们想写一个在一行里面并列的两个内容，就可以用一个<div>包住他们，然后把这个div 的overflow属性设置为auto。然后给要浮动的那个子元素设置overflow=left，就可以用外面的div包住那个子元素了；除此之外，还可以解决元素元素margin 塌陷问题。
那么什么才算BFC呢？ BFC是一个独立渲染的区域，触发BFC之后，浮动的元素也会参与计算。。
1、弹性元素（display：flex)display:inline-block,inline-flex,table-cell,table-caption都可以; overflow不为visible的（overflow：hidden/auto）；绝对定位的元素(position:absolute等);Position 不为relative或者static，如果不理解或者忘记了可以看一下：
名词与上面接近的定义还有块儿元素和行元素：
块儿元素(display:block)会自动把父元素填充满，并且会独占一行。可以设置他的宽高；
行元素（display:inline)不会独占一行，但也不能设置宽高。
display：inline-block 这个属性不会独占一行，但是可以设置宽高。
Css 还可以帮助我们画很多东西，比如CSS可以画出一个三角，或者一条直线等等静态的东西，比如用CSS画直线的时候，就可以用transform:scale()控制一个<p>或者其他的元素然后缩放这个元素。scale 会按照这个元素原始的大小按照scale里面的比例缩放。
那么CSS如何渲染呢？通常我们都会把CSS样式写在<style>标签里放在HTML文档里面，如果遇到很大的项目，CSS可以专门写在.css文档里面，然后通过<link>标签，或者import 进需要渲染的页面。
<link>是一个HTML元素，放在HTML的<head>标签里面，<link rel=”stylesheet” href=”styles.css”>。用import 引用的样式会在页面加载完成之后再加载，然而link 在页面加载的时候同时加载。import由CSS提供，优先级低于<link>.
