An incredibly useful CSS3 feature when you’re creating columns with floats is box-sizing. It lets you choose which box sizing model to use – whether or not an element’swidth
and height
include padding
and border
or not.
This is useful since it makes it much easier to define flexible widths where you also need padding and/or borders. A typical example is laying out forms, which can be a real pain when you want flexible widths.
The box-sizing
property takes two values:
-
content-box
: the normal CSS model where an element’swidth
andheight
only apply to its content area and do not include padding or borders -
border-box
: the “IE box model”, used by Internet Explorer in quirks mode, wherewidth
andheight
determine the width and height including padding and borders
A form layout example
I’ll use a form layout example to illustrate. Say you have the following HTML snippet:
<div class="group">
<div class="text">
<label for="text1">First name</label>
<input type="text" name="text1" id="text1">
</div>
<div class="text">
<label for="text2">Last name</label>
<input type="text" name="text2" id="text2">
</div>
</div>
Putting those two input
+ label
combos (I’ll refer to these as columns from now on) on a single row is easily accomplished by floating them. But we also want the text fields to have a flexible width determined by the available width of their parents. This is to make them easy to drop into different layouts without having to fiddle about with calculating pixel widths.
Here’s some basic CSS to do that:
.text {
width:49%;
float:right;
padding:1em;
background:#fff;
}
.text:first-child {float:left;}
.text input {
width:100%;
padding:8px;
border:2px solid #cce;
}
The problems
Simple enough, but there is a problem (two, actually) with this.
- Since
width
by default only applies to the actual content width, the width of the columns will be 49% of their parent width plus 2em for the left and right padding. It’s quite likely that 2em will be wider than 1%, which will make the columns too wide to fit next to each other. - The same reasoning applies to the width of the actual input fields.
width:100%
means that they will be as wide as the content area of their parents. But in addition to that they have 16px of horizontal padding and 4px of horizontal borders, so they will be 20px too wide to fit.
box-sizing
to the rescue
And this is where the box-sizing
property is so extremely handy. It solves these problems easily if we give it a value of border-box
:
.text {
box-sizing:border-box;
width:49%;
float:right;
padding:1em;
background:#fff;
}
.text:first-child {float:left;}
.text input {
box-sizing:border-box;
width:100%;
padding:8px;
border:2px solid #cce;
}
Now the widths of both the columns and the input fields will include their horizontal paddings and borders, resulting in a nice and flexible form row with no overlapping or dropped floats.
I’ve made a simple box-sizing demo page to show this in action.
Browser support and possible workarounds
As always when we’re talking about CSS, especially CSS3, there is the issue of browser support. It turns out that box-sizing
is pretty well supported. A look at the support chart at When can I use… shows that the only relevant browser that doesn’t support it is IE 7. And that is highly ironic, since it does support the border-box
model in quirks mode, as does IE 6.
To make all browsers obey you’ll need to back up the box-sizing
property with a couple of vendor-prefixes, like this:
.text {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
And then there’s IE 7. Depending on the specifics of the layout problem you’re looking to solve, your target audience, and how far you and/or your client are willing to with respect to progressive enhancement, you may be able to just ignore it. In the case of form layout, the form will most likely still be usable, although it may look a bit ugly.
Assuming you want to do something for IE 7, there are a couple of options:
- Use Box Sizing Behavior to patch some degree of
box-sizing
support into IE 7 - Use conditional comments or CSS hacks to give IE 7 a few rules that change the column and input widths to give you a bit more margin
The demo page contains examples of both of these approaches. The box-sizing behavior is neat, but it seems to have issues with the units you use for padding (doesn’t like ems) and it has problems when one element with box-sizing:border-box
is nested inside another. So in example 3, the box-sizing behavior is only applied to the column elements, not the input fields. To avoid the input fields becoming wider than their parents, I’ve made them a bit narrower for IE 7. Example 4 shows a possible workaround without using box-sizing. I’ve just reduced the widths of the columns and input fields to where they don’t become too wide until the browser window is really narrow.
View source on the demo page for HTML and CSS.
In closing, while box-sizing
is well-supported, there is no solid support in IE 7 and earlier. Make sure to check that this lack of support doesn’t cause serious usability problems, and apply a bit of CSS band-aid if necessary.
相关推荐
sap press doc 解压密码:abap_developer
Controlling-Profitability Analysis with SAP Controlling-Profitability Analysis with SAP
- Styling Mobile Pages with CSS3 - Detecting Mobile Devices and HTML5 support - Javascript and HTML5 Web Applications - Building a Mobile Web Application - Updating a Site to HTML5 - Converting Web ...
The performance of fiber mode-locked lasers is limited due to the high nonlinearity induced by the spatial confinement of the single-mode fiber core. To massively increase the pulse energy of the ...
普萘洛尔与(S)-2-乙酰氧基丁二酸二乙烯酯反应中溶剂对立体选择性和产物分布的影响,张清义,林贤福,普萘洛尔和2-乙酰氧基丁二酸二乙烯酯反应的立体选择性和产物分布具有溶剂依赖性。在中等极性溶剂中,普萘洛尔...
n-drop mobile app builder, anyone can build amazing IoT applications with minimal resources and effort, on hardware ranging from prototyping platforms such as Arduino and Raspberry Pi 3 to industrial-...
Control light via parallel port
基于 TPM 的可信网络连接技术规范
sap press doc 解压密码:abap_developer
Your full-color, friendly guide to getting started with HTML5 and CSS3! HTML and CSS are essential tools for creating dynamic websites and help make your websites even more effective and unique. This ...
grated with a closed-loop feedback control structure, to achieve adaptive production scheduling and control in OKP. Our SS heuristic, because of its simplicity and computational efficiency, has the ...
By winding the fiber to a coil with different radius, high-order modes of a multimode fiber laser are suppressed one by one and finally 15.4-W single-transverse-mode output is achieved when the coil ...
OLAP-SC是一款商业智能应用程序,可实现支出+节省透明度,战略采购,采购/购买控制。 IT提供了olap多维数据集模型,关系数据库模型和控制报告。 请参阅:http://www.orpheus-it.com
主要介绍机械系统控制建模辨识等方面的内容,对于一些初学者来说非常有用。
Designing-controllers-for-controlling-a-quadcopter该项目的检查性能指标,控制四旋翼机的理论,执行计算,并绘制必要的.zip
title={Controlling generative models with continuous factors of variations}, author={Antoine Plumerault and Herv{\'e} {Le Borgne} and C{\'e}line Hudelot}, booktitle={International Conference on ...
You will then cover the basic setup for 3D action fighting games, importing models, textures and controlling them with a virtual on-screen joystick. Later you will set up Scene for 3D Configuration, ...
It is found that the nonadiabatic spectral redshift can be observed by properly adjusting the time delay of the two laser fields when the controlling pulse is added in the raising part of the driving...