Rumah > hujung hadapan web > tutorial css > css中关于宽度属性width的使用方法总结

css中关于宽度属性width的使用方法总结

伊谢尔伦
Lepaskan: 2017-06-02 16:44:26
asal
5556 orang telah melayarinya

CSS 宽度是指通过CSS 样式设置对应div宽度,CSS宽度属性为单词width,宽度width可以设置为以百分比计算宽度、以像素值设置宽度、以相对长度单位设置宽度等等。该属性得到所有主流浏览器的支持。下面将对width属性的使用方法进行总结。

css中关于宽度属性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. php中文网词条: width

2. php中文网免费视频教程:CSS视频教程

Atas ialah kandungan terperinci css中关于宽度属性width的使用方法总结. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan