固定宽度、流式、弹性布局
2017-09-06 本文已影响0人
陆lmj
假设浏览器窗口设置为1250px；
wrapper的宽度为960px；
content的宽度为920px：确保了wrapper居中时两边有20px的间距；
secondary的宽度为230px；
primary的宽度为670px；
其中primary中的secondary的宽度为400px;
primary的宽度为230px;
padding-right为20px。
固定宽度布局
宽度以像素为单位，这种布局类型成为固定宽度的布局，非常常见的一种。
- 优点：开发者对布局和定位有更大的控制能力，知道每个元素的精确宽度，就能够对它们进行精确的布局，而且知道所有东西在什么地方。
- 缺点：①宽度是固定的，无论窗口尺寸多大它们的尺寸都不变，所以空间利用率不高，不适应灵活的web。②行长和文本易读性：固定宽度布局往往适合于浏览器默认文本字号，但只要将文本字号增加几级，边栏就会挤满空间并且行长太短，阅读起来不舒服。
为解决上述缺点，可使用流式布局或弹性布局代替固定宽度的布局。
流式布局
流式布局中尺寸用百分比而不是像素设置。
- 优点：使得能够相对于浏览器窗口进行伸缩，可以更好的利用空间。
- 缺点：①窗口宽度较小时行变得非常窄，很难阅读，所以有必要加上像素或em为单位的min-width，防止布局变得太窄，但min-width设置的太大也会遇到与固定宽度相同的问题。②如果设计横跨整个浏览器窗口，那么行就会变得太长，也很难阅读。解决方法：Ⅰ、让容器之跨越宽度的一部分，Ⅱ、用百分数设置内边距和外边距，Ⅲ、对于非常严重的问题，可以为容器设置最大宽度max-width，防止内容在大显示器上变得过宽。
将固定宽度布局的三列转换为流式三列布局：
<div class="wrapper">
<div class="content">
<div class="primary">
<div class="primary"> </div>
<div class="secondary"> </div>
</div>
<div class="secondary"> </div>
</div>
</div>
<style>
.wrapper{
width:76.8%; /*960÷1250=76.8%*/
margin:0 auto;
text-align:left;
min-width : 62em; /*比较小的窗口尺寸，布局太挤，所以添加以em为单位的min-width*/
max-width : 125em; /*设置为em为单位的max-width是为了确保文本行的长度适合阅读*/
}
.content{
overflow: hidden; /*加上此句后conten和wrapper容器的高度不再是0，而是100*/
}
.content .primary{
width : 72.82%; /*670÷920=72.82% ，因为在wrapper设置了水平居中，所以40px均匀分布在content容器两侧各20px*/
float:right;
display:inline;
}
.content .secondary{
background-color: red;
width:25%; /*230÷920=25%*/
float:left;
display:inline;
}
.content .primary .primary{
background-color: yellow;
width:59.7%; /*400÷670=59.7%*/
float:left;
display:inline;
}
.content .primary .secondary{
background-color: blue;
width:34.33%; /*230÷670=34.33%*/
padding-right:3%; /*20÷670=3% 设置内边距，避免其包含的文本紧挨着元素的右边缘*/
float:right;
display:inline;
}
</style>
流式布局的缺点：在大分辨率显示屏上，行仍然会过长，让用户不舒服，在窄窗口或在增加文本字号时，行会变得非常短，内容很零碎。
解决方法：弹性布局。
弹性布局
相对于字号（而不是浏览器宽度）来设置元素的宽度，单位为em，可以确保在字号增加的时候整个布局随之扩大。
缺点：①不能充分的利用空间②因为在字号增加的时候整个布局随之扩大，所以弹性布局会变得比浏览器窗口宽，导致水平滚动条的出现，解决方法是在容器div上添加100%的max-width。
将固定宽度布局的三列转换为弹性三列布局：技巧：设置基字号，让1em大致相当于10px，浏览器默认字号是16px，10px是16px的62.5%，所以在主题上将字号设置为62.5%即可。
内部宽度仍使用百分数，只以em为单位设置容器的宽度，这样的话，内部宽度仍是相对于字号的，可以更方便的修改布局的总尺寸，不必修改每个元素的宽度，更灵活、更易操作。
<div class="wrapper">
<div class="content">
<div class="primary">
<div class="primary"> </div>
<div class="secondary"> </div>
</div>
<div class="secondary"> </div>
</div>
</div>
<style>
body{
font-size:62.5%;
text-align:center;
}
.wrapper{
width:92em; /*容器宽度以em为单位*/
margin:0 auto;
text-align:left;
max-width : 95%;
}
.content{
overflow: hidden; /*加上此句后conten和wrapper容器的高度不再是0，而是100*/
}
.content .primary{
width : 72.82%; /*670÷920=72.82% 内部宽度仍使用百分数*/
float:right;
display:inline;
}
.content .secondary{
background-color: red;
width:25%; /*230÷920=25% 内部宽度仍使用百分数*/
float:left;
display:inline;
}
.content .primary .primary{
background-color: yellow;
width:59.7%; /*400÷670=59.7% 内部宽度仍使用百分数*/
float:left;
display:inline;
}
.content .primary .secondary{
background-color: blue;
width:34.33%; /*230÷670=34.33% 内部宽度仍使用百分数*/
padding-right:2em; /*2em=20px 设置内边距，避免其包含的文本紧挨着元素的右边缘*/
float:right;
display:inline;
}
</style>
