css属性书写顺序分析
我们直接从例子出发
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?speta9');
src: url('fonts/icomoon.eot?speta9#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?speta9') format('truetype'),
url('fonts/icomoon.woff?speta9') format('woff'),
url('fonts/icomoon.svg?speta9#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
这个例子对IE做了兼容,首先看第二个src,因为IE识别不了多属性值(也可以说识别不了‘,’),所以把适应IE的格式放在第一个;再看一下我们为什么写了两个src,这里也是做了一个兼容,因为IE自己的格式也分为IE8以前和IE9适配的格式,大家记住书写一样的属性时,在只能识别一种的浏览器中,另外一种将被忽略,在能适配两种的的浏览器中,后面的会覆盖前面的。
我们再看一个例子
a{
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
这里我们习惯把不带浏览器前缀的放在后面,因为我们想要在所有浏览器统一标准时,我们的通用属性覆盖我们的hack。
css属性书写顺序分析的更多相关文章
- Discuzx系统 CSS 编码规范,CSS属性书写顺序
1. 属性写在一行内,属性之间.属性名和值之间以及属性与“{}”之间须有空格,例如:.class { width: 400px; height: 300px; } 2. 属性的书写顺序: ...
- Mozilla推荐的CSS属性书写顺序及命名规则
传说中的Mozilla推荐 /* mozilla.org Base Styles * maintained by fantasai */ /* Suggested order: * display * ...
- CSS属性书写顺序及命名规则
/* mozilla.org Base Styles * maintained by fantasai */ /* Suggested order: * display * list-style * ...
- 前端开发--css属性书写顺序
css属性顺序是css良好编码风格的一部分,有助于提高代码可读性,便于发现代码问题,有利于团队合作.(依次排后) example { /*显示属性*/ display: ; visibility: ; ...
- css属性书写顺序(重点)
- css属性编写顺序+mysql基本操作+html细节(个人笔记)
css属性编写顺序: 影响文档流的属性(比如:display, position, float, clear, visibility, table-layout等) 自身盒模型的属性(比如:width ...
- HTML编码规则、CSS属性声明顺序--简介
From AmazeUI:http://amazeui.org/getting-started/html-css-guide HTML 属性顺序 HTML 属性应当按照以下给出的顺序依次排列,确保代码 ...
- css3属性书写顺序
今天写了个小demo想要利用transition 和transform以及transition-delay来实现鼠标移上去的延时动画,结果发现不能实现transition的变化效果.调试后发现只有把 ...
- css样式书写顺序
这里推荐先写显示属性,再写自身属性,再写文字属性:并不代表非得按这个顺序写,但这种写法可以使css结构更清晰易读,修改起来比较方便. 而且在团队项目中能更好地提高效率. //显示属性 display ...
随机推荐
- FortiGate下用户访问特定网址不通
1.现状: 如图,上网行为管理和防火墙控制用户的数据访问,到外网的出口链路有2条:联通的和电信的,其中联通的优先级较高. 2.现象: 用户访问www.xxxxbbs.com不通 3.分析 在上网行为管 ...
- map与forEach区别
1. forEach()返回的是undefined 不可以链式调用 return没有用 2. map()返回一个新数组 原数组不会改 3. 没办法终止或者跳过forEach()和map循环 除非抛 ...
- React-router4 第七篇 Recursive Paths 递归路径
https://reacttraining.com/react-router/web/example/recursive-paths import React from 'react' import ...
- MySQL开发——【多表关系、引擎、外键、三范式】
多表关系 一对一关系 一对多或多对一关系 多对多关系 MySQL引擎 所谓的MySQL引擎就是数据的存储方式,常用的数据库引擎有以下几种: Myisam与InnoDB引擎之间的区别(面试) ①批量插入 ...
- MySQL开发——【数据的基本操作】
增加数据 基本语法: insert into 数据表 [字段名称1,字段名称2..] values (数据1,数据2...); 特别注意:针对数据类型整型.浮点型数据可以不加单引或双引号,但是如果字段 ...
- jquery.validate.js的简单示例
一.官方资料 官网 github 二.html <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
- 微信H5开发
1,line-height 不垂直居中 解决方法:用padding写高度 2,手指滑动事件 touchmove 3,页面滚动事件:touchmove 4,要写不同手机适配的基数font-siz ...
- exchange 2010 数据库管理
1. 查看数据库中空白空间 Get-MailboxDatabase databasename -Status | FL AvailableNewMailboxSpace 2.卸载数据库 Dismoun ...
- 模板学习实践一 accumulationtraits
// 11111.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #include &l ...
- Linux 第五天
网络命令 1)write 给在线用户发信息(需按Crtl+D保存结束,w命令可看在线用户) 语法:write 用户名 2)wall 发广播信息 英文原意:write all 语法:wall 信息 3) ...