一、移动端页面的布局
1.流式布局
2.flex弹性布局
3.less+rem+媒体查询布局
4.混合布局
5.响应式布局
一、流式布局
流式布局容器:宽度百分百,适合于单独做移动端开发
二、flex弹性布局
flex弹性布局:任何一个容器都可以指定为flex布局,当父盒子为flex布局以后,子元素的float、clear和vertical-align属性将失效
布局原理:通过给父盒子添加flex属性,来控制子盒子的位置和排列方式
flex布局父元素常见属性:
- flex-direction
设置主轴的方向 - justify-content
设置主轴上的子元素排列方式 - flex-wrap
设置子元素是否换行 - align-content
设置侧轴上的子元素的排列方式(多行) - align-items
设置侧轴上的子元素的排列方式(单行) - flex-flow
复合属性,相当于同时设置flex-direction flex-wrap
默认主轴x轴方向,水平向右,默认侧轴y轴方向,水平向下 - row column
row 默认从左到右,column 从上到下 - justify-content
主轴
使用之前确定好主轴 - flex-start
默认值,从头部开始 - flex-end
默认值,从尾部开始 - center
在主轴居中对齐 - space-around
平分剩余空间 - space-between
先两边贴边在评分剩余空间 - flex-wrap
默认不换行,如果放不下会缩小子元素宽度 - nowrap wrap
nowrap 不换行 wrap 换行 - align-items
默认y轴(侧轴,子元素单行时) - flex-start
默认,从上到下 - flex-end
从上到下 - center
挤在一起居中(垂直居中) - stretch
拉伸(子盒子不需要给高度)
侧轴 - align-content
侧轴,换行时 - flex-start
侧轴头部开始排列 - flex-end
侧轴尾部开始排列 - center
侧轴中间显示 - space-around
子项在侧轴评分剩余空间 - space-between
子项在侧轴先分布在两头,再平分剩余空间 - stretch
设置子项元素高度平分父元素高度 - flex-flow
wrap column
flex布局子元素常见属性: - flex
子项目占的分数 - align-self
控制子项目自己在侧轴的排列方式 - order
属性定义子项目的排列顺序(前后顺序)数字越小越靠前,默认为0
三、less+rem+媒体查询布局
less:是一门css预处理语言
rem:相对点位,基准是相对于html元素的字体大小
四、响应式页面
响应式开发:就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的
响应式需要一个父级作为布局容器来配合子元素来实现效果
响应式布局容器 container
1.媒体查询
2.bootstrap
bootstrap:栅格系统,前端开发框架
五、css3移动端固定模式开发
<!DOCTYPE html>
<html>
<head lang="en">
<meta name="viewport"
content="width=300px,minimum-scale=1.0,maximum-scale=3.0,user-scalable=no" >
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
html,body {
height: 100%;
font-size: 14px;
}
.box {
margin: 0 auto;
width: 300px;
height: 100%;
background: azure;
}
</style>
</head>
<body>
<div class="box">
固定模式布局
</div>
</body>
</html>