CSS3之路

CSS3<a href=https://www.elefans.com/category/jswz/34/1770107.html style= 之路"/>

CSS3之路

/ animated.css 演示网站不同浏览器有不同的前缀（较新版本的浏览器不需要前缀，为了向前兼容）
css3简化设计过程，加快页面载入速度
css3强大的功能：选择器
圆角效果
块阴影和文字阴影
色彩：支持更广泛的颜色定义
渐变效果
个性化字体：@Font-Face 定制字体
多背景图
边框背景图：边框应用背景图片
变形处理：旋转、缩放、倾斜、移动、动画等
多栏布局
媒体查询

圆角效果 border-radius可以向元素添加圆角边框（不仅可以用px单位，还能使用百分比或em，但后两者兼容性还不太好）    给所有角加相同的圆角： border-radius：10px；顺序为左上，右上，右下，左下，顺时针：border-radius：5px 4px 3px 2px；
例子：实心上半圆：把高度设为宽度的一半，然后border-radius的值至少设置为高度的值实心圆：宽高设为一致，四个圆角值都设为他们值的一半
阴影效果 box-shadow可以向盒子添加阴影（支持添加一个或者多个） box-shadow：x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [阴影方式]; inset只能写在参数的第一个或最后一个。其他位置无效
常用的阴影效果：#333
添加多个阴影时用逗号分隔开：box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;
text-shadow 只能给文字加阴影。box-shadow，可以给图片加，所有元素都可以加
阴影模糊半径和阴影扩展半径的区别：模糊半径值只能为正值，为0时表示不具有模糊效果，值越大边缘就越模糊扩展半径值可以是正负，正值表示整个阴影扩大，反之则缩小
x、y轴偏移量可以为负数，负数的话效果为原来相反方向
边框背景图 border-image    边框图片： .jpg
颜色 RGBA RGB是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制 alpha透明度的参数。 color：rgba(R,G,B,A)
   R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值。
渐变颜色 Gradient 分为线性渐变(linear)和径向渐变(radial) 线性渐变：第一个参数是指定渐变方向：默认为180deg 第二和第三个参数表示颜色的起始点和结束点（可以有多个颜色值）： background-image:linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet);
省略缩放    text-overflow 与 word-wrap text-overflow用来设置是否使用一个省略标记（...）表示对象内文本的溢出    text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及 溢出内容为隐藏（overflow:hidden），只有这样才能实现 溢出文本显示省略号的效果 word-wrap用来设置 文本行为，当前行超过指定容器的边界时是否断开转行第一个是强制软换行，第二个是强制换行
嵌入字体 @font-face 能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体这么设置了之后就能像使用普通字体一样设置字体样式例子：
文本阴影 text-shadow 设置文本的阴影效果 X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；
Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；
Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；
Color：是指阴影的颜色，其可以使用rgba色。
设置背景图片起始位置       background-origin：参数分别表示背景图片是从边框，还是 内边距（默认值），或者是 内容区域开始显示。如果背景不是no-repeat，这个属性无效，它会从边框开始显示
裁剪背景图片适应需要 background-clip:
参数分别表示从 边框、或 内填充，或者 内容区域向外裁剪背景。 no-clip表示不裁切，和 参数border-box显示同样的效果。 backgroud-clip默认值为 border-box
设置背景图片大小 background-size:
     设置背景图片的大小，以 长度值或 百分比显示，还可以通过 cover和 contain来对图片进行伸缩
1、auto：默认值，不改变背景图片的原始高度和宽度；
2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来 等比缩放；
3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；
4、cover：顾名思义为覆盖，即将背景图片等比缩放以 填满整个容器；
5、contain：容纳，即将背景图片等比缩放至 某一边紧贴容器边缘为止。
     多重背景
属性选择器

结构伪类选择器 ：root 匹配元素E所在文档的根元素    ： not 否定选择器    ：empty 空标签选择器    ：target 目标选择器，匹配文档（页面）的url的某个标志符的目标元素    常用于href属性
：first-child 选择父元素的第一个子元素的元素E ：last-child 选择父元素最后一个子元素E    :nth-child（n）定位某个父元素的一个或多个特定的子元素 “n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。    ：nth-last-child(n)    从某父元素的最后一个子元素开始计算 :first-of-type    定位一个父元素下的某个类型的第一个子元素 .wrapper > div:first-of-type
:nth-of-type(n)
:last-of-type .wrapper > div:last-of-type{ background: orange; } : nth-last-of-type(n)选择器
：only-child选择器父元素只有一个子元素，而且只有唯一的一个子元素
：only-of-type

：enabled选择器和：disabled选择器例子： input[type="text"]:enabled {    border: 1px solid #f36;    box-shadow: 0 0 5px #f36;         }
     input[type="text"]:disabled{    box-shadow: none;         }
：checked选择器定义复选框效果
：：selection选择器匹配突出显示的文本（用鼠标选择文本时的文本）可用来设置选中文本的颜色等等在火狐浏览器需要加前缀 ::-moz-selection
:read-only选择器指定处于只读状态元素的样式（元素中设置了readonly=‘readonly’）
例：      textarea:-moz-read-only{ border: 1px solid #ccc; height: 50px; resize: none; background: #eee; } ：read-write选择器用于指定元素处于非只读状态时的样式例：      input[type="text"]:read-write{ border:2px solid red; }
：：before和：：after 给元素的前面或后面插入内容（常和‘content’配合使用，最多用的是清除浮动）
变形与动画
变形旋转 rotate（）在二维空间进行操作      设置一个角度值，指定旋转的幅度。值为正则相对原点中心顺时针旋转，值为负则相对原点中心逆时针旋转
例如： .wrapper div{ width: 300px; height: 200px; line-height: 200px; text-align: center; background: green; color: #fff; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); transform:rotate(-20deg); }
扭曲skew（）可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜 rotate（）只是旋转，不会改变元素形状。skew只是改变元素旋转，不会旋转 Skew（）具有三种情况： 1、skew（x，y）使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形） 2、skew（x）使元素在水平方向扭曲变形（X轴扭曲变形） 3、skew（y）使元素在垂直方向扭曲变形（Y轴扭曲变形）
.wrapper div { width: 300px; height: 100px; line-height: 100px; text-align: center; color: #fff; background: orange; -webkit-transform: skew(45deg); -moz-transform:skew(45deg) transform:skew(45deg); }
缩放 scale（）让元素根据中心原点对对象进行缩放    Scale（）具有三种情况： 1、Scale（x，y）使元素在水平和垂直方向同时缩放（X轴和Y轴同时缩放） 2、Scale（x）使元素在水平方向缩放（X轴缩放） 3、Scale（y）使元素在垂直方向缩放（Y轴缩放）例子： .wrapper div:hover { opacity: .5; -webkit-transform: scale(1.5); -moz-transform:scale(1.5) transform: scale(1.5); }
位移 translate（）让元素向指定方向移动（可以吧元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件）可以指定px或者百分比      translate（）具有三种情况： 1、 translate （x，y）使元素在水平和垂直方向同时移动（X轴和Y轴同时移动） 2、 translate （x）使元素在水平方向移动（X轴移动） 3、 translate （y）使元素在垂直方向移动（Y轴移动）      例子： -webkit-transform: translate(50px,100px); -moz-transform:translate(50px,100px); transform: translate(50px,100px);
矩阵 matrix（）是一个含六个值的（a,b,c,d,e,f）变换矩阵，用来指定一个2D变换，相当于直接应用      一个[a b c d e f]变换矩阵。就是基于水平方向和处置方向重新定位此元素
原点 transform-origin 任何一个元素都有一个中心点，默认情况中心点是居于元素X轴和Y轴的50%处 css变形进行的旋转、位移、缩放、扭曲等操作都是以元素自己中心位置改变    .transform-origin div { -webkit-transform-origin: left top; transform-origin: left top; }

动画过渡属性 transition
   transition-property属性例子： div { width: 200px; height: 200px; background: red; margin: 20px auto; -webkit-transition-property: width; transition-property: width; -webkit-transition-duration:.5s; transition-duration:.5s; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; -webkit-transition-delay: .18s; transition-delay:.18s; } div:hover { width: 400px; }
transition-duration 过渡所需时间主要设置一个属性过渡到另一个属性所需的时间
transition-timing-function 过渡的“缓动函数” 主要用于指定浏览器的过渡速度，以及过渡期间的操作进展情况    transition-delay 过渡延迟时间(改变元素属性值后多久开始执行)

Keyframes介绍 keyframes被称为关键帧在CSS3中主要以'@keyframes'开头,后面紧跟着是动画名称加上一对花括号{....} 括号中就是一些不同时间段样式规则用于将一段动画分为几个时间段分别设置    在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果浏览器的支持情况： Chrome 和 Safari 需要前缀 -webkit-；Foxfire 需要前缀 -moz-     <div>鼠标放到我身上</div>
   @keyframes wobble { 0% { margin-left: 100px; background:green; } 40% { margin-left:150px; background:orange; } 60% { margin-left: 75px; background: blue; } 100% { margin-left: 100px; background: red; } } div { width: 100px; height: 100px; background:red; color: #fff; } div:hover{ animation: wobble 5s ease .1s; } 设置为循环效果 -webkit-animation-iteration-count: infinite;   -ms-animation-iteration-count: infinite;   animation-iteration-count: infinite;用这个就可以循环，如果 “infinite”可以改成数字，就是你想循环多少次
animation-name属性调用动画主要是用来调用@keyframes定义好的动画（动画名称区分大小写）
语法： animation-name: none | IDENT[,none|DENT]*;

1、IDENT是由 @keyframes 创建的动画名，上面已经讲过了（animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致）；

2、none为默认值，当值为 none 时，将没有任何动画效果,这可以用于覆盖任何动画。

注意：需要在 Chrome 和 Safari 上面的基础上加上 -webkit-前缀，Firefox加上 -moz-
animation-duration属性设置CSS3动画播放时间就是元素播放动画所持续的时间长    div:hover { animation-name: toradius; animation-duration: 10s; animation-timing-function: ease-in-out; animation-delay: .1s; } animation-timing-function属性设置动画播放方式    例子： animation-timing-function:ease
animation-delay 动画开始播放时间和transition-delay属性一样，定义浏览器开始执行动画之前等待的时间 animation-duration: 10s;
animation-iteration-count 动画播放次数
1、其值通常为整数，但也可以使用带有小数的数字，其默认值为1，这意味着动画将从开始到结束只播放一次。
2、如果取值为 infinite，动画将会无限次的播放。
注意：Chrome或Safari浏览器，需要加入-webkit-前缀！
animation-direction属性设置动画播放方向 属性值：
1、 normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；
2、另一个值是 alternate，他的作用是，动画播放在 第偶数次向前播放， 第奇数次向反方向播放。
animation-play-state属性设置动画的播放状态    属性值： 其主要有两个值： running和 paused

其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态
例如，页面加载时，动画不播放。代码如下： animation-play-state:paused
animation-fill-mode属性定义动画开始之前和结束之后发生的操作 属性值： 在默认情况之下，动画不会影响它的关键帧之外的属性，使用animation-fill-mode属性可以修改动画的默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始，或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具有这两个效果
布局样式相关 Columns 多列布局    为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个 多列布局模块。它主要应用在文本的 多列布局方面，这种布局在报纸和杂志上都使用了几十年了，但要在Web页面上实现这样的效果还是有相当大的难度，庆幸的是，CSS3的多列布局可以轻松实现 语法： columns：<column-width> || <column-count>

     例子：columns: 200px 2; //显示两栏显示，每栏宽度为200px
Column-width    column-width的使用和CSS中的width属性一样，不过不同的是，column-width属性在定义元素列宽的时候，既可以单独使用，也可以和多列属性中其他属性配合使用。其基本语法如下所示； column-width: auto | <length>
Column-count属性用来给元素指定想要的列数和允许的最大列数 将列分成四列显示：column-count：4；
Column-gap属性列间距    Colunm-rule属性定义列与列之间的边框宽度、边框样式和边框颜色 有点类似常用的border属性。但column-rule是不占用任何空间位置
Column-span 跨列设置用来定义一个分列元素中的子元素能跨多少列（使莫一子元素不进行分列，横跨所有列）    盒子模型 CSS中有一种基础设计模式叫盒模型，盒模型定义了Web页面中的元素中如何来解析。CSS中每一个元素都是一个盒模型，包括html和body 标签元素。在盒模型中主要包括width、height、border、background、padding和margin这些属性，而且他们之间的层次关系可以相互影响
CSS3中新增了box-sizing属性，能够事先定义盒型的尺寸解析方式 box-sizing:content-box | border-box | inherit

伸缩布局 Flexbox布局 Flexbox布局功能有以下几点：
第一，屏幕和浏览器窗口大小发生改变也可以灵活调整布局；
第二，可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；
第三，可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；
第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；
第五，可以控制元素在页面上的布局方向；
第六，可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。
1、创建一个flex容器

任何一个flexbox布局的第一步是需要创建一个flex容器。为此给元素设置display属性的值为flex。在Safari浏览器中，你依然需要添加前缀-webkit，

.flexcontainer{ display: -webkit-flex; display: flex; }
2、Flex项目显示
Flex项目是Flex容器的子元素。他们沿着主要轴和横轴定位。默认的是沿着水平轴排列一行。你可以通过flex-direction来改变主轴方向修改为column，其默认值是row
3、Flex项目列显示 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }
4、Flex项目移动到顶部

如何将flex项目移动到顶部，取决于主轴的方向。如果它是垂直的方向通过align-items设置；如果它是水平的方向通过justify-content设置。

.flexcontainer{ -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; justify-content: flex-start; }

5、Flex项目移动到左边

flex项目称动到左边或右边也取决于主轴的方向。如果flex-direction设置为row，设置justify-content控制方向；如果设置为column，设置align-items控制方向。

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start; }

6、Flex项目移动到右边

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-end; justify-content: flex-end; }

7、水平垂直居中

在Flexbox容器中制作水平垂直居中是微不足道的。设置justify-content或者align-items为center。另外根据主轴的方向设置flex-direction为row或column。

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }

8、Flex项目实现自动伸缩

您可以定义一个flex项目，如何相对于flex容器实现自动的伸缩。需要给每个flex项目设置flex属性设置需要伸缩的值。

.bigitem{ -webkit-flex:200; flex:200; } .smallitem{ -webkit-flex:100; flex:100; }
Media Queries 媒体类型使不同的终端设备的使用者有更好的体验（通过CSS3来查询媒体）一、媒体类型媒体引用类型媒体类型的引用方法也有多种，常见的有： link标签、 @import和CSS3新增的 @media几种：
link方法： link方法引入媒体类型其实就是在<link>标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型 <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" />
@import方法： @import可以引用样式文件，同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式，一种是在样式中通过@import调用另一个样式文件；另一种方法是在<head></head>标签中的<style></style>中引入，但这种使用方法在IE6~7都不被支持，如样式文件中调用另一个样式文件时，就可以指定对应的媒体类型
@importurl(reset.css) screen; @importurl(print.css) print; 在<head>中的<style>标签中引入媒体类型方法 <head> <style type="text/css"> @importurl(style.css) all; </style> </head>

@media方法： @media是CSS3中新引进的一个特性，被称为媒体查询。在页面中也可以通过这个属性来引入媒体类型。 @media引入媒体类型和@import有点类似也具有两方式

（1）在样式文件中引用媒体类型： @media screen { 选择器{/*你的样式代码写在这里…*/} }
（2）使用@media引入媒体类型的方式是在<head>标签中的<style>中引用。 <head> <style type="text/css"> @media screen{ 选择器{/*你的样式代码写在这里…*/} } </style> </head>
Media Queries使用方法
@media 媒体类型and （媒体特性）{你的样式}
媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分指的是媒体特性，第二部分为媒体特性所指定的值，而且这两个部分之间使用冒号分隔。例如： (max-width: 480px)
1. 最大宽度max-width
“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如： @media screen and (max-width:480px){ .ads { display:none; } }

上面表示的是：当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏
2.最小宽度min-width
“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。 @media screen and (min-width:900px){ .wrapper{width: 980px;} }

上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。
3、多个媒体特性使用

Media Queries可以使用关键词"and"将多个媒体特性结合在一起。也就是说，一个Media Query中可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种媒体类型。

当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”，如下所示。

@media screen and (min-width:600px) and (max-width:900px){
body {background-color:#f5f5f5;} }

4.设备屏幕的输出宽度Device Width
在智能设备上，例如iPhone、iPad等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。同样的，对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。 <link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的“max-device-width”所指的是设备的实际分辨率，也就是指可视面积分辨率
5、not关键词

使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。换句话说，not关键词表示对后面的表达式执行取反操作，如：

@media not print and (max-width: 1200px){样式代码} 上面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中
6、only关键词

only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性的设备，正常调用样式，此时就当only不存在；表示不支持媒体特性但又支持媒体类型的设备，这样就会不读样式，因为其先会读取only而不是screen；另外不支持Media Queries的浏览器，不论是否支持only，样式都不会被采用。如

<linkrel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />
Responsive设计 响应式设计要考虑元素布局的秩序，而且还需要做到“有求必应”，那就需要满足以下三个条件：网站必须建立灵活的网格基础；引用到网站的图片必须是可伸缩的；不同的显示风格，需要在Media Queries上写不同的样式
1、流体网格 流体网格是一个简单的网格系统，这种网格设计参考了流体设计中的网格系统，将每个网格格子使用百分比单位来控制网格大小。这种网格系统最大的好处是让你的网格大小随时根据屏幕尺寸大小做出相对应的比例缩放
2、弹性图片 弹性图片指的是不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。而实现方法是比较简单，一句代码就能搞定的事情 img {max-width:100%;}
3、媒体查询
4、分辨率 屏幕分辨简单点说就是用户显示器的分辨率，深一点说，屏幕分辨率指的是用户使用的设备浏览您的Web页面时的显示屏幕的分辨率，比如说智能手机浏览器、移动电脑浏览器、平板电脑浏览器和桌面浏览器的分辨率。Responsive设计利用Media Queries属性针对浏览器使用的分辨率来适配对应的CSS样式。因此屏幕分辨率在Responsive设计中是一个很重要的东西，因为只有知道Web页面要在哪种分辨率下显示何种效果，才能调用对应的样式
5、主要断点很重要的一个部分 简单的描述就是，设备宽度的临界点。在Media Queries中，其中媒体特性“min-width”和“max-width”对应的属性值就是响应式设计中的断点值。简单点说，就是使用主要断点和次要断点，创建媒体查询的条件。而每个断点会对应调用一个样式文件（或者样式代码）
Responsive布局技巧
在Responsive布局中，可以毫无保留的丢弃：
第一，尽量少用无关紧要的div；
第二，不要使用内联元素（inline）；
第三，尽量少用JS或flash；
第四，丢弃没用的绝对定位和浮动样式；
第五，摒弃任何冗余结构和不使用100%设置
重要的：
第一，使用HTML5 Doctype和相关指南；
第二，重置好你的样式（reset.css）；
第三，一个简单的有语义的核心布局；
第四，给重要的网页元素使用简单的技巧，比如导航菜单之类元素
使用这些技巧，无非是为了保持你的HTML简单干净，而且在你的页面布局中的关键部分（元素）不要过分的依赖现代技巧来实现，比如说CSS3特效或者JS脚本。
快速测试的方法： 首先禁掉你页面中所有的样式（以及与样式相关的信息），在浏览器中打开，如果你的内容排列有序，方便阅读，那么你的这个结构不会差到哪里去

Respinsive设计--meta标签

最后还有一个不可或缺的东东，那就是meta标签，可以说，在响应式设计中如果没有这个meta标签，你就是蹩脚的，响应式设计就是空谈。

个meta标签被称为可视区域meta标签，其使用方法如下。