看了我上篇文章的人可能觉得我小题大做,CSS2 有什么好看的?那么我就参考《css 世界》这本书,与大家一同复习理解下具体的点,对我们代码的影响。
首先,我们需要清楚 width 默认值就是 auto,所以不用去人为写代码控制其宽度自动哦。
默认块元素都是 100% 父元素宽度,这点大家都知道,但很多人会针对块元素写多余的宽度为 100%。
常见的是浮动,行内块元素,绝对定位。我们称这种特性为包裹性。
这个最容易出现在 table-layout 为 auto 表格中,我们不控制表格单元格宽高的时候,当每一列都放不下的时候,会把文字截断,然而手机号,英文单词,数字等不能断,就可能会导致某些只是文字的列,每个字都换行显示,称 min-content。
一般元素不会超出容器显示,除非以下两种情况, 尤其第一种是初级前端在开发中经常遇到的问题。
针对上面两个问题,可以分别做如下纠正。
又或者这样的代码,你给导航中的 a 标签设置间距宽度什么的,其实标签变为块级之后,会自动根据计算拿到属于自己的宽度,多此一举。
- a {
- display: block;
- width: 100 % ;
- }
- .nav{
- width:240px}
- .nav-a{
- display:block;
- width:200px;
- margin:0 10px;
- padding:9px 10px ;}
- .par{
- width:1000px;
- position:relative;
- }
- //子元素宽度为700px
- .son{
- position:absolute;
- left:100px;
- right:200px;}
- .container{
- text-align:center;
- }
- .content{
- display:inline-block;
- text-align:left;
- }
- .ao{
- width:0;
- display:inline-block;
- }
- .ao:before{
- color:#fff;
- content:'love你love';
- outline:2px solid #000;
- }
来源: http://www.jianshu.com/p/c27880469f08