DIV CSS宽度width样式属性（css width）知识教程篇

css width宽度目录

1. Width语法知识
2. CSS宽度用法
3. html标签内宽度width
4. div+css宽度小例
5. 宽度案例截图
6. width总结
7. 在线案例演示

1、Width语法知识：   -   TOP

.thinkcss{Width:200px}
css设置thinkcss类宽度为200px（像素 - px）
.divcss5{width:20%}
设置thinkcss类宽度为20%(相对与父级百分比宽度)

DIV CSS宽度(CSS width)属性关系图解

width宽度属性解剖说明图

2、宽度用法   -   TOP

Width:100%(以百分比计算宽度)width:200px;（宽度为200像素(px)）
Width:20em(宽度为20相对长度单位)-扩展知识-em标签，em单位

3、html标签内宽度width元素   -   TOP

1）、设置表格宽度：<td width="200">内容</td>或<td width="20%">内容</td>
2）、设置img图片宽度：<img src="图片地址" width="200" />

以上宽度都是直接设置标签对象宽度，并且注意“等号”后跟具体数字宽度值（或百分比），具体宽度值不用跟长度单位，默认以html像素(html px)为单位。

4、div+css宽度小例：   -   TOP

案例描述：
我们对一个命名为“thinkcss”的类对象设置宽度为200px宽度，为了能看出效果，我们对对象加一个红色边框
案例CSS代码：

.thinkcss{width:200px;border:1px solid #F00} 

宽度运用案例Html代码：

<div class="thinkcss">我的宽度为200px</div> 

5、案例截图   -   TOP

宽度样式案例图

6、width总结   -   TOP

一般对象设置宽度，我们只需到CSS选择器中设置宽度属性单词加具体长度数字单位值加单位即可。

7、宽度在线演示   -   TOP

http://www.thinkcss.com/yanshi/css_width.html

标签(Tag): 宽度 长度 width