仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1033|回复: 8
打印 上一主题 下一主题

[DIV+CSS] DIV教程之CSS进修教程:进修CSS的宽度width

[复制链接]
山那边是海 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 22:58:36 | 显示全部楼层 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
属性值就追加上去,重复的属性值就以最后一个为准。这里要注意的是,样式的先后不是根据页面上应用的名字顺序,而是样式表里的样式顺序。
破洛洛文章简介:CSS进修教程:进修CSS的宽度width.
CSS宽度——CSSwidth
1、宽度基本常识
CSS宽度是指经由过程CSS款式设置对应div宽度,以下我们懂得传统html宽度、宽度自顺应流动宽度等宽度常识。
传统Html宽度属性单词:width如width="300";
CSS宽度属性单词:width如width:300px;
最年夜宽度单词:max-width如max-width:300px;
最小宽度单词:min-width如:min-width:300px
2、Html初始宽度与DIV+CSS宽度对比
1、传统html中宽度width="300",即设置对应元素宽度为300px(像素)。而宽度值后无需跟单元,默许情形下以像素(px)为单元。
如:<tdwidth="300">我的宽度为300px</td>
即:设置了对应表格td的宽度为300px.
2、divcss中宽度设置width:300px;,即设置对应CSS款式为300px,这里必要跟单元。
如:#header{width:300px;}
即:界说headerCSS选择器款式为300px宽度。
而在标签使用:<divid="header">我的宽度为300px宽度</div>
3、css宽度演示与解说
1、CSS宽度自顺应
经常我们瞥见一个网页宽度随扫瞄器宽度改动而主动改动,如www.poluoluo.com一样,宽度是自顺应宽度。这里使用了百分比便可完成自顺应宽度。
假如网页总宽度为80%即width:80%;,将使此宽度晓得自顺应宽度为扫瞄器80%。固然条件是设置最外层没有宽度限定前提下。
DIVCSS自顺应宽度例子:
CSS款式代码:
<styletype="text/css">
body{margin:0auto;text-align:center;}
.poluoluocom{width:80%;border:1pxsolid#003;margin:0auto;}
</style>Html中bodydiv代码:
<divclass="poluoluocom">我是80%自顺应宽度</div>如许即设置内容居中,为了便利测试加上1px玄色边框。人人能够测试察看其内容是随扫瞄器拉年夜而宽度变宽而自顺应宽度80%,而摆布双方一直有10%宽度留着,由于设置此box宽度为80%。
2、CSS宽度流动
流动即设置宽度为流动值便可如
良多时分必要对网页的宽度款式设置为流动,这时候只必要设置宽度width:300px,即设置对应流动宽度为300像素。
3、最小流动宽度
CSS款式属性单词:min-width
兼容撑持:min-width除IE6不撑持为,IE7以上扫瞄器、火狐、谷歌都撑持
经常用于设置宽度最小值,如设置对应DIV的款式最小宽度值限定。
例:
.poluoluocom{border:1pxsolid#003;min-width:300px;}
即设置最小宽度为300px,固然一样平常很少设置最小宽度。假如要利用最小宽度即,利用浮动(float)可以使用最小宽度限定。
最年夜流动宽度
CSS属性单词:max-width
兼容撑持:max-width除IE6不撑持为,IE7以上扫瞄器、火狐、谷歌都撑持
最年夜流动宽度是对对应的款式div设置最年夜宽度限定,即内容不凌驾此设置最年夜宽度。
最年夜宽度限定例子:
.poluoluocom{border:1pxsolid#003;max-width:300px;}

</p>
另外如果你不是javascrput的高手,你可以不必去写ID,只用class就可以。当客户端程序员写完程序,需要调整时候,你可以在利用他的ID进行控制。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-4 16:17

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表