css3的三大特性：

一、层叠性

所谓层叠性是指多种CSS样式的叠加。

是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。

一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。

  1. 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
  2. 样式不冲突，不会层叠

CSS最后的执行口诀：  长江后浪推前浪，前浪死在沙滩上。

二、继承性

所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。

简单的理解就是： 子承父业。

CSS最后的执行口诀：  龙生龙，凤生凤，老鼠生的孩子会打洞。

注意：

恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）

三、优先级

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
​
行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
​
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
​
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

总结优先级：

  1. 使用了 !important声明的规则。
  2. 内嵌在 HTML 元素的 style属性里面的声明。
  3. 使用了 ID 选择器的规则。
  4. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
  5. 使用了元素选择器的规则。
  6. 只包含一个通用选择器的规则。
  7. 同一类选择器则遵循就近原则。

　　总结：权重是优先级的算法，层叠是优先级的表现。

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的三大特性以及移动端说明的更多相关文章

  1. CSS3的三大特性

    在学习CSS 的时候,我们必须要熟练和理解CSS 的三大特性,那么CSS 的三大特性又是什么呢? CSS 的三大特性:层叠 继承 优先级  ,CSS 三大特性是我们学习CSS 必须掌握的三个特性. 首 ...

  2. python 之 前端开发（CSS三大特性、字体属性、文本属性、背景属性）

    11.38 css三大特性 11.381 继承性 1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性​2.注意:    1.只有以color.font-.text-.l ...

  3. 前端基础-CSS的各种选择器的特点以及CSS的三大特性

    一. 基本选择器 二. 后代选择器.子元素选择器 三. 兄弟选择器 四. 交集选择器与并集选择器 五. 序列选择器 六. 属性选择器 七. 伪类选择器 八. 伪元素选择器 九. CSS三大特性 一. ...

  4. HTML5和CSS3的新特性

    html5的新特性 添加了用于媒介回放的 <video>,<audio> 元素 添加了语义标签譬如 header.footer.nav 等等元素 添加了用于绘画的 canvas ...

  5. C++ 面向对象的三大特性和五个原则

    1.三大特性: 封装:就是把客观事物封装成抽象的类,并且类可以把自己的数据和方法只让可信的类或者对象操作,对不可信的进行信息隐藏.一个类就是一个封装了数据以及操作这些数据的代码的逻辑实体.在一个对象内 ...

  6. CSS3常用新特性

    CSS3的新特性 新增CSS3特性有兼容性问题,ie9+才支持 移动端支持优于PC端 新增选择器和盒子模型以及其他特性 CSS新增选择器 属性选择器 属性选择器可以根据元素特定属性来选择元素,这样就可 ...

  7. oop的三大特性和传统dom如何渲染

    OOP的三大特性是什么: 封装 :就是将一个类的使用和实现分开,只保留部分接口和方法与外部联系继承:子类自动继承其父级类中的属性和方法,并可以添加新的属性和方法或者对部分属性和方法进行重写.继承增加了 ...

  8. CSS/CSS3语法新特性笔记

    CSS层叠样式表 三大特性 层叠性:相同的样式会覆盖 继承性:属性可向下继承 优先级:范围越小权重越高 选择器 基础选择器 标签选择器 1 body { 2 color:#fff; 3 } 类选择器 ...

  9. Fis3的前端工程化之路[三大特性篇之声明依赖]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

随机推荐

  1. 破解Revealapp的试用时间限制

    转载自:http://jingwei6.me/2014/02/28/reveal_crack.html Revealapp作为分析iOS app UI结构的利器,还是非常称手的,89刀的价格也是物有所 ...

  2. php面试专题---MYSQL查询语句优化

    php面试专题---MYSQL查询语句优化 一.总结 一句话总结: mysql的性能优化包罗甚广: 索引优化,查询优化,查询缓存,服务器设置优化,操作系统和硬件优化,应用层面优化(web服务器,缓存) ...

  3. 关于Vue+iview的前端简单的导入数据（excel）

    前一段时间项目经历了纯前端处理导入excel文件并处理等问题,数据量大的时候时间上长的一比,三千条数据需要三四秒甚至更长,不管产品咋想的,具体做法为: 首先下载一个这玩意: 进行简单封装一下: < ...

  4. Fedora 的截屏功能

    写写博客少不了截图,Windows 上使用微信的快捷键 Ctrl+A 截图并且可以随意编辑是挺方便的,开始在 Linux 上还没有找到这样的软件,只找到了不支持编辑的简单截图软件. 1. 使用 Scr ...

  5. Tomcat各个版本的下载地址包括源码

    Tomcat各个版本的下载地址包括源码: http://archive.apache.org/dist/tomcat **************** 选择版本 **************** ** ...

  6. 个人珍藏的PC和安卓应用列表

    个人珍藏的PC和安卓应用列表 PC应用名称 功能描述 注意事项 存储位置 维棠FLV视频下载软件 可用来下载腾讯视频的视频 将视频列表的网址粘贴到维棠软件左侧"下载"的地址中即可批 ...

  7. Using Tensorflow SavedModel Format to Save and Do Predictions

    We are now trying to deploy our Deep Learning model onto Google Cloud. It is required to use Google ...

  8. P4542 [ZJOI2011]营救皮卡丘（Floyd+网络流）

    P4542 [ZJOI2011]营救皮卡丘 乍一看似乎没啥题相似的 仔细一看,$N<=150$ 边又是双向边,似乎可以用Floyd搞   先跑一遍Floyd处理出$dis[i][j]$ 注意到走 ...

  9. 【JMeter4.0】二、JMeter4.0安装与配置

    二.安装配置JMeter jmeter是一个纯java工具,因此,JDK必不可少,现在最新版的jmeter是4.0,建议使用1.8及以上的JDK安装配置JDK,如没有,请见:[JMeter4.0]一. ...

  10. 68.Palindromic Substrings（回文字符串的个数）

    Level:   Medium 题目描述: Given a string, your task is to count how many palindromic substrings in this ...