HTML 语义化
语义化的含义就是用正确的标签做正确的事情,html 语义化就是让页面的内容结构化,便于对浏览器搜索引擎解析;在没有CSS样式情况下也以一种文档格式显示,并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于SEO。使阅读源代码的人对网站分块,便于阅读维护理解。
文档流
文档流(Normal Flow)就是文档中正常排列方式。块级元素从上到下依次排列,内联元素从左到右依次排列,宽度不够就换行。
position 属性
元素在页面中的布局遵守一套文档流的方式,默认的定位属性值为static。
元素如果被定位了,那么它的top,left,bottom,right值就会生效,能设置定位的属性是relative, absolute和fixed。
需要注意的另一点是被定位的元素层次( z-index)会得到提高。
static
该关键字指定元素使用正常的布局行为,即元素在文档流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
relative
相对于自己定位,依然占据文档流中原有位置,只是发生了偏移。
absolute
设置了绝对定位之后,元素脱离文档流,相对于祖先中最近的已定位(position 值不为 static)的元素定位,如果找不到满足条件的,就相对于最外面的包含块 html 元素定位。
fixed
相对于 viewport 定位,不在文档流中。
层叠顺序
position > inline > float > content > border > background > z-index:-1
CSS 权重
权重,也就是选择器的优先级,每条选择器的规则都有其权重,权重大的会覆盖掉权重小的。
根据样式所在位置,对元素的影响也有关系:内联样式(标签内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。
网友评论