”盒模型“之如何防止边框和内边距把元素撑开
来源:互联网 发布:北京 好玩的地方 知乎 编辑:程序博客网 时间:2024/05/16 10:31
在我们讨论宽度的时候,我们应该讲下与它相关的一个重点知识:盒模型。当你设置了元素的宽度,实际展现的元素却能够超出你的设置:因为元素的边框和内边距会撑开元素。看下面的例子,两个相同宽度的元素显示的实际宽度却不一样。
.simple { width: 500px; margin: 20px auto;}.fancy { width: 500px; margin: 20px auto; padding: 50px; border-width: 10px;}
<div class="simple">
我小一些...
</div><div class="fancy">
我比它大!
</div>以前有一个代代相传的解决方案是数学。CSS开发者需要用比他们实际想要的宽度小一点的宽度,需要减去内边距和边框的宽度。值得庆幸地是你不需要再这么做了...
经过了一代又一代人们意识到数学不好玩,所以他们新增了一个叫做 box-sizing
的CSS属性。当你设置一个元素为 box-sizing: border-box;
时,此元素的内边距和边框不再会增加它的宽度。这里有一个与前一页相同的例子,唯一的区别是两个元素都设置了 box-sizing: border-box;
:
.simple { width: 500px; margin: 20px auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}.fancy { width: 500px; margin: 20px auto; padding: 50px; border: solid blue 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
<div class="simple">
我们现在一样大小了!
</div>
<div class="fancy">
万岁!
</div>既然没有比这更好的方法,一些CSS开发者想要页面上所有的元素都有如此表现。所以开发者们把以下CSS代码放在他们页面上:
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
这样可以确保所有的元素都会用这种更直观的方式排版。
既然 box-sizing
是个很新的属性,目前你还应该像我之前在例子中那样使用 -webkit-
和-moz-
前缀。这可以启用特定浏览器实验中的特性。同时记住它是支持IE8+。
转自:http://zh.learnlayout.com/box-model.html
稍有改动
0 0
- ”盒模型“之如何防止边框和内边距把元素撑开
- ”盒模型“之如何防止边框和内边距把元素撑开
- padding 不把盒模型撑开
- 关于强制换行以及防止边框撑开的解决方法
- 子div元素为float时如何撑开父元素
- 子元素浮动之后如何撑开父元素
- 网页中如何防止表格被撑开或div层被撑开
- 防止表格和层被内容撑开的方法
- 防止table被撑开
- 子元素使用float后如何撑开父div
- 盒模型、内外边距和边框
- td 元素属性 noWrap 防止折行、撑开及文字换行
- CSS元素和盒模型
- 防止网页被图片撑开
- html 防止表格被撑开
- 盒模型--边框
- css3-盒子模型之边框
- jasperreport如何为报表元素添加边框
- 批量安装python库函数---pip
- python应用部署--flask
- 解决codeblock不能运行的问题
- csvkit---python一个牛逼到不行的csv处理库
- python混账的编码问题解决之道
- ”盒模型“之如何防止边框和内边距把元素撑开
- python编码问题之\"encode\"&\"decode\"
- python3编码问题终结者--还搞不懂你来找我
- Pycharm集成PyQt4并使用
- pyqt样式表语法笔记
- python遍历一个目录,输出所有文件名
- AXI VDMA使用
- RabbitMQ安装教程
- pyqt样式表语法笔记(中)