常见问题

清除浮动

容器中,如果子元素都是浮动的,那么容器的高度将会崩塌,造成定位问题。所以需要找到一种方法去克服浮动带来的问题。

一般是设置一个通用的css类 clearfix,然后将这个类的伪元素 ::after 的显示方式设置为block,然后设置 clear: both;,就可以解除浮动带来的容器高度崩塌的问题。此时,容器的高度将与最高子元素的高度相同。

这是比较常用的一种,还有很多很多,可戳 css 浮动和清除浮动 了解更多。


单词内断句

主要是两个相关属性:word-wrap 和 word-break。
word-wrap: 是否允许单词内断句。
word-break: 单词内进行断句的方式。

简单来说,word-wrap: break-word; 可以使超长的单词断行显示,而不是溢出容器。

word-break: break-all; 与前者类似。不同的是,word-wrap: break-word;在遇到超长的单词时,会先挪到下一行显示,下一行也显示不完,才将超出宽度的部分挪到下下行显示;而 word-break: break-all; 就不管三七二十一,一旦某行出现过长单词,直接从这行开始截断,过长部分在下一行显示。

word-wrap有两种属性:

  • normal 只在允许的断字点换行(浏览器保持默认处理)。
  • break-word 在长单词或 URL 地址内部进行换行。

word-break有三种属性:

  • normal 使用浏览器默认的换行规则。
  • break-all 允许在单词内换行。
  • keep-all 只能在半角空格或连字符处换行。

类似的属性用在什么地方?通常是一些含有文字描述之类的容器中,超出容器大小的文字显示省略号等等。

单行文字超长时,显示省略号:

  overflow: hidden;
  white-space: nowrap;
  text-overflow:ellipsis;

多行文字过长时,显示省略号(这个要考虑兼容性问题):

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;

但有的网站的就比较直接:

  overflow: hidden;
  word-wrap: break-word;
  word-break: break-all;

详情可戳 word-wrap和word-break的区别,有超详细例子。


block、inline、inline-block的区别

block: 可以设置宽高;不设置宽高情况下从新行开始,独占一行; 可以容纳各种元素。

inline: 行内显示;无法设置高度,只能通过设置左右padding、左右margin和边框宽度来影响总体的宽度;只能容纳 inline 元素。

inline-block: 行内显示,不从新行开始;但具有block的各种特性。

这几类 display 方式分别有哪些元素? 戳 -> display:block、inline和inline-block的区别


浏览器元素样式重置

元素在浏览器中其实有一些默认的样式,在没有考虑样式的时期,这些默认样式对于页面的格式和排版是有一定的辅助作用的。

但是,对于设计要求较高的网站,这些默认样式的存在对元素样式的重新设定会带来一定的困扰,我们更希望从一张白纸开始不受影响地进行构筑。对于粗心的人来说,默认样式的存在也会使其忽略一部分元素样式的设定,而不同的浏览器下,元素的默认样式有可能是不一样的,因此使得产品在不同的浏览器下作出了不同表现,也是不太好的。

当然对于样式重置的讨论,也有两派。

有人提出的一个比较简易的样式重置是这样的。

body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{margin:0;}  

ol,ul{margin:0; padding:0;}

我觉得还可以。

其实这个问题要经过大量的测试才能有比较合理的结果。

相关: 关于reset.css的疑问:为什么一定要重置浏览器样式?


不常见问题

子元素 margin-top 奇异事件

本想给子元素一个margin-top使其远离容器上方,却没想到容器跟着往下跑了….😅

解决办法有多种,我觉得给父元素加一个 padding-top: 1px; 这种方法不错。还有父元素加 overflow:hidden; 也可以。

更多方法:父元素与子元素之间的margin-top问题(css hack)