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 :相对定位;不脱离文档流的布局,只改变自身的位置,在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。
css样式表和选择器的优先级以及position元素属性值的区别的更多相关文章
- css样式表的选择器与分类
css 样式表的作用: 主要用于结构,样式与行为,CSS主要的作用就是美化网页的一个语言,它的特点: 1.结构与样式分离的方式,便于后期维护与改版; 2.样式定义精确到像素的级别; css样式表的结构 ...
- CSS:CSS样式表及选择器优先级总结
我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式.内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢? 也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了 ...
- CSS样式----图文详解:css样式表和选择器
主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...
- CSS样式----css样式表和选择器(图文详解)
本文最初于2015-10-03发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样 ...
- CSS样式表及选择器相关内容(一)
CSS(Cascading Style Sheets)层叠样式表1.CSS级联-CSS层叠:规定在哪个HTML中使用哪个样式. body{ font-size:16px; //body默认字体大小 } ...
- CSS样式表及选择器相关内容(二)-伪类与伪元素选择器
伪类与伪元素选择器归纳: 一.伪类选择器(伪类以":"开头,用在选择器后,用于指明元素在某种特殊的状态下才能被选中) 1.a标签伪类选择器,其他标签类似 eg: ...
- css样式表分类、选择器分类、css基础样式
1 . 样式表 Cascading Style Sheet css优势: 内容与表现分离 网页的表现统一,容易修改 丰富的样式,使网页布局更加灵活 减少网页代码量,增加网页的浏览速度,节省 ...
- 【3-24】css样式表分类、选择器、样式属性
一.css样式表分类: (一)内联样式表:代码写在标签内的样式表 控制精确 代码重用性差 优先级最高 格式:<p style="样式属性">内容</p> ...
- CSS选择器及CSS样式表
前言 牛腩新闻发布系统中记忆最深的就是各种CSS选择器各种CSS样式,这些选择器之间肯定有它的优先级,包括CSS样式也一样,也是有它的优先级,本文介绍一些各种CSS选择器各种CSS样式以及它们的优先级 ...
随机推荐
- python排序算法的实现-快速排序
1. 算法描述: 1.先从数列中取出一个数作为基准数. 2.分区过程,将比这个数大的数全放到它的右边,小于或等于它的数全放到它的左边. 3.再对左右区间重复第二步,直到各区间只有一个数. 2.pyth ...
- 如何在C语言中调用Swift函数
在Apple官方的<Using Swift with Cocoa and Objectgive-C>一书中详细地介绍了如何在Objective-C中使用Swift的类以及如何在Swift中 ...
- Visual Studio 2010配置Opencv2.4.9
转自: http://blog.csdn.net/huang9012/article/details/21811129 这篇文章作为OpenCV的启程篇,自然少不了先系统地介绍OpenCV开发环境的配 ...
- C#新开一个线程取到数据,如何更新到主线程UI上面
一:问题 之前有被面试官问过,在WinForm中,要去网络上获取数据,由于网络环境等原因,不能很快的完成,因此会发生进程阻塞,造成主进程假死的现象,需要怎么解决? 二:思路 因此,往往是新 ...
- xsocks 64位平台下编译问题小记
1.src/common/public.h uint32_t lpParameter 改为 void* lpParameter; 2.SocksMgr.cpp DWORD WINAPI CSocksM ...
- data-role参数表:
data-role参数表: page 页面容器,其内部的mobile元素将会继承这个容器上所设置的属性 header 页面标题容器,这个容器内部可以包含文字.返回按钮.功能按钮等 ...
- JAVA IO NIO
http://www.cnblogs.com/handsome1013/p/4882862.html http://www.cnblogs.com/dolphin0520/ http://www.cn ...
- truncate/drop表非常慢,怎么办?用硬链接,极速体验
这个这个,我必须花巨大篇幅,记录下今天清空表记录的英雄壮举,可知道一个drop操作,执行了一下午啊一下午,这是要急出翔的节奏..呵呵,下面开始 我的需求:某表因历史原因,积压了1亿条记录,约占360G ...
- C#连接mysql数据库插入数据后获取自增长主键ID值
From: http://blog.csdn.net/zbc496218/article/details/51082983 MySqlConnection conn = new MySqlConnec ...
- ecshop的订单状态
ecshop的订单状态都是在ecs_order_info表中的字段里. 订单状态 未确认 取消 确认 已付款 配货中 已发货 已收货 退货 order_status 0 2 1 1 1 5 5 4 s ...