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.算法: 设有一组关键字{ K 1 , K 2 ,…, K n }:排序开始就认为 K 1 是一个有序序列:让 K 2 插入上述表长为 1 的有序序列,使之成为一个表长为 2 的有序序列:然后让 K ...
- NYOJ 741 "数学家"ST
"数学家"ST 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描写叙述 ST是个非常特别的人类,不仅喜欢做一些不同平常的事,并且对于在无聊的时候怎样打发时 ...
- .net_ckeditor+ckfinder的图片上传配置
CKEditor和CKFinder的最新版可以到官方网站(http://cksource.com)上下载获得. 把以上两个资源放到网站的根目录: /CKEditor 和 /CKFinder (不区分大 ...
- 面向.Net程序员的Sql版本管理
代码版本管理基本上程序员们都知道 TFS GIT SVN等等 但是对于数据库版本管理 java程序员或许会了解一些 但是.Net程序员收获的资料应该不多. 特别是现在云概念使用越来越广的情况下,与应用 ...
- 一个winform带你玩转rabbitMQ
源码已放出 https://github.com/dubing/MaoyaRabbit 本章分3部分 一.安装部署初探 二.进阶 三.api相关 安装 部署 初探 先上图 一. 安装部署 下载 rab ...
- distri.lua的web运维工具
我的新手游项目很快就要进入到寻找发行商的环节,最近几天相对较空闲,逐将工作重心转移到服务器组运维工具的制作上. 回想一年之前经历的那个不算成功的端游项目,因为运维工具设计得不合理,使用十分不方便,游戏 ...
- Jdbc如何从PostgreSql读取海量数据？PostgreSql源代码分析纪录
前言: 最近做数据同步,需要从PostgreSql获取数据,发现一旦数据比较多,那么读取的速度非常慢,并且内存占用特别多&GC不掉. 代码样例: 为了方便讲解,下面写了事例代码,从b2c_or ...
- Eplan 2D安装版布局，部件、端子竖放
部件竖放,不是通过变量的选择实现,而是通过设置实现的,具体设置在: 选项-设置-用户-2D安装板布局: 部件方向-更改为 垂直 部件放置-旋转角度-更改为90° 这样在连续放置部件的时候就变为竖放了, ...
- 【Android】如何写一个JsBridge
JsBridge 简介 Android JsBridge 就是用来在 Android app的原生 java 代码与 javascript 代码中架设通信(调用)桥梁的辅助工具. 原文地址点这里 gi ...
- 误删dpkg的/var/lib/dpkg/info文件夹的解决办法 zhuan
今天安装软件时时,出现这样的错误提示:E: Sub-process /usr/bin/dpkg returned an error code (1) 上网查解决方案,被网上误导,一不小心 ...