1.固定布局(最基本的布局)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>固定布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
width:100% ;
height: 100%;
}
.fixedlayout{
width:800px ;
background:gray;
padding:10px;
margin:100px auto ;
overflow: hidden;
}
.left{
width: 380px;
height: 200px;
background: blue;
text-align: center;
line-height: 200px;
display: inline-block;
margin:0px 15px ;
float: left;
}
.right{
width: 380px;
height: 200px;
background: red;
text-align: center;
line-height:200px ;
display: inline-block;
float: left;
}
</style>
</head>
<body>
</body>
<div class="fixedlayout">
<div class="left">
我是固定布局1
</div>
<div class="right">
我是固定布局2
</div>
</div>
</html>
2.流式布局(百分比布局)
流式布局也叫百分比布局。把元素的宽,高,margin,padding不再用固定数值,改用百分比,这样元素的高,margin,padding 会根据页面的尺寸随时调整,已达到适应当前页面的目的.
* 百分比是基于元素父级的大小计算得来的;
* 元素的水平或者竖直间距都是相对于父级的宽度计算的.(margin&padding)
* 边框不能用百分比设置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>流式布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
width:100% ;
height: 100%;
}
.fixedlayout{
width:80%;
background:gray;
padding:10px;
margin:100px auto ;
overflow: hidden;
}
.left{
width:40%;
height: 200px;
background: blue;
text-align: center;
line-height: 200px;
display: inline-block;
margin:0px 15px ;
float: left;
}
.right{
width: 40%;
height: 200px;
background: red;
text-align: center;
line-height:200px ;
display: inline-block;
float: left;
}
</style>
</head>
<body>
</body>
<div class="fixedlayout">
<div class="left">
我是流式布局1
</div>
<div class="right">
我是流式布局1
</div>
</div>
</html>
如上述代码:以百分比为主要形式,让屏幕自适应,这种布局方式定义灵活,能够根据屏幕的情况变化,但是这种方式设计的效果不太容易控制,一般移动端结合rem用的比较多,pc端用的不是非常多。
3.弹性布局(伸缩布局)
CSS3引入了一种新的布局模式——Flexbox布局,即伸缩布局盒模型(Flexible Box),用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局,即使它们的大小是未知或者动态的,这里简称为Flex。
4.浮动布局
此布局上述都有演示浮动布局,此处就不做代码演示,浮动布局关键词,float,可以设置left或者right,他使元素脱离文档流进而达到布局的目的,也是目前一个比较主流的布局方式,但是使用浮动的结束以后,别忘记清除浮动哦。
5.定位布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定位布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
width:100% ;
height: 100%;
}
.fix{
width:200px ;
height: 200px;
background:yellow ;
position: fixed;
left:50% ;
top:50% ;
z-index:10 ;
margin-left:-100px ;
margin-top:-100px ;
}
.location{
width:960px;
height: 500px;
background:gray;
padding:10px;
margin:100px auto ;
position: relative;
}
.div1{
width: 300px;
height:300px ;
background:red ;
position: absolute;
left:10%;
top:20% ;
text-align: center;
line-height: 300px;
}
.div2{
width: 300px;
height:300px ;
background:blue ;
position: absolute;
left:50%;
top:20% ;
text-align: center;
line-height: 300px;
}
</style>
</head>
<body>
</body>
<div class="fix">
我是固定定位
</div>
<div class="location">
<div class="div1">
我是绝对定位1
</div>
<div class="div2">
我是绝对定位2
</div>
</div>
</html>
定位布局也是目前比较常用的一种布局方式,关键词: position: fixed;固定布局,将元素固定在一个位置,不随页面移动而移动,position: relative;相对定位,相对于元素自身定位,不脱离文档流,相当于定义一个参照物,一般和绝对定位结合使用,position: absolute;绝对定位,脱离文档流,一般和相对定位结合使用,如果不定义相对定义,将会相对于整个浏览器定位,所以定位布局,一般情况下都是相对定位和绝对定位结合着来,相当定位相当于划定一个势力范围,制定一个封闭的容器块,然后绝对定位就行对于相对定位来定位,从而达到有效的布局。
6.