css里面怎么让一个DIV居中

正文所有内容水平居中。
简单而原始。

.总宽度1 00%。
.child 宽 2 00 像素，自动边距 0。
像这样居中。

你掂量一下。

html5弹性盒子模型宽度设置问题

我以前确实遇到过这个问题。
我们先来说一下这个CSS代码的修改。

首先看这段代码，col2 和col3 ，它们的背景颜色是F6 3 和6 9 0。
我想这是为了帮助你区分不同的列。
然后是box-flex:1 和box-flex:3 ，这两个是CSS3 响应式设计属性，这意味着这两列可以根据其他列的大小分配空间。

但是，这个 width: 0% 有点有趣。
老实说，我当时不知道为什么要加这个，但根据我的经验，这个 width: 0% 是关键。
它实际上是用来初始化列宽的。
这就像给列一个小目标，让它们从 0% 的宽度开始，然后根据 box-flex 值进行分布。

然后让我们看看box-orient。
这是 CSS3 的一个属性。
本来是为了控制子项的布局方向，但可能是因为某些版本有错误，没有完成，所以出现了你提到的情况。

所以如果你遇到这种情况，就像我说的，给所有需要按比例分隔的列添加 width: 0% ，这样无论你以后如何调整，这些列仍然可以按比例分配空间。
对于固定值的列，它们有自己的宽度，不需要添加这个宽度：0%。

遇到这个问题的时候，我去查了资料，发现很多开发者都在使用这个方法。
不管怎样，这是一个实用的技巧，希望对你有帮助。

前端开发入门 3：盒模型

上周，一位客户问我什么是盒子模型，我向他解释了这一点。
盒子模型是CSS中一个非常重要的概念。
就好像网页的每个元素都是一个盒子。
该框有四个级别：内容区域、内边距、边框和边距。

内容区域是放置文本和图像的区域。
您可以直接设置宽度和高度。
例如，如果您想要一个宽 2 00 像素、高 1 00 像素的内容区域，您可以编写 width: 2 00px;高度：1 00px；。

内边距是内容区域和边框之间的空间。
可以分别设置上、下、左、右，或者缩短。
此填充将占用页面上的空间。

边框是围绕填充的线。
您可以设置宽度、样式和颜色。
边界也占用空间。

边距是元素之间的间隔。
这不占用元素的空间，而仅表示距离。

例如有这样的标题样式： CSS h2 { 宽度：5 9 0 像素； 高度：2 3 px； 带衬垫的底部：1 0px； /在内容区域下方添加1 0px的内边距/ 底部边框：1 px实心eaeaea； / 底部边框是 1 像素的灰色实线 / 下边距：1 8 px； / 元素底部与其他元素之间的距离为1 8 px /
这里标题的高度是2 3 px，后面的padding、border和margin决定了它和其他元素之间的距离。

CSS中计算盒子图案的方法有两种，一种是默认内容盒子，另一种是边框盒子。
内容框的宽高仅包含内容区域，其余部分另行计算。
border-box 是宽度和高度，包括内容区域、填充和边框。

块元素，例如div和p，默认占据一行。
宽度将填充主容器，高度由内容决定。
默认情况下，线元素（例如 span 和 a）与其他线元素位于同一行。
宽度由内容决定。
设置宽度和高度是没有用的。

此外，填充和边距之间存在细微差别。
padding是内部空间，背景会延伸到这里，而margin是外部空间，只代表距离，不会被背景覆盖。

所以，盒子模型非常重要。
了解了这一点，就可以更好的控制网页的布局。
现在许多开发人员推荐使用 border-box，这使得设置更容易、更直观。
多练习，比如模仿豆瓣电影片名的风格，你就会逐渐掌握排版技巧。
然而，这取决于你自己想办法。
实践会给你带来真知。