美文网首页
HTML和CSS基础

HTML和CSS基础

作者: shadow123 | 来源:发表于2017-08-13 16:22 被阅读0次

    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。

    相关文章

      网友评论

          本文标题:HTML和CSS基础

          本文链接:https://www.haomeiwen.com/subject/jyrerxtx.html