网页布局样式 弹性布局 流体布局 网页设计基础

鳄鱼君Ba

发表文章数:518

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » CSS和CSS3教程 » 网页布局样式 弹性布局 流体布局 网页设计基础

固定宽度布局

固定宽度的布局(“冰布局”)
1.固定宽度的布局使开发人员对定位和布局有更大的控制力。
2.固定布局的缺点:
① 无论窗口的尺寸有多大,它们的尺寸总是不变,因此无法充分利用空间。随着屏幕分辨率的变化,固定宽度布局的缺点也越来越明显。
② 涉及行长和文本的可读性,固定宽度的布局对浏览器默认字号往往是合适的,但是,只要将文本字号增加几级,边栏就会挤满空间并且行长太短,不利于阅读体验!

弹性布局

弹性布局
1.相对于字号(而不是浏览器的宽度)来设置元素的宽度,通过以em为单位设置宽度,可以保证在字号增加时整个布局随之扩大,这可以将行长保持在可阅读范围内。

2.弹性布局的缺点:
① 不能充分利用可用空间;
② 由于文本字号增加时布局会加大,所以弹性布局会变得比浏览器窗口宽,导致滚动条的出现。
③ 为了防止这种情况,可在body标签上设置100%的max-width,但是IE不支持max-width属性。

3.创建弹性布局比创建流体布局容易的多,因为所有的HTML元素基本上一直出现在相同的位置上,它们仅仅是同时随文本字号而增大,将固定宽度布局转换为弹性布局是非常简单的—让1 em大致相当于10像素。

流体布局

流体布局
1.尺寸使用百分数,而不是像素设置的,这使流体布局能够相对于浏览器的窗口宽度进行伸缩。
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>

未经允许不得转载:作者:鳄鱼君Ba, 转载或复制请以 超链接形式 并注明出处 鳄鱼君Ba
原文地址:《网页布局样式 弹性布局 流体布局 网页设计基础》 发布于2020-04-16

分享到:
赞(0) 赏杯咖啡

评论 抢沙发

7 + 1 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册