css 宽度是指通过css 样式设置对应div宽度，css宽度属性为单词width，宽度width可以设置为以百分比计算宽度、以像素值设置宽度、以相对长度单位设置宽度等等。该属性得到所有主流浏览器的支持。下面将对width属性的使用方法进行总结。
width属性的使用
1. 解析width:100%;与width:auto;的区别
如果是p的width:100%，则说明p的width会得到980px就已经充满p区域，然后自己又有padding，所以会超出p。而当width:auto时它是总体宽度（包括width，margin,padding,border）等于父级宽度（width，不包含父级的margin,padding,border），所以如果padding已经左右占去10px的空间，那么width给的值就是960px。但无论是width:100%还是auto，其计算的参照都是父级内容区width值，而非总宽度值.
2. CSS调节图片的大小，要知道width、height
立即学习“前端免费学习笔记（深入）”；
如何用css调整图片的大小，使用width和height这两个属性，这两个属性分别是用来设置元素的宽度和高度的。在CSS初学阶段，全部都是使用像素作单位。
3. css 宽度 width
宽度都是直接设置标签对象宽度，并且注意“等号”后跟具体数字宽度值（或百分比），具体宽度值不用跟长度单位，默认以像素(px)为单位，在TABLE表格标签或图片img标签内设置宽度时候其值不跟html单位，默认以像素为单位。
4. CSS2.1SPEC：视觉格式化模型之width属性详解(上)
width属性有几种不同的取值方式，有几下几种：
(1)宽度值：也就是用CSS长度值来明确地规定一个盒子的宽度，取值单位可以用CSS中支持的长度单位，比如px,em等。
(2)百分比：百分比是根据 包含块的宽度来计算的。但是如果包含块的宽度需要根据包含的内容来决定，那么最终的布局是未定义的，也就是标准中没有明确规定如何计算宽度值。另外，如果盒子是绝对定位的，那么它的百分比长度在计算时是根据包含块的 padding edge的宽度来计算的。
(3)auto：根据CSS标准中规定的宽度计算方法来计算，具体的算法下文中将详细介绍
(4)inherit：事实上width属性是不可继承的，很奇怪为什么会有inherit这个选项，实际情况中width属性一般也很少用到inherit值
5. CSS2.1SPEC：视觉格式化模型之width属性详解(下)
“shrink-to-fit”算法的计算过程：
[1]计算preferred-width:在 除非包含的内容有明确的换行符(比如有
标签时)，否则就不换行的情况下，容纳其包含的内容所需要的宽度。
[2]计算preferred-min-width:在 能换行时(英文碰到空格或标点符号，出现了块级元素，当然也包含出现了
标签时)就换行的情况下，容纳所包含的内容需要的宽度。
[3]计算available-width:即利用2.2.3节中的公式：
available-width =width of containing block – ‘margin-left’ – ‘border-left-width’ – ‘padding-left’ – ‘padding-right’ – ‘border-right-width’ – ‘margin-right，这里也包括所有滚动出去的宽度。
最终的width则为：min(preferred-width, max(preferred-min-width, available-width))。最终的公式可以总结为：最终的宽度以available-width为基准，同时保证不能大于preferred-width以及不能小于preferred-min-width
宽度属性width使用的相关问答
1. width设置为100%之后列表无法居中
2. php 编辑器添加文章中的图片 怎么用正则修改style中width：100%；height：auto；
3. 为何我看到很多人写的自适应网页外容器都没有设置width,只有类似section {display: block; }？
【相关推荐】
1. 创想鸟词条： width
2. 创想鸟免费视频教程：CSS视频教程
以上就是css中关于宽度属性width的使用方法总结的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1608928.html
微信扫一扫 
支付宝扫一扫 
