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 ：相对定位；不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。

css样式表和选择器的优先级以及position元素属性值的区别的更多相关文章

  1. css样式表的选择器与分类

    css 样式表的作用: 主要用于结构,样式与行为,CSS主要的作用就是美化网页的一个语言,它的特点: 1.结构与样式分离的方式,便于后期维护与改版; 2.样式定义精确到像素的级别; css样式表的结构 ...

  2. CSS：CSS样式表及选择器优先级总结

    我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式.内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢? 也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了 ...

  3. CSS样式----图文详解：css样式表和选择器

    主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...

  4. CSS样式----css样式表和选择器（图文详解）

    本文最初于2015-10-03发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样 ...

  5. CSS样式表及选择器相关内容(一)

    CSS(Cascading Style Sheets)层叠样式表1.CSS级联-CSS层叠:规定在哪个HTML中使用哪个样式. body{ font-size:16px; //body默认字体大小 } ...

  6. CSS样式表及选择器相关内容(二)-伪类与伪元素选择器

    伪类与伪元素选择器归纳: 一.伪类选择器(伪类以":"开头,用在选择器后,用于指明元素在某种特殊的状态下才能被选中)    1.a标签伪类选择器,其他标签类似        eg: ...

  7. css样式表分类、选择器分类、css基础样式

    1 . 样式表  Cascading Style Sheet      css优势: 内容与表现分离 网页的表现统一,容易修改 丰富的样式,使网页布局更加灵活 减少网页代码量,增加网页的浏览速度,节省 ...

  8. 【3-24】css样式表分类、选择器、样式属性

    一.css样式表分类: (一)内联样式表:代码写在标签内的样式表  控制精确 代码重用性差  优先级最高 格式:<p style="样式属性">内容</p> ...

  9. CSS选择器及CSS样式表

    前言 牛腩新闻发布系统中记忆最深的就是各种CSS选择器各种CSS样式,这些选择器之间肯定有它的优先级,包括CSS样式也一样,也是有它的优先级,本文介绍一些各种CSS选择器各种CSS样式以及它们的优先级 ...

随机推荐

  1. python查找算法的实现-二分法

    1.算法:(设查找的数组期间为array[low, high]) (1)确定该期间的中间位置K(2)将查找的值T与array[k]比较.若相等,查找成功返回此位置:否则确定新的查找区域,继续二分查找. ...

  2. 用户管理 之 Linux 系统中的超级权限的控制

    在Linux操作系统中,root的权限是最高的,也被称为超级权限的拥有者.普通用户无法执行的操作,root用户都能完成,所以也被称之为超级管理用户. 在系统中,每个文件.目录和进程,都归属于某一个用户 ...

  3. <欧奈尔制胜法则—如何在股市中赚钱>读书笔记

    在选择个股建仓时,要选择那些在最近季度报表中,每股收益比上年同期要有较大增幅的股票. 每股收益是指公司税后净利润除以公司普通股的总股本 选择年增长率为25%--50%的公司 年度盈利和季度盈利都要出色 ...

  4. Nagios 安装配置

    ##Debian 6 安装server # apt-get install nagios* 一路设置好各种密码,成功后访问 http://ip/nagios3 既可,默认用户*nagiosadmin* ...

  5. PHP 中 Orientation 属性判断上传图片是否需要旋转(转)

    <?php $image = imagecreatefromstring(file_get_contents($_FILES['image_upload']['tmp_name'])); $ex ...

  6. 给The Lab Renderer for Unity中地形添加阴影

    The Lab Renderer for Unity是Valve针对VR在Unity的体验渲染器,提高VR的渲染效率,更多的大家可以查相应资料,在这,说个The Lab Renderer for Un ...

  7. MailMessage to EML

    EML格式是微软公司在Outlook中所使用的一种遵循RFC822及其后续扩展的文件格式,并成为各类电子邮件软件的通用格式. 做个笔记,C# 邮件处理保存为eml格式: 一.网上好多这样的写法,可以在 ...

  8. EPLAN Electric P8 2.0即将到来,着实令人期待-转caodaping

    在今年的4月份,2.0版本的EPLAN Electric P8 首次揭开其神秘面纱,见诸于世.它的展露,再次印证了EPLAN 软件平台朝着"更实用"这一方向发展,同时也证明&quo ...

  9. POJ 1650 Integer Approximation

    Integer Approximation Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5081   Accepted:  ...

  10. 非常简单实用的Python HTTP服务

    在做分布式系统应用的时候经常在测试环境上传一个包,或者干嘛的,公司的服务器比较bug,只给ldap权限,每次只能scp到自己的个人目录下,然后才能进到公共账号下去cp,比较麻烦.这时候如果你需要一个简 ...