html+css基础要点

浏览器

1.shell：外壳
2.内核：操作代码，识别代码的快慢

浏览器      内核
IE：          trident
Firefox：  Gecko
Google：  webkit/blink
Safari：    webkit
Opera：    presto

标签a：

1.超链接
2.锚点（href中放入id，可以点击跳到相应位置）
3.打电话（tel：XXX）
4.发邮件（mailto：邮箱地址）
5.协议限定符（javascript:;强制运行js代码）

选择器的权重

!important： infinity（正无穷）
行间样式： 1000
Id： 100
class|属性|伪类： 10
标签|伪元素： 1
通配符： 0
(1000 是256进制)

行级元素，块级元素，行级块元素

1.行级元素、内联元素 inline
feature：内容决定元素所占位置，不可通过css改宽高。
span a strong em del

2.块级元素 block
feature：内容占一行，可以通过css改宽高。
div form ul ol li p address

3.行级块元素inline-block
feature：内容决定元素所占位置，可以改宽高。
img

eg：凡是带有inline的元素都有其文字特性。

absolute和relative

1.absolute：脱离原来的位置进行定位。相对于最近的有定位的父级进行定位，没有就对文档进行定位
2.releative：保留原来的位置进行定位。相对于自己原来的位置进行定位

margin塌陷，margin合并，bfc（block format context）

bfc：block format context（解决margin塌陷，改变了盒子的渲染规则）
如何触发一个盒子的 bfc
position：absolute
float：left
display：inline-block
overflow：hidden

div的margin合并不解决

三大模型 盒模型 层模型 浮动模型

浮动元素产生了浮动流:
所有产生了浮动流的元素，块级元素看不到他们。
产生了bfc的元素和文本类属性的元素（inline）以及文本都能看到产生浮动流的元素

clear：both；清楚浮动流（必须得是块级元素）

小知识点：position：absolute；和float：left/right；会把内部改成inline-block

行级元素只能嵌套行级元素
块级元素可以嵌套任何元素