固定宽度布局
固定宽度的布局(“冰布局”)
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>
声明:1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!