A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 橘子巷 初级黑马   /  2018-9-14 20:43  /  863 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

一.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;}

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马