css布局学习笔记之box-sizing
2014-02-22 16:41
801 查看
当你设置了元素的宽度,实际展现的元素却能够超出你的设置:因为元素的边框和内边距会撑开元素。
此时,该div所展示出来的宽度就是500px,外边距和内边距将会在这个宽度内进行绘制。实际上,就是缩小了内容的宽度,此时的内容宽度是设置的值减去边距。box-sizing:content-box;就是未设置box-sizing属性时的默认效果。
.div{ width: 500px; margin: 20px auto; padding: 50px; border-width: 10px; }上面的元素所展示出来的效果,宽度会不止500px。这可能不是我们想要的。通常或许我们会去计算宽度来实现想要的效果。但是如果计算的地方太多的话,事件很烦人的事。此时我们可以通过设置box-sizing:border-box来实现。
.div{ 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所展示出来的宽度就是500px,外边距和内边距将会在这个宽度内进行绘制。实际上,就是缩小了内容的宽度,此时的内容宽度是设置的值减去边距。box-sizing:content-box;就是未设置box-sizing属性时的默认效果。
* { -webkit-box-sizing: border-box; /* Safari */ -moz-box-sizing: border-box; /* Firefox */ box-sizing: border-box; }这样可以确保所有的元素都会用这种更直观的方式排版。
相关文章推荐
- css布局学习笔记之box-sizing
- css布局学习笔记之box-sizing
- CSS学习笔记:box-sizing
- CSS学习笔记8:实操——运用浮动简单布局网页
- Bootstrap学习笔记-css布局 Hello_yihao的博客
- css布局的学习笔记
- CSS布局学习笔记之图片居中
- 布局--Css学习笔记(七)
- css学习笔记---盒模型,布局
- CSS学习笔记:box-shadow
- 【HTML5学习笔记】36:CSS传统布局 下
- 学习笔记 HTML5--table布局与div+css布局
- css flexbox 学习笔记(一)
- 原生CSS网格布局学习笔记
- CSS布局学习随手笔记
- css学习笔记---盒模型,布局
- 前端学习笔记--CSS--网页布局实践
- css布局box-sizing使用
- 原生 CSS 网格布局学习笔记
- 让CSS布局更加直观:box-sizing