响应式笔记

Posted 2020-08-27 tgxh的博客

1、CSS Resets

resets VS normalize.css:

引入CSS resets的原因:统一浏览器的差异而存在，设置一系列的样式规则，让所有的浏览器按照同样的规则去解释CSS样式。
引入normalize.css原因：相比CSS resets是一种比较现代的替代方案。用于bootstrap等框架。

与传统的CSS resets相比的优点：

1.没有大段的样式重置代码，保护了有价值的默认样式；
2.元素没有大段的继承链；
3.如果需要修改可以在新的CSS文件中复写样式即可，即使normalize.css升级也不会影响到项目。

2、px,em,rem

1.px ：1个px相当于1个像素
2.em ：相对的长度单位。
①：em相对参照物为父元素的font-size
②：em具有继承的特点
③：当没有设置font-size时，浏览器会有一个默认的em设置，1em=16px
问题：em的容易混乱
3.rem：相对参照物为根元素html，相对参照固定不变。同样的1rem=16px；

3、清除浮动

.clearfix:after {
    content: ".";
    display: block;
    height:0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    zoom: 1;
}

BFC：BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

详情参考

4、css选择器中 li + li 可以不选取第一个li而选择之后的li

5、inline-block元素间的空白符

<li>1</li>//回车符 在inline-block中，会产生空白符。
<li>2</li>
<li>3</li>
a.可以设置ul font-size:0 消除；
b.调整HTML结构，不用回车符；</li><li>紧挨；不写</li>让浏览器自动补全。
c.margin-left:-3px;
但是都有弊端；没发现有最好的方式；

6、在做响应式开发的时候，遇到在一行中需要并列放三项或更多项时，每一项的宽度需要用百分比来控制，在定义每一项的宽度时，可以用width: calc(33.333333333333% - 3rem);的方式来做，百分比跟根据父元素的百分比来划分，尽量精确到最后一个小数，-3rem是根本padding和margin等值在计算的，在实际的开发中要仔细查看是否有相关元素使用了padding和margin，并对其有影响。

使用box-sizing:boder-box 可以将边框，内边距计算在盒模型之内（外边距不可）

font-size: 0; 当父元素下面有多个子元素，子元素使用了display:inline-block时，为了清除各个子元素之间的空隙，可以在父元素中加一个font-size:0;，然后在各个子元素中再重新定义字体大小。