1.行内元素与块级元素
行内元素的width与height由内容决定，设置width与height不能影响行内元素的宽高。行内元素设置margin与padding的left与right的值可以影响该元素在行内的位置。margin与padding的top与bottom的值可以影响border的位置，但不能影响元素在文本中的位置，即即使设置了top与bottom的值，其实际位置不改变，也不影响其上方和下方的元素位置。
块级元素可以设置width\height\padding\margin等。可以通过设置margin:0 auto;来实现水平居中。
行内块级元素可以设置width\height\padding\margin等。行内元素的width由内容决定，块级元素可以设置width,故margin:0 auto;不能是实现行内块级元素的水平居中，可以通过为父级设置 text-algin:center;来实现该元素及内容（继承）居中。
flex元素，在父级设置display:flex;后，在父级设置aligin-items:center;可以实现垂直居中，在父级设置justify-content:center;可以实现水平居中。也可以在子级设置margin:auto；可以实现水平和垂直方向上的居中。
transform:translate为百分比时，相对自身宽高计算
2.vertical-align
line-height：单行文本实现近似垂直居中，可通过设置line-height实现，不用同时设置height。因为line-height是默认上下均分行间距的。line-height基于font-size计算。
line-height的相关内容源自《css世界》5.2.2-张鑫旭
white-space:如何处理空白格（单词间的空白符），默认normal即换行，可以设置nowrap。
word-wrap:如何处理整个单词的换行问题。默认normal不换行，可以设置break-word即换行显示单词。同css3中的overflow-wrap。
word-break:normal(中日韩断行，其他单词断行)；break-all(非中日韩任意字符断行)；keep-all(中日韩不断行，其他同normal)
word-spacing:单词间距（中文无效）
letter-spacing:设置文本字符的间距(中英文)。
text-indent:定义一个块元素首行文本内容之前的缩进量。
text-transfrom:capitalize(首字母大写)；lowercase(全小写)；uppercase(全大写)
text-overflow: ellipsis;(文字溢出时点点，需配合overflow:hidden)
vertical-align：可以是线类（baseline,top,middle,bottom）;可以是文本类（text-top,top-bottom）;可以是上标下标类（sub,super）;可以是数值或百分比（百分比基于line-height计算）。vertical-align起作用的前提是只能应用于内联元素及display:table-cell的元素。即只能作用在display计算值为inline\inline-block\inline-table\table-cell。
行内元素vertical-align不起作用时，需要为父级元素设置line-height来使行内元素前的空白元素足够高。或者父级添加伪元素::before，使其content为空，高度为父元素高度，来达到空白元素足够高的效果。display:table-cell时，将vertical-align设置在元素自身可实现子元素的垂直居中，不论子元素是否是行内元素。
vertical-align的相关内容源自《css世界》5.3.2-张鑫旭
3.float
外边距(margin)合并:当两个垂直外边距相遇时，它们将形成一个外边距，合并的外边距的高度等于两个发生合并的外边距中高度较大者。只有普通文档流中块级元素会发生外边距合并，行内元素（margin-top/bottom不会影响上下文）、浮动元素、绝对定位之间的外边距不会合并。
float的元素具有：包裹性（父元素高度塌陷）；块状并格式化上下文；破坏文档流（环绕效果）；没有任何margin合并。
clear:both\left\right。让自身不能和前面的浮动元素相邻。只对块级元素有效,故可以通过为浮动元素的父元素添加伪元素，设置content为空，display:block;clear:both。当后边的元素margin为负值时，则清除浮动失效。
BFC:(Block Formatting Context)块级格式化上下文。一个元素具有BFC则不会影响外部元素，即没有margin合并，没有高度塌陷。（BFC元素的子元素即使浮动也不会影响，但BFC元素浮动会）
触发BFC:根元素；float的值不为none（浮动元素本身BFC化）；overflow的值为auto\scroll\hidden；display的值为table-cell\table-caption\inline-block；position的值不为realitive或static；弹性元素（display为 flex 或 inline-flex元素的直接子元素）； 网格元素（display为 grid 或 inline-grid 元素的直接子元素）(为float后边的元素触发BFC,可消除前边浮动元素造成的影响)
用法：当一个元素具备了触发块级格式化上下文的条件，不用设置清除规则，自动包含浮动；并且紧挨着一个浮动元素时，会忽略自己的边界必须接触自己的包含块边界的规则，盒子（不仅行盒子，所有盒子均是）自动收缩到适当大小。
BFC的用法来自《精通css 高级web解决方案》-3.2.8
4.position
根元素被称为初始包含块，尺寸等于浏览器可视窗口大小。
position:realitive或static，包含块由最近的块容器祖先的content box边界线形成。
position:fixed，包含块是初始包含块，即根元素html。
position:absolute，包含块由最近的postion不为staitc的祖先元素（可以是块容器，也可以是行内容器）的padding box边界形成。
position:sticky，粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
psotion的相关内容源自《css世界》6.5.1-张鑫旭
5.伪元素与伪类
伪类用于在页面中的元素处于某个状态时，为其添加指定的样式。（:visited :hover :active :target :not）
结构化伪类：与文档结构有关的伪类（:nth-child :nth-of-type (会忽略非指定类型的元素) :nth-last-child :nth-child(-n+3)前三个）
表单伪类：:required :valid :invalid :in-range :out-of-range :read-only :read-write
伪元素会创建一个抽象的的伪元素，这个元素不是DOM中的真实元素，但是会存在于最终的渲染树中，我们可以为其添加样式。（::first-line ::first-letter ::before ::after）
伪类与伪元素的用法来自《精通css 高级web解决方案》-2.1
6.样式优先级
层叠机制的重要性级别从高到低：标注为!important的用户样式>标注为!important的作者样式>作者样式>用户样式>浏览器的默认样式
各类选择符的权重：
行内样式：1000；ID选择符：100；类选择符、伪类选择符、属性选择符：10；类型选择符、伪元素选择符：1.但11个ID选择符的权重不大于1个行内样式。如果两条规则的权重相同，则应用后定义的规则。
样式优先级的用法来自《精通css 高级web解决方案》-2.3
7.渲染阻塞
如果在HTML文档的元素中加入了
渲染阻塞会明显拖慢网站加载速度。为此，主流的做法是再HTML页面底部的结束标签之前加载JavaScript。比较现代的做法是在种使用
渲染阻塞的内容来自《精通css 高级web解决方案》-2.5.3
8.flexbox
flexbox可以控制弹性项的：
大小，基于内容及可用空间；flex-basis flex-grow flex-shrink
流动方向，水平还是垂直，正向还是反向；flex-direction:row/column/row-reverse
两个轴上的对齐与分布；justify-content:flex-start/center/space-between/space-around align-items align-self
顺序，与源代码种的顺序无关。order
此外还可以设置换行显示与否：flex-wrap。全部居中显示时可以为子元素设置margin:auto来代替父元素的justify
9.opciaty-visibility-display
display: none
dom结构: 浏览器不会渲染display:none 的元素, 并且不占据页面空间；事件监听: 无法对元素进行事件监听；继承: 不会被子元素继承(子元素设置display: block 不会显示) 改动: 改动属性值会引起页面的重排和重绘；过渡: 无法设置过渡效果 transition: display无效
visibility: hidden
不会被渲染,但是会占据页面空间；无法对元素设置事件监听；可以继承,子元素设置非visibility:hidden可以显示；改动属性只会引起页面重排 transition:visibility会立即显示, hidden有过渡效果
opacity: 0
元素被隐藏, 会占据页面空间；可以设置事件监听；可以继承, 子元素设置opacity可以显示；不会重绘也不会重排；transition: opacity 可以实现显示隐藏的过渡效果；opacity 会触发硬件加速
