您的位置:首页 > CSS技巧 > 【 返回上一页

div宽度设置 css div width多种设置方法

div宽度设置 css div width多种设置方法,div宽度设置 div width设置技巧代码文章教程篇。

css div布局时,宽度width是常用的CSS样式,几乎每张网页布局都会用到宽度属性。宽度width值可以使用百分比、可以使用固定值,当然有时可以不用设置width宽度,其宽度样式也依然存在。

宽度语法:
width:200px——固定的宽度设置
width:60%——百分比的宽度设置
如果不设置width,一般width自适应

比如div不予设置宽度时候,其宽度为100%,css宽度自适应父级宽度。

一、div标签内设置width宽度

标签内直接设置width样式,值需要使用style属性即可。

div内直接设置width代码:

  1. <div style=”width:150px”>此div宽度被固定设置为150px</div> 

需要注意时,width设置值一定要带上单位,不然失效。

二、外部css设置div宽度

外部CSS 宽度设置,一般使用class或id引用对应CSS样式。

1、id引入设置宽度width
CSS代码:

  1. #exp{width:160px} 

HTML对应div引入width样式代码:

  1. <div id="exp">我宽度为160px使用id引入width样式</div> 

2、class引入宽度样式的设置
CSS代码:

  1. .expb{width:170px} 

HTML对应div引入width样式代码:

  1. <div class="expb">我宽度为170px使用class引入width样式</div> 

三、div宽度设置总结

对div设置宽度方法多种多样,但ThinkCSS推荐外部CSS对其设置width宽度样式,这样便于日后维护,虽然写代码时候直接div使用style设置样式包括宽度设置非常方便,实际上以后维护是相当难的,而且不便于网页代码优化,不利于HTML代码减轻从而不符合搜索引擎优化需求。

相关标签: 宽度
如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/jiqiao/987.shtml

日期:2016-08-01 10:22:53 来源:www.thinkcss.com 作者:div css

热门点击