PC端网页和移动端网页的有什么不同？
PC屏幕大，网页固定版心
手机屏幕小， 网页宽度多数为100%
如何在电脑里面边写代码边调试移动端网页效果？
谷歌模拟器
<style>
body {
height: 3000px;
}
/* 浮动盒子区域 */
.float {
border: 10px solid tomato;
}
.float div {
width: 200px;
height: 200px;
background-color: #0a0;
border: 10px solid #ff0;
font-size: 60px;
color: #fff;
font-weight: 700;
text-align: center;
line-height: 200px;
}
/* 弹性盒子区域 */
.flex {
border: 10px solid pink;
justify-content: space-between;
}
.flex div {
/* 盒子 */
width: 200px;
height: 200px;
background-color: #0a0;
border: 10px solid #6cf;
/* 文字 */
font-size: 60px;
color: #fff;
font-weight: 700;
text-align: center;
line-height: 200px;
}
</style>
<style>
* {
margin: 0;
padding: 0;
}
.box {
/*
添加弹性布局 ：display：flex
弹性容器：display：flex
默认宽度和父元素一样，默认的高度由内容撑开。
12345这些小盒子叫弹性盒子
/
display: flex;
width: 1000px;
height: 600px;
background: orange;
}
.box div {
/ 弹性盒子：弹性容器的最近一级子元素（亲儿子子元素） /
/ 1.默认的宽度由内容所撑开，默认的高度为父元素的高度
（侧轴（垂直）方向默认是拉伸） /
/ 2.弹性盒子没有块级，行内，行内块元素之分，统统称为弹性盒子
（可以直接设置宽高，并且一行设置多个） /
/ 默认不换行：宁愿牺牲自己的宽度，都不会自动换行 */
width: 100px;
height: 100px;
color: #fff;
font-size: 30px;
font-weight: 700;
text-align: center;
line-height: 100px;
background-color: #0a0;
border: 1px solid #fff;
}
a {
width: 100px;
height: 100px;
background-color: purple;
}
</style>
<style>
* {
margin: 0;
padding: 0;
}
.box {
/* 添加弹性布局 df */
/* 改变主轴对齐方式 */
/* flex-start 默认值：从父元素的左边开始显示
justify-content: flex-start;*/
/* flex-end ：让弹性盒子整体，显示在弹性容器的右边
justify-content: flex-end;*/
/* center 让弹性盒子整体，显示在弹性容器的中间
justify-content: center;*/
/* space-around 让空白空间环绕在弹性盒子的两侧，
第一个和最后一个盒子离弹性容器的距离为弹性盒子与弹性盒子之间的1/2
justify-content: space-around;*/
/* space-between 让空白空间分布在弹性盒子与弹性盒子之间
---第一个和最后一个弹性盒子离弹性容器的距离为0
justify-content: space-between;
/* space-evenly 弹性盒子离弹性容器之间的距离
与弹性盒子与弹性盒子之间的距离相等
justify-content: space-evenly;*/
/* justify-content: center; */
justify-content: space-between;
display: flex;
width: 1000px;
height: 600px;
background: orange;
}
.box div {
width: 100px;
height: 100px;
color: #fff;
font-size: 30px;
font-weight: 700;
text-align: center;
line-height: 100px;
background-color: #0a0;
border: 1px solid #fff;
}
</style>
<style>
* {
margin: 0;
padding: 0;
}
.box {
/* 添加弹性布局 /
display: flex;
/ 默认值flex-start从起点开始排列 /
/ align-items：flex-start */
/* flex-end 从终点排列 */
/* align-items：flex-end */
/* 垂直居中 */
align-items: center;
/* 默认值 stretch 垂直拉伸：沿着侧轴（垂直）方向拉伸弹
性盒子的高度直到父元素一样高 */
/* align-items：stretch */
width: 1000px;
height: 600px;
background: orange;
}
.box div {
width: 100px;
height: 100px;
color: #fff;
font-size: 30px;
font-weight: 700;
text-align: center;
line-height: 100px;
background-color: #0a0;
border: 1px solid #fff;
}
.box .te {
/* align-self的属性值和ai是一样的，控制某个弹性盒子的侧轴方向排列 */
align-self: flex-start;
}
</style>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
width: 1000px;
height: 600px;
background: orange;
}
.box div {
/* flex: 1; */
width: 200px;
height: 100px;
color: #fff;
font-size: 30px;
font-weight: 700;
text-align: center;
line-height: 100px;
background-color: #0a0;
border: 1px solid #fff;
}
.box .san {
flex: 2;
}
.box .li {
flex: 1;
}
.box .zh {
flex: 3;
}
/* 伸缩比：flex给弹性盒子添加：*/
/* 1.所有的盒子都添加flex：均分弹性容器的宽度*/
/* 2.其他的盒子宽度固定，只有一个盒子设置了flex为1 */
/* <!-- 需求李狗蛋吃一份，张三吃两份，张翠花吃三份 --> */
/*
总结：
弹性容器设置的属性：df，jc，ai
弹性盒子设置的属性：align-self，flex
*/
</style>
<style>
.box {
display: flex;
/* 水平居中 主轴居中 */
justify-content: center;
/* 垂直居中：侧轴居中 */
align-items: center;
/* 能不能用定位？可以用！ */
/* position: relative; */
/* 浮动不会配合df一起使用！ */
width: 400px;
height: 400px;
background: #6cf;
}
.son {
/* position: absolute;
left: 50%;
top: 50%;
transform: translate(-50% -50%); */
width: 120px;
height: 120px;
background-color: #0a0;
}
</style>
