在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>
区别标注了。
效果一样
***************************************************************************************************