HTML布局

最新推荐文章于 2024-05-25 10:40:54 发布

___KAKU

最新推荐文章于 2024-05-25 10:40:54 发布

阅读量933

点赞数

分类专栏： CSS+HTML

本文链接：https://blog.csdn.net/lina2017lina/article/details/79620777

版权

CSS+HTML 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

在html中 常用布局方法有三种：标准流（顺序、默认）、浮动（float）、定位（position）

元素：块级元素（一行一个），内联元素（一行多个）

定位：position,脱离标准流

可选参数：

static(标准流)

relative（处于标准流）:通过更改属性：left、right、top、bottom；后写的元素层级大于先写元素，会出现

相互覆盖

需注意

修改left和top

修改right和bottom

absolute（脱离文档流）：通过更改属性top、left、right、bottom；后写的元素层级大于先写元素，会出现

相互覆盖

一旦设置绝对定位，就会脱离文档流，父层如果没设高度其高度就会为0；

absolute需要搭配属性使用，否则没有效果

需注意（定位按照窗口的大小，不是文档流的大小）

修改left

修改right

修改top

修改bottom

fixed(脱离文档流)：通过更改属性top、left、right、bottom；与绝对定位的属性位置相同；是相对于窗口进行的

定位（绝对定位时相对于父级）

inherit （继承）：继承父级定位

层级（z-index）：所有带有定位属性的元素，都是有层级的；普通的文档流中也有层级关系

层级大的覆盖层级小的，依赖层级定位
层级为auto不参与层级比较
层级为负数则会被标准流中的元素覆盖
必须是定位的元素即有position

注意

其中父元素的层级比相邻元素层级大，不管子元素的层级有多低，都会将相邻元素覆盖，因为受其父元素的影响!

***************************************************************************************************

盒子模型和定位

盒子模型：通过改变内边距和外边距来定位子元素的位置

定位：通过改变元素的left、right、top、bottom元素来确定位置

***************************************************************************************************

几种较常见布局

自适应布局

一、margin法

左固定右自适应

开始简单的布局（left和right都设高度宽度左边设成固定值，右边设成100%）

        <style>
        	.head{background: #5BC0DE;}
        	.content{}
        	.left{background: #EBCCD1;width: 100px;height: 200px;}
        	.right{background: #F7E1B5;width: 100%;height: 400px;}
        	.footer{background: #5BC0DE;}
        </style>

<body>
    	<div class="head">head</div>
    	<div class="content">
    		<div class="left">left</div>
    		<div class="right">right</div>
    	</div>
    	<div class="footer">footer</div>
 </body>

效果

↓

加上浮动并清除（为了使左右在一行，但此时的效果是一样的与上面，不要着急，着重点是加的东西）

 <style>
        	.head{background: #5BC0DE;}
        	.content{}
        	.left{background: #EBCCD1;width: 100px;height: 200px;float: left;}
        	.right{background: #F7E1B5;width: 100%;height: 400px;float: left;}
        	.footer{background: #5BC0DE;}
        	.clearfix::after { content: "."; clear: both; display: block; overflow: hidden; font-size: 0; height: 0; }
		.clearfix { zoom: 1; }
        </style>
    </head>
    <body>
    	<div class="head">head</div>
    	<div class="content">
    		<div class="left">left</div>
    		<div class="right">right</div>
    		<div class="clearfix"></div>
    	</div>
    	<div class="footer">footer</div>
 	</body>

↓

最后在外容器上加padding-left 在左块上加margin-left

 <style>
        	.head{background: #5BC0DE;}
        	.content{padding-left: 100px;}
        	.left{background: #EBCCD1;width: 100px;height: 200px;float: left;margin-left: -100px;}
        	.right{background: #F7E1B5;width: 100%;height: 400px;float: left;}
        	.footer{background: #5BC0DE;}
        	.clearfix::after { content: "."; clear: both; display: block; overflow: hidden; font-size: 0; height: 0; }
		.clearfix { zoom: 1; }
        </style>
    </head>
    <body>
    	<div class="head">head</div>
    	<div class="content">
    		<div class="left">left</div>
    		<div class="right">right</div>
    		<div class="clearfix"></div>
    	</div>
    	<div class="footer">footer</div>
 	</body>

至此效果图（注：左右位置不能换）右固定左自适应同理

两边固定中间自适应

<style>
        	.head{background: #5BC0DE;}
        	.content{padding: 0 100px;}
        	.left{background: #EBCCD1;width: 100px;height: 200px;float: left;margin-left: -100px;}
        	.right{background: #EBCCD1;width: 100px;height: 200px;float: left;margin-right: -100px;}
        	.center{background: #F7E1B5;width: 100%;height: 400px;float: left;}
        	.footer{background: #5BC0DE;}
        	.clearfix::after { content: "."; clear: both; display: block; overflow: hidden; font-size: 0; height: 0; }
		.clearfix { zoom: 1; }
        </style>
    </head>
    <body>
    	<div class="head">head</div>
    	<div class="content">
    		<div class="left">left</div>
    		<div class="center">center</div>
    		<div class="right">right</div>
    		<div class="clearfix"></div>
    	</div>
    	<div class="footer">footer</div>
 	</body>

下划线重点看

效果

二、常见的三栏布局

圣杯布局

解释：两边固定，中间自适应

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>test</title>
        <style>
        *{padding: 0px;margin: 0px;list-style: none;}
        body,html{width: 100%;height: 100%;}
        .container{padding: 0 200px;}
        .main,.left,.right{min-height: 150px;float: left;position: relative;}
        .main{background: #245269;width: 100%;}
        .left{background: #C0A16B;width: 200px;margin-left: -100%;left: -200px;}
        .right{background: #CE8483;width: 200px;margin-left: -200px;right: -200px;}
        </style>
    </head>
    <body>
    	<div class="container"> 
		　　<div class="main">main</div> 
		　　<div class="left">left</div> 
		　　<div class="right">right</div> 
		</div>
 	</body>
</html>

双飞翼布局

解释：圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。不同在于解决 “中间栏div内容不被遮挡”问题的思路不一样。

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>test</title>
        <style>
        *{padding: 0px;margin: 0px;list-style: none;}
        body,html{width: 100%;height: 100%;}
        .main,.left,.right{min-height: 150px;float: left;}
        .main{background: pink;width: 100%;}
        .left{background: #C0A16B;width: 200px;margin-left: -100%;}
        .right{background: #CE8483;width: 200px;margin-left: -200px;}
        .content{margin: 0 200px;}
        </style>
    </head>
    <body>
    	<div class="container"> 
		　　<div class="main">
			<div class="content">main</div>
		    </div> 
		　　<div class="left">left</div> 
		　　<div class="right">right</div> 
		</div>
 	</body>
</html>

区别标注了。

效果一样

***************************************************************************************************

___KAKU

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
HTML布局

在html中常用布局方法有三种：标准流（顺序、默认）、浮动（float）、定位（position）元素：块级元素（一行一个），内联元素（一行多个）定位：position,脱离标准流可选参数： static(标准流) relative（处于标准流）:通过更改属性：left、right、top、bottom；后写的...
复制链接

扫一扫

专栏目录