CSS的一些基础知识总结

浏览器会通过叠加和覆盖这两种方式来生成最终的样式值。
覆盖的默认规则是后者覆盖前者
!important可以改变这种规则

浏览器将载入的html变为dom树，但是此时没有任何显示样式。所以显示的样式，都是css定义的，浏览器只会通过css来渲染视图样式,换句话说,标签从本质上来讲都是只是语义上的,浏览器默认样式为这些语义标签设置了样式

p {display:block} // p 默认设置的样式
li {display:list-item} // li 默认设置的样式
table{display:table} // table 默认设置的样式
h1{font-weight:border}不是天生的粗体，而是设置了font-weight:bolder的样式而已

号用于全局样式重置，但是选择器在遇到标签选择器时，是不会起作用的，及时它是“后加载”的。

b和i是样式上强调。
strong和em是语义上强调。

能被父容器居中、能设置高度宽度和margin、不会像table或div那样占一整行

img是行内元素, 与其它元素对齐方式 默认是基线对齐,通过设置父容器的 font-size=0 其它元素的底线和基线重叠,从而消白边

行高是指文字之间基线的距离,其值等于顶线和底线的距离

选择一个祖先的所有子孙节点，例如 div p{…}
选择一个父元素的所有直属节点，例如 div > p{…}
选择某一个元素紧挨着的兄弟节点，例如 li + li{…}

属性选择器有两种情况：
只通过属性名选择：img[title]{… }
通过属性名和属性值选择：input[type=’text’]{…}

:before和:after 他们都有一个 content的属性 可以加入字符

!important优先级最高，高于上面一切。* 选择器最低，低于一切。

遇到一个id就往特指度数值中加100，遇到一个class就往特指度数值中加10，遇到一个element就往特指度数值中加1

设置的宽度都是内容宽度，不是整个盒子的宽度。

而整个盒子的宽度是：（内容宽度 + border宽度 + padding宽度 + margin宽度）之和

设置了box-sizing:border-box之后，300px的宽度是内容 + border + 边框的宽度（不包括margin），这样就比较符合我们的实际要求了。

重叠并不是 BUG,而是在设置 margin 后不会出现文字上下双倍边距的情况

使用 float 的真实效果是使元素脱离文档流,并在内容分布上形成新的格局,从立体角度上讲,元素上浮了一层,下面的元素取代了原有浮动元素的位置, 从二维角度上来看,给整个页面划分了几个格局, 就好比是在田地里划分了篱笆地.

relative会导致自身位置的相对变化，而不会影响其他元素的位置、大小的变化。

absolute元素脱离了文档结构。

absolute定位起点是设置了相对定位的父元素,而并非直接父元素

浮动、绝对定位元素（position 为 absolute 或 fixed）、行内块元素 display:inline-block、表格单元格 display:table-cell、表格标题 display:table-caption 以及 overflow 属性值不为 visible 的元素（除了该值被传播到视点 viewport 的情况）将创建一个新的块级格式化上下文。

一个新的BFC可以通过给容器添加任意一个必要的CSS样式来创建，比如overflow: scroll，overflow: hidden，display: flex，float: left，或 display: table。尽管上述条件都可以创建BFC，但也会产生一些其他效果，如：

display: table 可能引发响应性问题
overflow: scroll 可能产生多余的滚动条
float: left 将把元素移至左侧，并被其他元素环绕
overflow: hidden 将裁切溢出元素

BFC 相当于划分出一块相对独立的区别,这个区别的修改不会影响到页面上的其它区别, BFC 可以包含浮动