黑马程序员技术交流社区

标题: 重点知识点 [打印本页]

作者: 橘子巷    时间: 2018-9-14 20:43
标题: 重点知识点
一.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;}




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2