前端基础之CSS小记(1)

84 阅读1分钟

1.display和 visibility区别

display: none;直接消失
visibility: hidden;隐藏但是还占据位置

2.inline-block与浮动(比如三个元素并排)

2.1 inline-block元素间 间隙问题

inline-block进行布局时,元素间会出现空白间隙。因为空格和回车会被浏览器处理,根据while-space(默认是normal,合并多余空白),所以转化为一个空白符。这些元素间的间距会随着字体大小而变化,字体默认大小是16px,间距是8px。

2.2 inline-block去除元素间间距

  1. 代码间没有空格
  2. 父级的font-size设为0,子集再单独设置字体大小
  3. margin设负值
  4. 使用浮动或定位

2.3浮动

优点:方便
缺点:浮动会影响下边的元素布局,需要清除浮动的影响