网页布局样式 弹性布局 流体布局 网页设计基础
固定宽度布局
固定宽度的布局（“冰布局”）
1.固定宽度的布局使开发人员对定位和布局有更大的控制力。
2.固定布局的缺点：
① 无论窗口的尺寸有多大，它们的尺寸总是不变，因此无法充分利用空间。随着屏幕分辨率的变化，固定宽度布局的缺点也越来越明显。
② 涉及行长和文本的可读性，固定宽度的布局对浏览器默认字号往往是合适的，但是，只要将文本字号增加几级，边栏就会挤满空间并且行长太短，不利于阅读体验！
1.固定宽度的布局使开发人员对定位和布局有更大的控制力。
2.固定布局的缺点：
① 无论窗口的尺寸有多大，它们的尺寸总是不变，因此无法充分利用空间。随着屏幕分辨率的变化，固定宽度布局的缺点也越来越明显。
② 涉及行长和文本的可读性，固定宽度的布局对浏览器默认字号往往是合适的，但是，只要将文本字号增加几级，边栏就会挤满空间并且行长太短，不利于阅读体验！
弹性布局
弹性布局
1.相对于字号（而不是浏览器的宽度）来设置元素的宽度，通过以em为单位设置宽度，可以保证在字号增加时整个布局随之扩大，这可以将行长保持在可阅读范围内。
2.弹性布局的缺点：
① 不能充分利用可用空间；
② 由于文本字号增加时布局会加大，所以弹性布局会变得比浏览器窗口宽，导致滚动条的出现。
③ 为了防止这种情况，可在body标签上设置100%的max-width，但是IE不支持max-width属性。
3.创建弹性布局比创建流体布局容易的多，因为所有的HTML元素基本上一直出现在相同的位置上，它们仅仅是同时随文本字号而增大，将固定宽度布局转换为弹性布局是非常简单的—让1 em大致相当于10像素。
1.相对于字号（而不是浏览器的宽度）来设置元素的宽度，通过以em为单位设置宽度，可以保证在字号增加时整个布局随之扩大，这可以将行长保持在可阅读范围内。
2.弹性布局的缺点：
① 不能充分利用可用空间；
② 由于文本字号增加时布局会加大，所以弹性布局会变得比浏览器窗口宽，导致滚动条的出现。
③ 为了防止这种情况，可在body标签上设置100%的max-width，但是IE不支持max-width属性。
3.创建弹性布局比创建流体布局容易的多，因为所有的HTML元素基本上一直出现在相同的位置上，它们仅仅是同时随文本字号而增大，将固定宽度布局转换为弹性布局是非常简单的—让1 em大致相当于10像素。
流体布局
流体布局
1.尺寸使用百分数，而不是像素设置的，这使流体布局能够相对于浏览器的窗口宽度进行伸缩。
2.随着窗口浏览器增大，列变宽，相反，随着窗口缩小，列的宽度也变小，流体布局可以非常高翔的利用空间。
3.流体布局的缺点:
① 在窗口宽度很小的时候，行变得非常窄，也很难阅读，在多列布局中也是如此，因此，有必要添加像素或em为单位的min-width属性，从而防止布局变得太窄。
② 若涉及跨越浏览器的整个宽度，则行就变得太长，也很难阅读。
2.随着窗口浏览器增大，列变宽，相反，随着窗口缩小，列的宽度也变小，流体布局可以非常高翔的利用空间。
3.流体布局的缺点:
① 在窗口宽度很小的时候，行变得非常窄，也很难阅读，在多列布局中也是如此，因此，有必要添加像素或em为单位的min-width属性，从而防止布局变得太窄。
② 若涉及跨越浏览器的整个宽度，则行就变得太长，也很难阅读。
1.不要跨越整个宽度，而让容器只跨越宽度的一个百分比，比如80%；
2.可考虑用百分数设置填充和空白边；
3.可选择以像素设置容器的最大宽度，防止内容在大显示器上变得极宽。
我们先来看一下固定宽度的布局，意思就是宽度和高度固定，浏览器的窗口任意缩小放大，固定宽度的布局不会随之改变：
<style type="text/css">
body{
text-align: center; 居中
}
#header,#footer{
margin: 20px auto;
padding: 20px 0;
border: 1px solid red;
}
#container,#content,#sider{
margin: 20px auto;
padding: 20px 0;
border: 2px solid blue;
}
#header,#container,#footer{
width: 1000px;
}
#sider{
float: right;
}
</style>
<div id="header">header</div>
<div id="container">
<div id="content">content</div>
<div id="sider">sider</div>
</div>
<div id="footer">footer</div>从上面的代码中可以看到宽度是固定的，这里可以按照自己的设计来，缩小浏览器的窗口，内容就会被遮挡住。接下来就是弹性布局：
<style type="text/css">
.flex-container{
display: flex;
flex-direction: row; /*按照行显示*/
flex-wrap: wrap;
width: 1200px;
height: 1000px;
background-color:#ece6e6;
}
.flex-item{
width: 320px;
height: 250px;
margin: 20px auto;
background-color: blue;
}
</style>
<div class="flex-container">
<div class="flex-item">one</div>
<div class="flex-item">two</div>
<div class="flex-item">three</div>
</div>流体布局
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.left{
width: 200px;
height: 500px;
background-color: blue;
float: left;
}
.right{
width: 200px;
height: 500px;
background-color: red;
float: right;
}
.main{
background-color: pink;
margin: 0 220px;
height: 500px;
}
</style>
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
</div>