目录:
1 移动端特点
2 百分比布局
3 Flex布局
一 移动端特点
• 移动端和PC端网页不同点
• 谷歌模拟器
• 分辨率
• 视口
• 二倍图
1 移动端和PC端网页不同点
PC端网页和移动端网页的有什么不同？
1 PC屏幕大，网页固定版心
2 手机屏幕小， 网页宽度多数为100%
如何在电脑里面边写代码边调试移动端网页效果？
谷歌模拟器
2 谷歌模拟器
设置调试工具位置
3 分辨率
4 视口
5 二倍图
二: 百分比布局
三: Flex布局
float布局:子盒子脱标,没有办法撑开父盒子
float布局
<head>
<title>传统float布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
border: 1px solid #000;
/*处理:子盒子设置浮动,从而脱标,导致没有办法撑开父盒子*/
overflow: hidden;
}
.box div {
float: left;
margin: 10px;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
flex布局
flex布局 高度200px
<head>
<title>体验flex布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
justify-content: space-between;
/* height: 200px; */
border: 1px solid #000;
}
.box div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
查询技术支持的浏览器版本
网址: http://caniuse.com
// 例如flex支持的浏览器版本, 红色标识不支持,绿色标识支持
主轴对齐六种方式 justify-content:
justify-content: start (默认状态,左对齐)
justify-content: end (右对齐)
justify-content: center
justify-content: space-around
justify-content: space-between
justify-content: space-evenly
<head>
<title>体验flex布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
justify-content: center;
height: 200px;
border: 1px solid #000;
}
.box div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
align-items四种方式
align-items: flex-start (默认状态)
align-items: flex-end
align-items: center
align-items: stretch (拉伸, 默认状态)
- align-items: stretch (拉伸):该属性为默认设置状态, 如果子控件设置高度,则显示设置的高度.
align-items: stretch (拉伸)
- align-items: stretch (拉伸):该属性为默认设置状态, 如果子控件没有设置高度,则子控件自动拉伸为父控件高度
align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
align-self: center
<head>
<title>侧轴对齐方式</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
/* 居中 */
align-items: center;
/* 拉伸,默认值(现有状态,测试的时候去掉子级的高度) */
/* align-items: stretch; */
height: 300px;
/* margin: auto; */
border: 1px solid #000;
}
.box div {
width: 100px;
height: 100px;
background-color: pink;
}
/* 单独设置某个弹性盒子的侧轴对齐方式 */
/* .box div:nth-child(2) {
align-self: center;
} */
</style>
</head>
<body>
<div class="box">
<div>one</div>
<div>two</div>
<div>three</div>
</div>
</body>
- 伸缩比, 子控件2占用3/4,子控件3占用1/4
<head>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
height: 300px;
border: 1px solid #000;
}
.box div {
height: 200px;
margin: 0 20px;
background-color: pink;
}
.box div:nth-child(1) {
width: 50px;
}
.box div:nth-child(2) {
/* 占用父级剩余尺寸的份数 */
flex: 3;
}
.box div:nth-child(3) {
flex: 1;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
主轴和侧轴
1.在flex布局中，是分为主轴和侧轴两个方向的
默认主轴就是x轴方向，水平向右
默认侧轴方向就是y轴方向，垂直向下
2.属性值
flex-direction属性决定主轴的方向(即项目的排列方向)
当然，主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴了。但是子元素是跟着主轴来进行排列的
display: flex
---------------
flex-direction: row (默认从左到右)
flex-direction: row-reverse (从右到左)
flex-direction: column (从上到下)
flex-direction: column-reverse (从下到上)
flex-direction: row (默认从左到右)
flex-direction: row-reverse (从右到左)
flex-direction: column (从上到下)
flex-direction: column-reverse (从下到上)
<title>初体验</title>
<style>
div {
/*给父级添加flex，里面的行内元素就转换成了块级元素 */
display: flex;
width: 300px;
height: 150px;
background-color: skyblue;
margin: 0 auto;
/* 默认是沿着x轴排列的 */
/* flex-direction: row; */
/* 翻转，倒着排列 */
/* flex-direction: row-reverse; */
/* 设置y轴为主轴,x轴就成了侧轴 */
/* flex-direction: column; */
/* 沿y轴翻转 */
flex-direction: column-reverse;
}
div span {
width: 90px;
height: 45px;
background-color: plum;
margin: 5px;
/* flex: 1; */
}
</style>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
