首页 >web前端 >css教程 >Css深刻理解width:auto的用法实例分享

Css深刻理解width:auto的用法实例分享

小云云原创: 2018-01-08 11:18:551329浏览

本文主要介绍了Css深刻理解width:auto的用法的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

前言

看了我上篇文章的人可能觉得我小题大做，css2有什么好看的？那么我就参考《css世界》这本书，与大家一同复习理解下具体的点，对我们代码的影响。

首先，我们需要清楚width默认值就是auto，所以不用去人为写代码控制其宽度自动哦。

常见的4种宽度表现

充分利用可用空间

默认块元素都是100%父元素宽度，这点大家都知道，但很多人会针对块元素写多余的宽度为100%。

收缩与包裹

常见的是浮动，行内块元素，绝对定位。我们称这种特性为包裹性。

收缩到最小

这个最容易出现在table-layout为auto表格中，我们不控制表格单元格宽高的时候，当每一列都放不下的时候，会把文字截断，然而手机号，英文单词，数字等不能断，就可能会导致某些只是文字的列，每个字都换行显示，称min-content。

超出容器宽度

一般元素不会超出容器显示，除非以下两种情况,尤其第一种是初级前端在开发中经常遇到的问题。

内容出现了英文或者数字，不换行显示
设置了样式white-space:nowrap，不换行。

针对上面两个问题，可以分别做如下纠正。

word-break:break-all
white-space:normal

其他特性

外部尺寸与流体特性

正常流宽度

块元素默认有流体特性，继承父元素宽度，不会超出父元素宽度。然而有些人还是这样写代码：

a{
display:block;
width:100%;
}

又或者这样的代码，你给导航中的a标签设置间距宽度什么的，其实标签变为块级之后，会自动根据计算拿到属于自己的宽度，多此一举。

.nav{
width:240px}
.nav-a{
display:block;
width:200px;
margin:0 10px;
padding:9px 10px ;}

格式化宽度

格式化宽度指出现在绝对定位模型中，包括绝对定位以及固定位置，只是两者参考点不同而已。默认情况下其特性为包括性，由内容宽度决定盒子宽度，但是当（非替换元素）left/right同时设置的时候，其宽度为相对于最近的定位特性不是static的祖先元素计算。其宽度会是父元素宽度-left-right,而其他特性仍然不变。这点在我们实际的布局中有很大的用途，比如我分享的css实用技术中的变宽与固宽结合的布局。

.par{
   width:1000px;
   position:relative;
   }
   //子元素宽度为700px
   .son{
   position:absolute;
   left:100px;
   right:200px;}

内部尺寸与流体特性

包裹性

包括性是指当元素为非块元素的时候，其宽度由内容决定，自己只负责根据需要扩大，而由于外部肯定是块元素，所以又不会超出容器特性。

实际作用有可以不用脚本实现文字较少水平居中，文字较多，靠左显示。

.container{
text-align:center;
}
.content{
display:inline-block;
text-align:left;
}

首选最小宽度

这个简单的理解就是元素的实际宽度取决于内容的最小单元，这个优先级比width:0高。比如你设置了宽度是0，但是内容有一个汉字，就会有一个汉字的大小；为一个单词就会显示一个单词的大小。

这种实际的用途可以做各种简单的图形，比如凹凸形状的，然后内容设置为白色就可以。

.ao{
width:0;
display:inline-block;
}
.ao:before{
color:#fff;
content:&#39;love你love&#39;;
outline:2px solid #000;
}

最大宽度

最大宽度就是元素可以有的最大宽度，一般情况下我们用于限制文字或者内容特别多的情况。这样的实际场景并不多。

在这里我们只延伸两种滚动效果，一种是原生的页面或者dom滚动，另一种就是iscroll那样的设置内部元素与容器的位置关系来展现，效果更好。

Css深刻理解width:auto的用法实例分享

相关文章