深刻理解width:auto

前言

首先,我们需要清楚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:'love你love'; outline:2px solid #000; }
  • 最大宽度 最大宽度就是元素可以有的最大宽度,一般情况下我们用于限制文字或者内容特别多的情况。这样的实际场景并不多。 在这里我们只延伸两种滚动效果,一种是原生的页面或者dom滚动,另一种就是iscroll那样的设置内部元素与容器的位置关系来展现,效果更好。

参考资料

  • 张鑫旭《css世界》

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端儿

图片轮播(淡入淡出)--JS原生和jQuery实现

图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为...

4391
来自专栏林德熙的博客

win10 uwp 拖动控件 Margin 移动Canvas 拖动控件Manipulation 拖动控件

我们会使用控件拖动,可以让我们做出好看的动画,那么我们如何移动控件,我将会告诉大家多个方法。其中第一个是最差的,最后的才是我希望大神你去用。

1620
来自专栏进击的君君的前端之路

CSS常见样式(二)

1882
来自专栏大数据钻研

CSS入门笔记 - 初识CSS

引言 上次给大家带来了html部分的笔记,大家的反馈让我非常开心?。 这次给大家带来css部分的第一篇笔记,由于本人比较蠢,学的很慢,而且css部分内容非常的细...

3996
来自专栏小筱月

H5 和 CSS3 新特性

HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证

6631
来自专栏程序员互动联盟

【专业技术】CSS作用及用法

层叠样式表(Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的...

3657
来自专栏前端知识分享

第162天:canvas中Konva库的使用方法

3891
来自专栏Keegan小钢

Android样式的开发:View Animation篇

drawable汇总篇讲过两个动画,animation-list定义帧动画,animated-rotate定义旋转动画,这两个属于drawable动画。除了dr...

992
来自专栏梦魇小栈

JQuery分析及实现part6之动画模块功能及实现

942
来自专栏HTML5学堂

关于行、块元素的讲解以及HTML5元素的分类

继上周我们讲解了所有常用的CSS选择器以及CSS选择器的优先级。到目前为止,你是不是觉得静态页面布局简单了很多,而不是单单使用类名选择器(虽然很好用)来操作了。...

4747

扫码关注云+社区

领取腾讯云代金券