zoukankan      html  css  js  c++  java
  • css样式表和选择器的优先级以及position元素属性值的区别

    css样式表优先级

    问题:当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢?

    答:一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高的优先权。

    1.浏览器缺省设置;

    2.外部样式表(使用<link>引用的)

    3.内部样式表(位于<head>标签内部)

    4.内联样式表(在HTML元素内部)

    css选择器优先级

    无论是对于外部样式表,内部样式表,或内联样式表css选择器的优先级都按照:

    id选择器>class选择器>HTML元素选择器


    position元素属性解析

    知识储备

    在HTML元素标签中,所有的元素按布局时的特点可以分为两类内联元素(inline)块元素(block)

    内联元素(inline):在页面排版布局时,一个挨一个,不单独占有1行,内嵌的元素也必须是内联元素。常见内联元素有<a>、<input />、<label>、<img alt="" /> ,<span>等等,内联元素只需要必要的宽度,不强制换行,即前后不带有换行符。
    块元素(block)独自占有一行,相当于前后都带有换行符,内嵌的元素可以是内联或者块级元素,常见的块级元素有</span></label></a>
    <h1>~<h6>、<div>、<hr />、<p>等等,块元素是一个元素,占用了全部宽度,在前后都是换行符。

    position属性
    • static:默认值;默认布局(流式布局)
    • fixed :固定定位;类似于absolute,但不随着滚动条的移动而改变位置
    • absolute :绝对定位;脱离文档流的布局,遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static),否则为Body文档本身
    • relative :相对定位;不脱离文档流的布局,只改变自身的位置,在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。
    从零到现在,一路走来,感谢众多无私的知识分享者,我愿意为你们接下一棒!
  • 相关阅读:
    怎么解决Chrome浏览器崩溃“STATUS_INVALID_IMAGE_HASH”的问题
    Windows下PHP如何选择Thread Safe和Non ThreadSafe版本
    Windows环境下安装Yaf框架
    创建Redis-Cluster集群常见问题-解决方案
    Linxu下PHP版本升级
    Linxu下Yii2的POST提交被拒经历
    彻底搞懂 Redis 事务
    python模块之psutil详解
    iptables学习笔记
    incaseformat 病毒事件企业解决流程
  • 原文地址:https://www.cnblogs.com/Jener/p/5877339.html
Copyright © 2011-2022 走看看