响应式设计学习笔记

1.<htmllang="zh-CN"> 防止en时访问提示翻译。

2.<metahttp-equiv="x-ua-compatible"content="ie=edge">强制使用最新的ie浏览器渲染界面，ie11这个模式已被弃用。

3.<metaname="viewport"content="width=dervice-width,initial-scale=1">

4.<!--[if lt/gt/lte/gte IE8]>.<![endif]-->

<!--[if lte IE8]><p>您所用的浏览器太老了，请[更新浏览器：]<![endif]-->(http://browsehappy.com)</p>.<![endif]-->

5.class命名，一般全部小写，中间用-间隔；ip命名：首字母小写的驼峰法。用class写样式，用id写js。

6.logo这样必不可少的图片，嵌入到页面中：'<nav><imgsrc="..."/></nav>'。。其他装饰性的（比如花边什么）可以写进class里当背景。用户禁用样式，或者用自己

7.http://necolas.github.io/normalize.css/使用 normalize.css来初始化html5标签

8.px 是绝对单位，是像素的个数

em,rem是相对单位

em: 1)相对于父级元素的font--size  

2)具有继承性  

3）当没有设置font-size时，浏览器会有一个默认的em设置：1em=16px;

rem是相对于根html ,其他与em一样

font-size:62.5%:1rem=10px

font-size:100%:1rem=16px

实际写页面的时候，margin,padding,font-size等等这些都可以用rem里做单位。width用%来定义，，尽量不要定义div的height,让内容撑起来。单行文本用line-height而不定义height。多行内容也不定义height，用padding和内容撑起来，，连button都不用height..

9.顶部导航的第一个li没有左边框，最后一个没有有边框 样式设置小技巧(ul li+li的意义)：

<ul><li></li><li></li><li></li></ul>

ul li+li{border-left:1px solid red;margin-left:-3px"}//指的是从第二个开始到最后一个的所有li。。

ul li{display:inline-block;}，导航这样的可以用display:inline-block;来浮动，没必要用float 再来清float。设置负margin来清除li之间的换行符。

10.媒体查询：

1）单位选择：分辨率不同，功能不同，用px；分辨率不同，只有样式不同，其他都相同，用相对em比较好。

2）级别比样式高，单位不是相对于HTML，而是相对浏览器，所以此时单位间关系：1rem=1em=16px

11.选择器

1）基本选择器：E>F F是E的直接子元素，不包括孙子元素曾孙子元素；E+F 同父的相邻兄弟元素；E~F同父相邻的后面的所以子元素

2）属性选择器

3）伪类和伪元素选择器

：nth-child（） 从第一个子元素开始算，不管所有元素都相不相同；：nth-of-type（）从相同的子元素中的第一个开始算起。（）括号里的数字都从1开始。