响应式 css

1、class 样式一般用class，命名：中横线分隔，如：div-logo
id 一般用于js快速地区别和获取元素，命名：驼峰命名法，如：divLogo (中间首字母大写)

2、必不可少的图片，用<img>引入；
可有可无的装饰性图片，可用背景嵌入。

3、normalize.css与resets.css 都是重置样式，但是normalize.css利用了一些技巧，保证各个浏览器的兼容性。

4、rem相对参照物为根元素html，当没有设置font-size时，浏览器会有一个默认的rem，1rem=16px，与em是一致的。
一般设置html{font-size:62.5%;} 即1rem=10px;(10/16*100%)

5、::selection{background-color:#b3d4fc;text-shadow:none;}设置被选中文字的颜色及无阴影效果。

6、line-height使用px,不要用rem
中文版的Chrome （最小的字号12px，如果小于12px，则按照12px来算）1rem=12px, 而英文版的1rem=10px。

7、相邻同胞选择器
可选择紧接在另一个元素后的元素，且二者有相同的父级元素 。
下面选择的是item2和item3.
HTML代码：
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
CSS代码：
li+li { font-size: 50px; }

8、display：inline-block；之后，出现空隙，解决方法
如<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
li{display:inline-block;}
ul{font-size:0;}
li{font-size:12px;}

9、 width: calc(33.33333% - 3rem);动态计算宽度
三个divdisplay:inline-block之后，要去掉中间的间隙，还要减去padding值

10、vertical-align 与line-height ???

11、css中空格符为\00a0
li:nth-child(1)::before{
content:"最新公告：\00a0\00a0";
color:#aaa;
}
12 、
h1一个页面只能有一个
h2次要于h1
h3一般是一个段落的标题，后面带有p文字的。