仓酷云

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

[DIV+CSS] 来谈谈:CSS3教程:box-sizing属性

[复制链接]
山那边是海 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 07:38:42 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

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

x
不管你用什么工具软件制作网页,都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼,同样内容的网页,有的人做出来有几十KB,而高手做出来只有十几KB。
破洛洛文章简介:迟来的CSS3新属性:box-sizing.
说到IE的bug,一个臭名远扬的例子是它关于“盒模子”的毛病注释:在IE5.x和Quirks形式的IE6/7中,将border与padding都包括在width以内。这为前端工程师的事情平增了很多贫苦,几户每一个必要界说尺寸的box都要思考一下:是不是触发了“盒模子bug”?
同时,因为另外一撮扫瞄器对尺度的服从,我们在准确界说一个在无限空间内显现的box时,也必要盘算一下:留给它的空间只要那末年夜,刨往border和padding,我们该把它的width写成几呢?
这类情形在CSS3时期有了改良,得益于这个叫做box-sizing的属性,它具有“content-box”和“border-box”两个值。


  • 界说box-sizing:content-box;时,扫瞄器对盒模子的注释服从我们之前熟悉到的W3C尺度;
  • 界说box-sizing:border-box;时,扫瞄器对盒模子的注释与IE6不异;

为何说这个属性“迟来”呢?IE关于盒模子的注释当然不切合W3C的标准,可是也有它的优点:不管怎样修改border与padding的值,都不会招致box总尺寸产生变更,也就不会打乱页面全体结构。而在Firefox等古代扫瞄器下,假如我们要改动一下padding的值,就不能不从头盘算box的width。如今IE6与世长辞,这个CSS属性不免有些捷足先登。
试用这个新属性,Firefox请利用-moz-box-sizing,Safari/WebKit请利用-webkit-box-sizing,Opera间接用box-sizing便可。

另外如果你不是javascrput的高手,你可以不必去写ID,只用class就可以。当客户端程序员写完程序,需要调整时候,你可以在利用他的ID进行控制。
活着的死人 该用户已被删除
沙发
发表于 2015-1-18 06:43:18 | 只看该作者
滚动条)层属性--溢出(visible/hidden/scroll/auto)
板凳
发表于 2015-1-25 17:36:32 来自手机 | 只看该作者
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
简单生活 该用户已被删除
地板
发表于 2015-2-3 12:36:45 | 只看该作者
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
飘灵儿 该用户已被删除
5#
发表于 2015-2-9 02:35:47 | 只看该作者
由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。
飘飘悠悠 该用户已被删除
6#
发表于 2015-2-26 19:12:10 | 只看该作者
每天上网看着那样多的网页,于是我才下定决心选择了网页制作这一门课程,目的就是希望以后能够做出一个完美的网页来。
透明 该用户已被删除
7#
发表于 2015-3-8 17:09:41 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
若相依 该用户已被删除
8#
发表于 2015-3-16 08:31:49 | 只看该作者
只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。
乐观 该用户已被删除
9#
发表于 2015-3-22 22:05:47 | 只看该作者
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-6-2 18:50

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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