HTML和CSS基础

HTML 语义化

语义化的含义就是用正确的标签做正确的事情，html 语义化就是让页面的内容结构化，便于对浏览器搜索引擎解析；在没有CSS样式情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO。使阅读源代码的人对网站分块，便于阅读维护理解。

文档流（Normal Flow）就是文档中正常排列方式。块级元素从上到下依次排列，内联元素从左到右依次排列，宽度不够就换行。

元素在页面中的布局遵守一套文档流的方式，默认的定位属性值为static。

元素如果被定位了，那么它的top,left,bottom,right值就会生效，能设置定位的属性是relative, absolute和fixed。

需要注意的另一点是被定位的元素层次( z-index)会得到提高。

该关键字指定元素使用正常的布局行为，即元素在文档流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。

相对于自己定位，依然占据文档流中原有位置，只是发生了偏移。

设置了绝对定位之后，元素脱离文档流，相对于祖先中最近的已定位（position 值不为 static）的元素定位，如果找不到满足条件的，就相对于最外面的包含块 html 元素定位。

相对于 viewport 定位，不在文档流中。

position > inline > float > content > border > background > z-index:-1

权重，也就是选择器的优先级，每条选择器的规则都有其权重，权重大的会覆盖掉权重小的。

根据样式所在位置，对元素的影响也有关系：内联样式（标签内style形式）> style标签> link标签。

另外一点需要注意的是!improtant,凡是属性值后加上了!important，那么它的值不会被其他值替换。

权重记忆口诀从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名或者伪元素+1。

body #container .content a:hover

最终的权重是122，#container 是一个 id 选择器加了100，.content 是一个 class 选择器加了10，:hover 是一个伪类选择器加了10，body和a 是元素选择器各加了1。