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样式表和选择器(图文详解)

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

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

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

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

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

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

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

  8. CSS样式表 选择器

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

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

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

随机推荐

  1. Guid的使用

    今天在公司做修改功能时,老大让使用部分更新,但是表中的主键是UNIQUEIDENTIFIER类型,它会在我们添加纪录时,默认生成一个unicode码, 但是我现在必须要将获取到的已经是string类型 ...

  2. c++中static关键字的用法总结

    类中的静态成员真是个让人爱恨交加的特性.我决定好好总结一下静态类成员的知识点,以便自己在以后面试中,在此类问题上不在被动. 静态类成员包括静态数据成员和静态函数成员两部分. 一 静态数据成员: 类体中 ...

  3. ASP.NET MVC系列:添加模型的验证规则

    首先,在模型类中引用 System.ComponentModel.DataAnnotations 命名空间;System.ComponentModel.DataAnnotations 命名空间提供定义 ...

  4. windows核心编程---第四章 进程

    上一章介绍了内核对象,这一节开始就要不断接触各种内核对象了.首先要给大家介绍的是进程内核对象.进程大家都不陌生,它是资源和分配的基本单位,而进程内核对象就是与进程相关联的一个数据结构.操作系统内核通过 ...

  5. js 获取时间比较全,留备用(zhuan)

    var myDate = new Date(); myDate.getYear();        //获取当前年份(2位) myDate.getFullYear();    //获取完整的年份(4位 ...

  6. 经典SQL

    一.基础 1.说明:创建数据库CREATE DATABASE database-name 2.说明:删除数据库drop database dbname3.说明:备份sql server--- 创建 备 ...

  7. 图片延迟加载库Layzr

    <!DOCTYPE html> <html> <head> <title>Layzr Demo</title> <script src ...

  8. jQuery -&amp;gt; 获取/设置/删除DOM元素的属性

    jQuery的属性操作很easy,以下以一个a元素来说明属性的获取/设置/删除操作 <body> <a>jquery.com</a> </body> 加 ...

  9. C# 程序性能提升篇-2、类型(字段类型、class和struct)的错误定义所影响性能浅析

    前景提要: 编写程序时,也许你不经意间,就不知不觉的定义了错误的类型,从而发生了额外的性能消耗,从而降低了效率,不要说就发生那么一次两次,如果说是程序中发生了循环.网络程序(不断请求处理的)等这些时候 ...

  10. Chapter 1 First Sight——18

    But at least he sent me to an empty desk at the back without introducing me to the class. 但是最后他给我最后面 ...