响应式 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、 calc(33.33333% - 3rem);动态计算宽度
三个divdisplay:inline-block之后,要去掉中间的间隙,还要减去padding值

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

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

原文地址:https://www.cnblogs.com/annie211/p/6083263.html