* { Box-sizing: Border-box } FTW
2016-05-24 09:53
405 查看
One of my least favorite parts about layout with CSS is the relationship of width and padding. You’re busy defining widths to match your grid or general column proportions, then down the line you start to add in text, which necessitates defining padding for
those boxes. And ‘lo and behold, you now are subtracting pixels from your original width so the box doesn’t expand.
Ugh. If I say the width is 200px, gosh darn it, it’s gonna be a 200px wide box even if I have 20px of padding. So as you know, this is NOT how the box model has worked for the past ten years. Wikipedia has a great history
of this box model. Jeff
Kaufman also dove into the history
Anyway, I have a recommendation for your CSS going forward:
Update August
2014: This code was updated to match new
box-sizing best practices. Also prefixes are pretty
much dead.
This gives you the box model you want. Applies it to all elements. Turns out many browsers already use
border-box for a lot of form elements (which is why inputs and textareas look diff at width:100%;) But applying this to all elements is safe and wise.
Due to browser support, this recommendation is only for projects that support IE8 and up. (Full
browser compat at MDN) Firefox <= 28 still
needs the
and <= iOS4, Android <= 2.3 need the
but everyone else uses the unprefixed. You can find more info about a box-sizing polyfill for IE6 & 7 at html5please.com/#box-sizing (which
was developed with
Totally. jQuery works pretty great with it (except
this). As mentioned, browser support is excellent. And a number of projects use this layout model by default, including
the WebKit Web Inspector(aka Chrome DevTools). I heard from Dutch front-end developer Yathura Thorn on his experience:
We’ve been using
and we’ve had no problems. All jQuery (+UI) offset calculations and animations run fine, even in any element we’ve displayed as inline-block. As of late we’ve started testing the project on mobile devices (iPhone, iPad and Android) and we’ve had no issues
regarding box-sizing with any of them yet, so it seems to work just fine.
One of my favorite use-cases that border-box solves well is columns. I might want to divide up my grid with 50% or 20% columns, but want to add
px or em. Without CSS’s upcoming
is impossible… unless you use border-box. So easy. :) Another good one is applying 100% width and then wanting to add a padding to that element.
Lastly on @miketaylr’s
inquiry, I also tested perf overhead. Anecdotal
evidence suggests border-box isn’t significant.
You might get up in arms about the universal
Apparently you’ve heard its slow. Firstly, it’s not. It is as fast as
a selector. It can be slow when you specifically use it like
If you aren’t getting 90+ Page Speed scores, it’s way too early to be thinking about selector optimization. See also: CSS
Selector Performance has changed! (For the better) by Nicole Sullivan.
So… enjoy and hope you’ll find this a far more natural layout model.
2012.06.25: Adding the following section.
Any third party widgets add content directly into the page may need extra attention. Any widgets inside an iframe (like Disqus’s new theme) are naturally insulated from the parent page’s layout styles. If you need to make adjustments to the third party content
you can apply
02.01.2012: Added a section on performance
2012.02.03: Included webkit prefixed property and usecase of a 100% width box.
2012.02.22: Added link to Jeff Kaufman’s history page.
2013.07.22: code sample updated for before/after generated content. thx snugug and eric j duran.
2014.08.24: Adjusted code based on research
by Jon Neal and Chris Coyier.
原文链接:http://www.paulirish.com/2012/box-sizing-border-box-ftw/
those boxes. And ‘lo and behold, you now are subtracting pixels from your original width so the box doesn’t expand.
Ugh. If I say the width is 200px, gosh darn it, it’s gonna be a 200px wide box even if I have 20px of padding. So as you know, this is NOT how the box model has worked for the past ten years. Wikipedia has a great history
of this box model. Jeff
Kaufman also dove into the history
Anyway, I have a recommendation for your CSS going forward:
1 2 3 4 5 6 7 | /* apply a natural box layout model to all elements, but allowing components to change */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } |
2014: This code was updated to match new
box-sizing best practices. Also prefixes are pretty
much dead.
This gives you the box model you want. Applies it to all elements. Turns out many browsers already use
border-box for a lot of form elements (which is why inputs and textareas look diff at width:100%;) But applying this to all elements is safe and wise.
Browser support
Due to browser support, this recommendation is only for projects that support IE8 and up. (Fullbrowser compat at MDN) Firefox <= 28 still
needs the
-moz-prefix,
and <= iOS4, Android <= 2.3 need the
-webkit-,
but everyone else uses the unprefixed. You can find more info about a box-sizing polyfill for IE6 & 7 at html5please.com/#box-sizing (which
was developed with
* { box-sizing: border-box!).
Is it safe to use?
Totally. jQuery works pretty great with it (exceptthis). As mentioned, browser support is excellent. And a number of projects use this layout model by default, including
the WebKit Web Inspector(aka Chrome DevTools). I heard from Dutch front-end developer Yathura Thorn on his experience:
We’ve been using
*{box-sizing: border-box;}in one of my projects (deployed in production, averaging over 1mln visits a month) at work for about a year now, and it seems to be holding up just fine. The project has been tested in IE8 & 9 and the latests Firefox and Chrome versions
and we’ve had no problems. All jQuery (+UI) offset calculations and animations run fine, even in any element we’ve displayed as inline-block. As of late we’ve started testing the project on mobile devices (iPhone, iPad and Android) and we’ve had no issues
regarding box-sizing with any of them yet, so it seems to work just fine.
One of my favorite use-cases that border-box solves well is columns. I might want to divide up my grid with 50% or 20% columns, but want to add
paddingvia
px or em. Without CSS’s upcoming
calc()this
is impossible… unless you use border-box. So easy. :) Another good one is applying 100% width and then wanting to add a padding to that element.
Performance
Lastly on @miketaylr’sinquiry, I also tested perf overhead. Anecdotal
evidence suggests border-box isn’t significant.
You might get up in arms about the universal
*selector.
Apparently you’ve heard its slow. Firstly, it’s not. It is as fast as
h1as
a selector. It can be slow when you specifically use it like
.foo > *, so don’t do that. Aside from that, you are not allowed to care about the performance of * unless you concatenate all your javascript, have it at the bottom, minify your css and js, gzip all your assets, and losslessly compress all your images.
If you aren’t getting 90+ Page Speed scores, it’s way too early to be thinking about selector optimization. See also: CSS
Selector Performance has changed! (For the better) by Nicole Sullivan.
So… enjoy and hope you’ll find this a far more natural layout model.
2012.06.25: Adding the following section.
Adjustments for Third Party Content
Any third party widgets add content directly into the page may need extra attention. Any widgets inside an iframe (like Disqus’s new theme) are naturally insulated from the parent page’s layout styles. If you need to make adjustments to the third party contentyou can apply
box-sizing: content-box;to the widget and its descendants. This may not be trivial as form controls in particular are border-box by default, so you’ll also have to account for that.
02.01.2012: Added a section on performance
2012.02.03: Included webkit prefixed property and usecase of a 100% width box.
2012.02.22: Added link to Jeff Kaufman’s history page.
2013.07.22: code sample updated for before/after generated content. thx snugug and eric j duran.
2014.08.24: Adjusted code based on research
by Jon Neal and Chris Coyier.
原文链接:http://www.paulirish.com/2012/box-sizing-border-box-ftw/
相关文章推荐
- jmeter 压力测试各种值的意思 --吞吐量 样本
- Maven之(七)pom.xml配置文件详解
- iOS学习之——init
- Generic Xcode Archive 解决方案
- Maven之(七)pom.xml配置文件详解
- checkedListBox1(转)
- (转) unity 在移动平台中,文件操作路径详解
- sql SELECT时的with(nolock)选项说明
- OJ之栈的基本使用
- 使用json文件为当前类文件属性赋值(org.nutz.json.Json)
- AngularJs加载闪烁问题 ng-cloak
- 关于服务端技术如何学
- ==与equals()的区别
- Eclipse下配置Maven
- arcgis9.3 执行python文件
- textview设置size 单位
- 常规功能和模块自定义系统 (cfcmms)—045模块导航功能的重构(3)导航的定义
- 红茶三杯的博客-一个IE的博客
- DevExpress实现为TextEdit设置水印文字的方法
- 小知识点