一.overflow:hidden、display:none、visibility:hidden之间的区别
overflow:hidden是表示隐藏超出的部分,不显示超出盒子大小的内容
display:none 表示隐藏元素,不再占位置了
visibility:hidden表示隐藏元素,但是保留位置
二.盒子的内外边距
内边距:padding
盒子内容与边框的距离,分别有上下左右边距,可以分开写不同方向的内边距,语法如:padding-left:5px; padding-right:5px; padding-top:5px; padding-buttom:5px;还有就是连写,但是要注意顺序,顺序如下:上右下左,千万不要打乱顺序。
外边距:margin
盒子与盒子之间的距离或者盒子与别的东西的距离,用法跟padding一样
三.清除浮动
原因:父盒子不适合给高度,子盒子会自动撑开盒子,但是由于子盒子全部浮动而导致父盒子没有高度,那么下面的盒子会浮上来,导致页面布局发生变化
下面来说下清除浮动的几种方式,各自的优缺点
1.在浮动的最后一个盒子下面添加一个空的标签,给上类名.clearfix,并且给该标签设置样式.clearfix {clear:both;} 缺点:增加了额外的标签
2.在都浮动的盒子的父级盒子添加overflow:hidden; 缺点:内容增多时会导致不会自动换行,导致内容被隐藏
3.在都浮动的盒子的父级盒子添加一个类名.clearfix,然后设置样式: .clearfix::after{content:””;display:block;height:0;visibility:hidden;clear:both;} .clearfix {*zoom:1;} 优点:符合闭合元素的思想,结构语义化正确 缺点:ie6,7不支持
4.在都浮动的盒子的父级盒子添加一个类名.clearfix,然后设置样式: .clearfix::before,.clearfix::after{content:””;display:block;} .clearfix::after{clear:both;} .clearfix {*zoom:1;} |
|