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概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...

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

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

  3. CSS:CSS样式表及选择器优先级总结

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

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

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

  5. 一起学HTML基础-CSS样式表-基本概念、分类、选择器

    一.基本概念: CSS  (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...

  6. CSS样式表 选择器

    1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> &l ...

  7. 8.20 css样式表:样式分类,选择器。样式属性,

    样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独 ...

  8. css样式表:样式分类,选择器。样式属性,格式与布局

    样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独 ...

  9. CSS样式表优先级

    使用CSS样式表一共有2种方式:内部和外部,其中内部分为行内样式和嵌入式,外部分为导入式和链接式. 如果需要在不同的方式中设定同一个属性的时候,样式的优先级别就出现了. 测试代码如下: red.css ...

随机推荐

  1. 如何打开 系统信息窗体和 DirectX诊断工具

    开始---运行----msinfo32.exe 运行 位于C:\Program Files\Common Files\Microsoft Shared\Msinfo\msinfo32.exe,显示计算 ...

  2. Ext.Window 的常见属性

    Ext.Window 的常见属性:    plain:true,(默认不是)    resizable:false,(是否可以改变大小,默认可以)    maximizable:true,(是否增加最 ...

  3. 部署samba服务之后,在客户端用挂载访问的方式,错误信息:mount: block device //192.168.1.108/mysqldata is write-protected, mounting read-only mount: cannot mount block device //192.168.1.108/mysqldata read-only

    部署samba服务之后,在客户端用挂载访问的方式,错误信息:mount: block device //192.168.1.108/mysqldata is write-protected, moun ...

  4. 如何用Jquery判断在键盘上敲的哪个按键

    有时候我们需要判断我们在键盘上敲了哪个键,这个需要查询下键盘上的键对应的值是多少,比如Enter键是13. 下面是Jquery代码,别忘了引用Jquery包哈. <script type=&qu ...

  5. iOS多线程编程指南(二)线程管理

    当应用程序生成一个新的线程的时候,该线程变成应用程序进程空间内的一个实体.每个线程都拥有它自己的执行堆栈,由内核调度独立的运行时间片.一个线程可以和其他线程或其他进程通信,执行I/O操作,甚至执行任何 ...

  6. Linux多线程编程(不限Linux)【转】

    ——本文一个例子展开,介绍Linux下面线程的操作.多线程的同步和互斥. 前言 线程?为什么有了进程还需要线程呢,他们有什么区别?使用线程有什么优势呢?还有多线程编程的一些细节问题,如线程之间怎样同步 ...

  7. spring原理

    1.spring框架什么时候被加载? (1)ApplicationContext ac = new ClassPathXmlApplicationContext("applicationCo ...

  8. DSP bootloader学习笔记1

    DSP bootloader学习笔记1 彭会锋 参考: TMS320F28xx DSP中内部Flash的应用研究 http://wenku.baidu.com/view/83e9837931b765c ...

  9. Codeforces Round #364 (Div. 2) Cells Not Under Attack

    Cells Not Under Attack 题意: 给出n*n的地图,有给你m个坐标,是棋子,一个棋子可以把一行一列都攻击到,在根据下面的图,就可以看出让你求阴影(即没有被攻击)的方块个数 题解: ...

  10. ExtJs布局之viewport

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...