CSS中固定宽度布局的详细教程

本文主要介绍CSS中固定宽度布局的详细布局，包括各种复杂的调试实例，如元素内边界和边界。强烈推荐。
认知布局
1.1三基本方案

多列布局有三种基本实现：固定宽度、流和弹性。

固定宽度。当用户调整浏览器窗口的大小时，布局的大小不会改变，通常是900到1100像素宽（最常见的是960像素）。

当用户调整浏览器窗口的大小时，布局的大小会发生变化。（与CSS媒体查询相结合，它能够适应最大和最小屏幕，业界称之为响应性设计）。

弹性。当浏览器窗口变宽时，不仅布局变宽，而且所有内容元素的大小也会发生变化。

1.2布局高度

在大多数情况下，一个结构元的高度（或任何元素）在布局不必要或不应该设置。因为元素的高度属性的默认值是不变的，元素可以扩展在垂直方向按增加的内容中包含的元素。这样一个扩展元素推下来下面的元素和布局也可以垂直缩放为内容增加。
1.3布局宽度

为了使浏览器窗口宽度合理变化，布局可以适当调整，我们需要仔细控制布局的宽度。
2。三列-固定宽度布局

结构如下：
上面的代码：
xml代码将内容复制到剪贴板。

三列-固定宽度布局

{ *
保证金：0；
填充：0；
}
#包装{
宽度：960px；
保证金：0汽车；
border: 1px solid；
}
标题{
背景：# F00；
}
资产净值{
背景：# dcd9c0；
宽度：150px；
浮点数：左；
}
第{
背景：# ffed53；
宽度：600px；
浮点数：左；
}
除了{
背景：# 6a6b6c；
宽度：210px；
浮点数：左；
}
页脚{
清楚：两者；
背景：# 6a6b6c；
}
这是头。
这是资产净值
这是资产净值
这是资产净值
这是文章。
这是文章。
这是文章。
这是文章。
这是文章。
这是文章。
这是文章。
这是文章。
这是文章。
这是旁白。
这是页脚。
结果如下：
解释几点：

该中心可以通过设置宽度值达到（960px）的整个外包装（#包装）并设置其水平外缘为汽车。为内容添加到它的相关栏目的高度将增加。

设置宽度和浮动中间的三列（导航，文章，和旁边）显示它们并排。使用属性：宽度和浮动。

三列的总宽度等于外包装的宽度（150 + 600 + 210＝960）。同样的方法，只要总宽度等于外包装的宽度，就可以添加任意数量的列。

页脚（页脚）位于浮动元素的后面，因此它将尽可能的向上移动。解决这个问题的方法是使用清晰的浮动（清除：要么；要么使用左边；另外，因为只有一个左浮动元素）。

三.设置栏的内缘和边框。

在上面的布局，只要每一列的内容进行调整，布局可能超过容器的宽度，右边酒吧可能下滑到列的左侧。例如，为了使内容和柱边的空气距离，添加一个列级的利润填充物，或增加爱杆间距柱增加利润，从而增加浮动栏布局的宽度，然后下降；或在栏中添加一个大的图片，长字符串或没有空格（如URL）。它将导致多于列的布局宽度。

实例：

CSS代码将内容复制到剪贴板。
第{
背景：# ffed53；
宽度：600px；
浮点数：左；
填料：10px 20px； / * * / CSS规则加入这一行
}

原来是这样的。
我们把这种现象称为浮动滑动，可以用三种方法来防止这种现象的发生。

从设置的元素宽度中减去所添加的水平外边缘、边框和内缘的宽度和宽度。
在容器内的元素上添加内边距或外边距。
使用box-sizing属性CSS3开关盒放大。这个属性，添加边框和单元内边缘不增加箱，相反会导致内容被缩小。

讨论了以下三种方法：
3.1重置宽度以抵消内边界和边界。

因为水平边界添加到第条是关于20px，列的宽度减少到560px 600px，所以修改第条CSS样式规则如下：

CSS代码将内容复制到剪贴板。
第{
背景：# ffed53；
宽度：560px； / * * /这里
浮点数：左；
填料：10px 20px； / * * /别忘了这里
}

结果如下：
虽然它可以实现，但当调整内外距离时，重新设置布局的宽度是非常恼人的，也可能导致页面的混乱。
3.2使用容器内元素的内缘和边框。

将外边缘和内边界应用于内容元素是有效的。前提是这些元素没有明确地设置宽度，因此它们的内容将随着内外距离的增加而缩小。

根据箱模型，无宽度的单元在水平方向上会与其母元素相适应，其含量随着边、边和内缘的增大而减小。

考虑到在将来改变时，一列可能包含大量不同内容的元素。如果要调整内容与容器边界之间的距离，就必须对每个元素进行调整，这不仅麻烦，而且容易出错。此外，在边框中加上边框也增加了列的宽度，并且不可能在它所包含的内容元素中添加应用程序样式。

所以不要加入外缘在容器中的元素，最好是添加在列宽度不包括所有的内容元素div，然后应用边界和内部边缘到这样的部门，如果你内部的div设置样式，你可以把所有的内容元素与酒吧的边界线。另外，也便于将来进行调整。任何新的内容元素的宽度是由内部确定

或者拿文章栏开一把刀：

xml代码将内容复制到剪贴板。

这是文章。
这是文章。
这是文章。
这是文章。
这是文章。
这是文章。
这是文章。
这是文章。
这是文章。

以下模式如下：

CSS代码将内容复制到剪贴板。
第{
背景：# ffed53；
宽度：600px；
浮点数：左；
}
内部{
保证金：10px；
边境：2px固体红；
填料：20px；
}

结果如下：
从结果中，我们可以看到，中杆的宽度并没有太大的改变，因为内容区域的宽度抵消外缘的总宽度，边框和内侧缘的内部应用所以我们可以得出结论，如果在布局中的列是浮动的宽度设置，你不动它！移动，把内容在内部div，并将Div.
3.3使用框大小：边框框

这是最简单的方式。只要盒尺寸：边界盒声明添加到三浮柱的CSS规则，增加的内边缘（边界）的列不会导致框的宽度的变化。在这一点上，无论是列的宽度是调整以抵消增加的内边缘，也没有内部的div使用。添加内缘的结果是内容的收缩。

实例：

以下是对内部div的清晰描述：

xml代码将内容复制到剪贴板。



因此，CSS规则如下所示：
CSS代码将内容复制到剪贴板。
{ *
保证金：0；
填充：0；
}
#包装{
宽度：960px；
保证金：0汽车；
border: 1px solid；
}
标题{
背景：# F00；
}
资产净值{
框大小：边框框！* /
背景：# dcd9c0；
宽度：150px；
浮点数：左；
填料：10px 20px； / * * /添加填充
}
第{
框大小：边框框！* /
背景：# ffed53；
宽度：600px；
浮点数：左；
填料：10px 20px； / * * /添加填充
}
除了{
框大小：边框框；和这里！*
背景：# 6a6b6c；
宽度：210px；
浮点数：左；
填料：10px 20px； / * * /添加填充
}
Footer{
清除：两者；清除，防止页脚向上移动。
背景：# 6a6b6c；
}

结果如下：

框大小：边框框工作。
多好的物业啊！当然，但mdash；mdash；IE6和IE7不支持此属性。

小谈，解决办法如下：

使用腻子脚本（polyfill），称为borderboxmodel。JS，专门解决这个问题
可以使用条件注释将其添加到HTML标记和标签结束后的标记中，以确保在加载DOM之后执行脚本。

xml代码将内容复制到剪贴板。