一、单列布局的实现
1、单列布局中最常用的水平居中的四种方法
- 同时设置父元素和子元素的样式：父元素使用text-align实现，子元素使用inline-block。这里宽高背景只是为了展示。
.parent{
text-align: center;
}
.child{
display: inline-block;
width: 100px;
height: 100px;
background-color: aqua;
}
- 使用margin:0 auto来实现，必须要设置一个width.
.child{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: aqua;
}
- 使用绝对定位，父元素使用相对，子元素绝对。
.parent{
position: relative;
}
.child{
position: absolute;
left: 50%;
}
- 使用弹性盒flex布局实现
弹性盒是专为不同尺寸和不同设备的元素排布而设计的。父元素中使用block:flex设置一个弹性盒，子元素中flex:number设置该子元素占一行中的几份。
<style>
.header{
display: flex;
}
a{
margin: 0 auto;
}
.A,.C{
flex: 1;
}
.B{
flex: 2;
}
</style>
<body>
<div class="header">
<a href="##" class="A">AA</a>
<a href="##" class="B">BB</a>
<a href="##" class="C">CC</a>
</div>
</body>
弹性盒几乎能实现目前存在的所有布局，它还有很多的内容在这里也详细说一下。
flex-direction:定义了排布是按行还是列。
justify-content:对于弹性项没有填满弹性容器的时候，它定义弹性项是怎么对齐的。
二、多列布局
1、多列布局的“双飞翼布局”，即左右固定，中间自适应，他可以利用margin-left为负数来实现，它的实现原理就是margin为负值可以改变float元素的排列位置。
<div class="main">
<div class="main-content">main content</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
*{
margin:0;
padding: 0
}
.main{
float: left;
width: 100%;
}
.main .main-content{
margin: 0 210px;
background-color: rgba(33, 114, 214, 0.8);
height: 500px
}
.left{
width: 200px;
float: left;
background-color: rgba(255, 82, 0, 0.8);
margin-left: -100%;
height: 200px
}
.right{
width: 200px;
height: 200px;
margin-left: -200px;
float: left;
background-color: rgba(90, 243, 151, 0.8);
}
多列布局的“双飞翼布局”，也可以利用弹性盒实现，同样父元素设置display:flex, 子元素中左右固定栏设置为固定宽度，中间自适应部分设置flex:1.
<style>
.parent{display:flex;}
.left{
width:100px;
background-color: aqua;
}
.main{
flex:1;
background-color: red;
}
.right{
width:100px;
background-color: greenyellow;
}
</style>
<div class="parent">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
2、真正的多列布局
借助margin为负值可以增加宽度的方式来进行多列布局。
<style>
.parent{
margin:0 auto;
width: 500px;
border: 1px #ccc solid;
margin-bottom: 20px;
}
.column{
width:92px;
height: 92px;
background-color: #ccc;
margin-bottom: 20px;
float: left;
margin-right: 10px;
}
</style>
<div class="parent">
<div class="column">1</div>
<div class="column">1</div>
<div class="column">1</div>
<div class="column">1</div>
</div>
同样我们也可以使用弹性盒布局
<style>
.parent{display:flex;}
.column{flex:1;}
.column +.column{margin-left:20px;}
</style>
<body>
<div class="parent">
<div class="column">1</div>
<div class="column">1</div>
<div class="column">1</div>
<div class="column">1</div>
</div>
</body>
三、响应式布局
响应式布局在不同的大小的屏幕上如何做出不同的布局，视口指的是浏览器窗口的可视区域，视口大小决定了页面布局的可用宽度，我们可以使用meta标签设置设置布局宽度等于设备宽度,布局viewport等于度量viewport.
<meta name="viewport" content="width=device-width,initial-scale=1">
此时，页面布局的宽度就是你的设配的宽度。
使用媒体查询来实现响应设计（CSS3 media queries）
CSS3的media queries的模块扩展了@media的应用，不仅可以识别不同烦人媒体类型，还能识别媒体的特征——比如屏幕宽度，像素等参数。media queries语法：@media 媒体类型 媒体识别条件表达式。
@media handheld, (min-width:700px) and (orientation:landscape){
}
当使用有显示屏的设备的时候：当最小宽度<700px,或者是横屏的时候执行代码。
在三栏布局中使用响应设计
.row{
width: 960px;
}
.row:after{
clear: left;
content: '';
/*清除浮动*/
display: table;
}
[class^='col']{
float: left;
}
.col1{
width: 25%;
}
.col2{
width: 50%;
}
.col3{
width: 75%;
}
/** 屏幕设备宽度大于1200的时候，row宽度固定为1170px**/
@media (min-width: 1200px) {
.row{
width:1170px
}
}
/** 平板电脑的设置**/
@media (min-width: 768px) and (max-width: 979px){
.row{
width:724px
}
}
/** 横屏手机或者竖屏平板的所有列按行排列**/
@media (max-width:767px){
[class^='col']{
float:none;
width: 100%;
}
.row{
width: 100%;
}
}
/** 竖屏手机**/
@media (max-width: 480px){
}
</style>
<body>
<div class="container">
<div class="row">
<div class="header">header</div>
</div>
<div class="row">
<div class="col1">q</div>
<div class="col2">w</div>
<div class="col1">e</div>
</div>
<div class="row">
<div class="footer">footer</div>
</div>
</div>
</body>
网友评论