这是我参与「第四届青训营 」笔记创作活动的第1天
前言
众所周知，前端页面想要写的漂亮，少不了CSS的渲染，首先来一张CSS的属性的思维导图，帮助大家提高对CSS里各种属性的认知：
下面我们就来介绍一下CSS的用法规则和属性。
1. display属性
dispaly这个属性用于定义建立布局时元素生成的显示框类型，其主要的作用的改变HTML标签的显示范围，其主要的值有none，bolck，inline，inline-bolck，inherit等等。
| none | 此元素不会被显示。 |
|---|---|
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。（CSS2.1 新增的值） |
| inherit | 规定应该从父元素继承 display 属性的值 |
1.块级标签（block）:默认占据100%的父容器的宽度，可以修改宽高，最典型的元素，（div）
2.行内块级标签（inline-block ）:两个元素可以处在同一行，也可以设置宽高
3.行内标签（inline）:元素可以同一行排列，但是不可设置宽高（span） a标签
display除了改变一些标签的属性，其还有一个我们用的最多就是将容器设置为弹性容器。
2. display:flex
display:flex是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性就会失效。常用的属性如下图：
4.CSS的继承
1、理解继承
CSS的样式表继承指的是,特定的CSS属性向下传递到子孙元素。总的来说,一个HTML文档就是一个家族,然后HTML元素有两个子元素, 相当于它的儿子,分别是head和body,然后body和head各自还会有自己的儿子,最终形成树形结构。 有时可能我们在body里面设置了一些属性,结果,body下面所有的后代元素都可能享受到,这也就是CSS样式继承。
2、继承规则
文本相关的属性和列表相关的属性会被继承文字大小，其中文本相关属性有：
font-size、color、font-family、font-weight、text-indent、text-align、text-decoration、font-style、line-height、letter-spacing、word-spacing。列表属性有：list-style
5.层叠性
1、理解
同一个标签能被多个选择器选中，且选中会有先后顺序，而不同选择器中可能存在相同属性的设置，此时需要使用层叠性解决冲突，对属性进行覆盖，最终只呈现一种样式。
2、规则
2.1 直接选中目标标签的情况
2.1.1 比较选择器权重
基础选择器权重：范围越大权重越小，*<标签选择器<类选择器<id选择器
高级选择器权重：比较个数，id个数->类个数->标签个数，如果id个数相同，则比较类个数，以此类推；如果id个数已经比较出大小，则不用比较后续个数，以此类推。
2.1.2 比较书写顺序
当权重相同时，后写覆盖先写。
2.2 选中目标标签的祖先级的情况
主要考虑文字属性的继承方面。
2.2.1 就近原则
如果选择器选择的是不同嵌套层次的祖先标签，则会继承距离最近的祖先样式。
2.2.2 判断最近祖先级的最终样式
如果选择器选中同层次的祖先，则根据权重判断最终样式。
2.2.3 比较书写顺序
权重相同时，后写覆盖先写。
2.3 使用!important关键字的情况
!important可以将该属性的权重提升至最大。写在某个css属性值后面空格加!important。
- 注意：
- 在就近原则中，不需要比较选择器权重，所有
!important会失效。 !important不能提升选择器的权重，只是能提升某条属性的权重到最大。
2.4 直接写行内式的情况
行内式的权重高于所有其他的选择器的，但是低于!important。
结语
通过不断的学习，我对css的理解也会越来越深，也能灵活的使用css渲染页面。让页面的布局更加合理。
