css3的三大特性以及移动端说明
css3的三大特性：
一、层叠性
所谓层叠性是指多种CSS样式的叠加。
是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。
一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。
- 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
- 样式不冲突，不会层叠
CSS最后的执行口诀： 长江后浪推前浪，前浪死在沙滩上。
二、继承性
所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
简单的理解就是： 子承父业。
CSS最后的执行口诀： 龙生龙，凤生凤，老鼠生的孩子会打洞。
注意：
恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）
三、优先级
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。
在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：
继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。
总结优先级：
- 使用了 !important声明的规则。
- 内嵌在 HTML 元素的 style属性里面的声明。
- 使用了 ID 选择器的规则。
- 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
- 使用了元素选择器的规则。
- 只包含一个通用选择器的规则。
- 同一类选择器则遵循就近原则。
总结：权重是优先级的算法，层叠是优先级的表现。
Mate
<!DOCTYPE html> <!-- H5标准声明，使用 HTML5 doctype，不区分大小写 -->
<head lang="en"> <!-- 标准的 lang 属性写法 -->
<meta charset="utf-8"> <!-- 声明文档使用的字符编码 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <!-- 优先使用 IE 最新版本和 Chrome -->
<meta name="description" content="不超过150个字符"/> <!-- 页面描述 -->
<meta name="keywords" content=""/> <!-- 页面关键词 -->
<meta name="author" content="name, email@gmail.com"/> <!-- 网页作者 -->
<meta name="robots" content="index,follow"/> <!-- 搜索引擎抓取 -->
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> <!-- 为移动设备添加 viewport -->
<!-- 设置页面不缓存 -->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
Mate移动端的属性
在移动端开发，最常看到head里面设置了下面这个属性
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" >
- width ： 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
- initial-scale：设置页面的初始缩放值，为一个数字，可以带小数
- minimum-scale：允许用户的最小缩放值，为一个数字，可以带小数
- maximum-scale：允许用户的最大缩放值，为一个数字，可以带小数
- height：设置layout viewport 的高度，这个属性并不重要，很少使用
- user-scalable：是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许
特殊说明：（IE6,7,8）支持，需要使用css3mediaqueries.js
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]>
meta http-equiv
http-equiv顾名思义，相当于http的文件头作用。把 content 属性关联到 HTTP 头部。 http-equiv属性主要有以下几种参数：
- content-Type(设定网页字符集)(推荐使用HTML5的方式)
说明：用于设定网页字符集，便于浏览器解析与渲染页面举例：
<meta http-equiv="content-Type" content="text/html;charset=utf-8"> <!--旧的HTML，不推荐 -->
- X-UA-Compatible(浏览器采取何种版本渲染当前页面)
说明：用于告知浏览器以何种版本来渲染页面。（一般都设置为最新模式，在各大框架中这个设置也很常见。）
<meta http-equiv="X-UA-Compatibel" conent="IE=edge,chrome=1" > <!-- 指定IE和Chrome使用最新版本渲染当前页面 -->
- cache-control(指定请求和响应遵循的缓存机制)
说明：指定浏览器如何缓存某个响应以及缓存多长时间
<meta http-equiv="cache-contorl" conent="no-cache">
共有以下几种用法：
- no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。
- no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）
- public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果。
- private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说CDN就不允许缓存private的响应）
- maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒。
- expires(网页到期时间)
说明:用于设定网页的到期时间，过期后网页必须到服务器上重新传输。举例：
<meta htttp-equiv="expires" content="Sunday 26 October 2019 01:00 GMT">
- Pragma(cache模式)
说明：是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出 。举例：
＜meta http-equiv="pragma" content="no-cache"＞
- Set-Cookie(cookie设定)
说明：如果网页过期。那么这个网页存在本地的cookies也会被自动删除。举例：
<meta http-equiv="Set-Cookie" content="name, date"> <!-- 格式 -->
<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> <!-- 具体范例 -->
- refresh(自动刷新并指向某页面)
说明：网页将在设定的时间内，自动刷新并调向设定的网址。举例:
<meta http-equiv="refresh" content="2；URL=https://segmentfault.com/u/clearlove07"> <!-- 意思是2秒后跳转向我的博客 -->
css3的三大特性以及移动端说明的更多相关文章
- CSS3的三大特性
在学习CSS 的时候,我们必须要熟练和理解CSS 的三大特性,那么CSS 的三大特性又是什么呢? CSS 的三大特性:层叠 继承 优先级 ,CSS 三大特性是我们学习CSS 必须掌握的三个特性. 首 ...
- python 之 前端开发（CSS三大特性、字体属性、文本属性、背景属性）
11.38 css三大特性 11.381 继承性 1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性2.注意: 1.只有以color.font-.text-.l ...
- 前端基础-CSS的各种选择器的特点以及CSS的三大特性
一. 基本选择器 二. 后代选择器.子元素选择器 三. 兄弟选择器 四. 交集选择器与并集选择器 五. 序列选择器 六. 属性选择器 七. 伪类选择器 八. 伪元素选择器 九. CSS三大特性 一. ...
- HTML5和CSS3的新特性
html5的新特性 添加了用于媒介回放的 <video>,<audio> 元素 添加了语义标签譬如 header.footer.nav 等等元素 添加了用于绘画的 canvas ...
- C++ 面向对象的三大特性和五个原则
1.三大特性: 封装:就是把客观事物封装成抽象的类,并且类可以把自己的数据和方法只让可信的类或者对象操作,对不可信的进行信息隐藏.一个类就是一个封装了数据以及操作这些数据的代码的逻辑实体.在一个对象内 ...
- CSS3常用新特性
CSS3的新特性 新增CSS3特性有兼容性问题,ie9+才支持 移动端支持优于PC端 新增选择器和盒子模型以及其他特性 CSS新增选择器 属性选择器 属性选择器可以根据元素特定属性来选择元素,这样就可 ...
- oop的三大特性和传统dom如何渲染
OOP的三大特性是什么: 封装 :就是将一个类的使用和实现分开,只保留部分接口和方法与外部联系继承:子类自动继承其父级类中的属性和方法,并可以添加新的属性和方法或者对部分属性和方法进行重写.继承增加了 ...
- CSS/CSS3语法新特性笔记
CSS层叠样式表 三大特性 层叠性:相同的样式会覆盖 继承性:属性可向下继承 优先级:范围越小权重越高 选择器 基础选择器 标签选择器 1 body { 2 color:#fff; 3 } 类选择器 ...
- Fis3的前端工程化之路[三大特性篇之声明依赖]
Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...
随机推荐
- [CSP-S模拟测试]:trade（反悔贪心）
题目传送门(内部题62) 输入格式 第一行有一个整数$n$.第二行有$N$个整数:$a_1\ a_2\ a_3\cdot\cdot\cdot a_n$. 输出格式 一行一个整数表示最大收益. 样例 样 ...
- LNMP环境搭建最好用的两种方法（亲测）
经历了一个PHP服务器项目,手动编译部署PHP,Swoole环境太让人郁闷了,所以尝试过两种不错的方法,分享出来方便同样经历痛苦的coder. 第一种方式: 安装LNMP按照这里的步骤执行,网址戳我 ...
- 数据可视化-D3js-展示古地理图和古地理坐标反算^_^gplates古地理坐标反算接口
在线演示 <!DOCTYPE html> <html> <head> <link type="image/png" rel="i ...
- python内置装饰器
前言 接着上一篇笔记,我们来看看内置装饰器property.staticmethod.classmethod 一.property装饰器 1. 普通方式修改属性值 code class Celsius ...
- day30—使用Flexbox和CSS Grid实现高效布局实践
转行学开发,代码100天——2018-04-15 (今天是代码开发的第30天,但是代码记录有些滞后,尽快补上.日后要严格执行,避免学习进度和内容相对滞后.) 今天,记录“前端大全”里分享的一篇关于利用 ...
- tomcat启动控制台报Exception in thread ''main".......“Could not find the main class:.....Bootstrap”问题
startup.bat文件打开最后end下一行加pause调试,重新启动tomcat,发现配置没问题,但是依然报错,发现是jdk版本问题,jdk1.6无法与tomcat8适配,重新装个1.7版本的jd ...
- 深入浅出WPF(Binding篇1)
Binding在业界的使用一直是音译而来的,称为"Binding".Binding的源是逻辑数据对象,目标则是UI层上面的控件对象.数据通过Binding送达UI层,被UI层展示出 ...
- msyql join语句执行原理
首先,我建了一个表t2,里面有1000条数据,有id,a,b三个字段,a字段加了索引 然后我又建立一个t1表,里面有100条数据,和t2表的前一百条数据一致,也是只有id,a,b三个字段,a字段加了索 ...
- RTSP取流设备密码含@
一.rtsp取流格式简介 RTSP的基本取流格式为:rtsp://username:password@ip_addr/... 如海康的ip地址为:rtsp://admin:admin123@10.1. ...
- java8新特性-简介
一.主要内容 :其中最为核心的为lambda 表达式 与 Stream API lambda表达式 函数式接口 方法引用与构造器引用 Stream API 接口中的默认方法与静态方法 新时间日期API ...