首先,我们需要清楚width默认值就是auto,所以不用去人为写代码控制其宽度自动哦。
默认块元素都是100%父元素宽度,这点大家都知道,但很多人会针对块元素写多余的宽度为100%。
常见的是浮动,行内块元素,绝对定位。我们称这种特性为包裹性。
这个最容易出现在table-layout为auto表格中,我们不控制表格单元格宽高的时候,当每一列都放不下的时候,会把文字截断,然而手机号,英文单词,数字等不能断,就可能会导致某些只是文字的列,每个字都换行显示,称min-content。
一般元素不会超出容器显示,除非以下两种情况,尤其第一种是初级前端在开发中经常遇到的问题。
针对上面两个问题,可以分别做如下纠正。 * word-break:break-all * white-space:normal
又或者这样的代码,你给导航中的a标签设置间距宽度什么的,其实标签变为块级之后,会自动根据计算拿到属于自己的宽度,多此一举。
.nav{ width:240px}
.nav-a{ display:block; width:200px; margin:0 10px; padding:9px 10px ;}