css页面布局_CSS框大小使页面布局更容易

css页面布局

A lot of frustration in creating web page layouts results from a misunderstanding of the CSS box model. To be fair, this isn’t entirely the fault of web developers or designers; blame can be equally apportioned to the oddities of the CSS spec itself.

对CSS框模型的误解导致了创建Web页面布局时的许多挫败感。 公平地说，这不完全是Web开发人员或设计师的错； 责任可以平均分配给CSS规范本身。

Very simply, the width and height of an HTML element is not what most people assume it is. By default, the width of an element is the width of its content, not necessarily the width of the containing box: padding, border and outline are added to the width you set for any element. This leads to situations like the following:\

很简单，HTML元素的宽度和高度并不是大多数人认为的那样。 默认情况下， width元素的是其内容的宽度，不一定包含框的宽度： padding ， border和outline 添加到width你的任何元素设置。 这会导致如下情况：\

Let’s say we have the opening two paragraphs from Mary Shelly’s Frankenstein, each provided with a different id:

假设我们有Mary Shelly的Frankenstein的开头两段，每个段都有不同的id ：

<p id="first">I am by birth a Genevese; and my family is 
one of the most distinguished of that republic…
<p id="second">As the circumstances of his marriage illustrate 
his character…

We want to have both paragraphs to have a width of 50%, floated side-by-side on the page:

我们希望两个段落的width为50％，并排在页面上：

p { width: 50%; }
p#first { float: left; }
p#second { float: right; }

Figure 1: Paragraphs floated side-by-side

图1：段落并排浮动

All looks fair and well to this point, as you can see to the in Figure 1. Trouble occurs when we add a border to the paragraphs. As you will see, adding just a few pixels is enough to throw the paragraphs out of alignment:

正如您在图1中所看到的那样，到目前为止，一切看起来都很好。当我们在段落中添加border时，就会出现问题。 正如您将看到的，仅添加几个像素就足以使段落不对齐：

p {
	width: 50%;
	border: 1px solid #000; 
}

FFigure 2: floated paragraphs thrown out of alignment by added padding

F图2：通过添加填充使浮动段落不对齐

This gives the result you see in Figure 2. Historically, this behavour is one of the reasons I have preferred to use flexbox and its related properties to create grid layouts. Without going that far, simply adding the box-sizing property with a new value can fix this issue:

这给出了您在图2中看到的结果。从历史上看，这种行为是我更喜欢使用flexbox及其相关属性来创建网格布局的原因之一。 无需花费太多，只需添加具有新值的box-sizing属性即可解决此问题：

p { 
	width: 50%;
	border: 1px solid #000;
	box-sizing: border-box; 
}

border-box calculates each element’s width to the outside of its border. This means we can add padding to the paragraphs and still retain their alignment:

border-box计算每个元素到其边界外部的宽度。 这意味着我们可以在段落中添加padding并仍然保持对齐：

p { 
	width: 50%;
	border: 1px solid #000; 
	box-sizing: border-box;
	padding: 3em; 
}

Note, however, that adding

margin to the paragraphs will throw them out again, as the box-sizing model does not accommodate space outside the element.

box-sizing模型无法容纳元素外部的空间，因此在段落中添加margin将再次将其丢弃。

box-sizing can also be set to padding-box, which takes into account padding but not border. The default box-sizing value is content-box.

box-sizing也可以设置为padding-box ，它考虑了padding而不是border 。 默认的box-sizing值为content-box 。

As the traditional box-model can be so counter-intuitive and problematic, and this new setting so useful, it is suggested that setting box-sizing to border-box should be part of an opening CSS reset, with vendor prefixes added to support older versions of browsers:

由于传统的box-model可能会违反直觉和问题，并且此新设置非常有用，因此建议将box-sizing设置为border-box应该是开放CSS重置的一部分 ，并添加了供应商前缀以支持较旧的浏览器版本：

* {
	box-sizing: border-box; 
}

box-sizing used to need vendor prefixes to work, but the last three versions of each major browser have supported the property without prefixes, so they are dropped here.

box-sizing以前需要供应商前缀才能起作用，但是每个主流浏览器的后三个版本都支持不带前缀的属性，因此将其放在此处。

The only problem is that this approach can be overly aggressive, making it difficult to change the box model for elements later in our code. A more adaptive approach has been suggested by Jonathan Neal:

唯一的问题是，这种方法可能过于激进，从而难以在稍后的代码中更改元素的框模型。 乔纳森·尼尔 ( Jonathan Neal)提出了一种更具适应性的方法：

html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}

This provides the opportunity to set an element to another box-sizing model later in your page, and for its children to inherit and respect the change. For example, to set a &ltdiv> back to the standard box-model, due to its interaction with a third-party plugin that has the same behaviour, you could now use:

这提供了机会在页面的稍后部分将元素设置为另一个框大小模型，并使其子元素继承并尊重更改。 例如，由于&ltdiv>与具有相同行为的第三方插件的交互作用，因此将其设置回标准box-model可以使用：

div#special {
	box-sizing: content-box;
}

翻译自: https://thenewcode.com/475/Page-Layouts-Made-Easier-With-CSS-box-sizing

css页面布局