您的位置:首页 > 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代码减轻从而不符合搜索引擎优化需求。

标签(Tag): 宽度
本文分享URL地址:http://www.css5.com.cn/jiqiao/987.html

更多

上一页: 上一篇:css width 自适应|css div随内容自适应宽度
下一页: 下一篇:html字体颜色

 

CSS必备基础教程 - TOP

 

热门信息

 

CSS5更新 - TOP

 

 

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