Css实战第二天小结

时间:2023-03-08 23:37:30
Css实战第二天小结
  1. 清除浮动的四种方式:

1.1    给父盒子设置一个高度;

1.2    Clear:both;

1.3    Overflow:hidden;

1.4    使用伪元素

.clearfix:before, .clearfix:after{

content:” ”;

display:table;

}

Clearfix:after{

Clear:both;

}

Clearfix{         /*兼容ie6*/

Zoom:1;

}

2.对定位元素的层级理解:如果我们只给一个元素定位,而不设置它的trbl(上,右,下,左)的值,那么该元素仍然在原来的位置显示。

绝对定位(absolute)与相对定位(relative)都有一个层级的属性与概念。如果我们定位了,相邻的多个元素,而且它们在同一个位置的话,后面的元                 素会覆盖前面的元素。

同样定位的元素,默认它们的层级都是0,如果想要改变它们的层级关系的话,可以使用z-index(范围0-9999999)来实现。

3.border-radius的使用:

border-radius:左上值 右上值 右下值 左下值;

四个值为元素的宽度的时候或为高度一半的时候,元素将变成圆形或是椭圆形;

注:峰值只能达到元素的宽度或者高度的一半。

4.font连写

Font的连写必须要有字体大小(font-size)和字体样式(font-family),且两者的顺序不能够颠倒。

5.   padding和margin的使用:

5.1 在布局的时候,优先考虑使用padding,但是使用padding的时候,要考虑这个padding会不会影响其他地方的布局

5.2 其次考虑margin,但是使用margin的时候,要考虑到合并现象

合并现象:

两个合并现象

垂直合并:

两个垂直分布的盒子,设置了相对的margin值的时候,他们之间的距离总是取决于最大的margin值  --  垂直合并   无法解决,只能避免

包含合并:

发生嵌套的时候,如果给子盒子设置margin-top,有可能会把父盒子带跑

解决办法:

(1) 给父盒子加边框

(2)父盒子设置属性:overflow:hiddent