您的位置:CSS主页 > CSS基础 >

DIV CSS宽度_CSS width

 

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)属性关系图解

div 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代码

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

宽度运用案例Html代码

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

5、案例截图   -   TOP

div+css width宽度用法演示案例截图
宽度样式案例图

6、width总结   -   TOP

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

7、宽度在线演示   -   TOP

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

标签(Tag): 宽度 长度 width

更多

上一页: 上一篇:DIV CSS color文本颜色样式
下一页: 下一篇:DIV CSS高度_height

 

HTML必备基础教程

 

CSS必备基础教程

 

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解。
CSS教程文章修订日期:2012-07-24     点击:
原创来源:ThinkCSS     来源网址:http://www.thinkcss.com/view/c49.html
本文WWW.ThinkCSS.COM(DIV CSS) ThinkCSS版权所有,欢迎转载,并注明出处来源及URL!

 

推荐信息