切图--学习笔记（二）

1.补充前面的另外一种清浮动的方式
使用伪元素： before,:after.
使用的时候首先在css里做一个声明。格式如下

.clearfix:before,.clearfix:after {           content: "";     /*内容为“.”就是一个英文的句号而已。也可以不写。*/    display: block;   /*加入的这个元素转换为块级元素。*/    clear: both;     /*清除左右两边浮动。*/     visibility: hidden;      /*可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden占据空间只是看不到而已；*/    line-height: 0;    /*行高为0；*/    height: 0;     /*高度为0；*/    font-size:0;    /*字体大小为0；*/}

从代码中可以看出来伪元素是加在.clearfix后面的。这样在有浮动元素存在影响的情况时，在html里面给父级加一个class=”clearfix”。如果父级有class名，直接在父级的名后面跟clearfix 。（eg:

）
这样就可以清除了浮动元素导致父级高度塌陷的影响。

后面我就只选择这种清浮动的方法了，原因是使用伪元素可以起到辅助布局的作用，而又不增加无意义纯布局html元素，这样使html更加简洁。

2.关于响应式布局中需要换算的地方
1）若给了父级具体的宽度width，而父级中又有padding（left right）值，按理padding会使宽度变大，但我们在换算百分比时，就以给了width值/上下文元素就好。
2）行高的换算
行高的像素值/该选择器的像素值。注意不要加单位。
3.关于媒体查询
@media screen and (屏幕尺寸要求) {
}
别的不多说， and左右两边一定要有空格！！！！