标签：box 网页 进阶 前端 布局 基础 height 对齐 分辨率
前端基础进阶
移动端特点
-
头脑风暴
-
PC端网页和移动端网页的有什么不同？
-
PC屏幕大，网页固定版心
-
手机屏幕小， 网页宽度多数为100%
-
-
如何在电脑里面边写代码边调试移动端网页效果？
-
谷歌模拟器
-
-
-
谷歌模拟器
-
使用谷歌模拟器调试移动端网页
-
-
屏幕尺寸
-
概念
-
指的是屏幕对角线的长度，一般用英寸来度量
-
-
分辨率
-
PC分辨率
-
1920 * 1080
-
1366 * 768
-
......
-
-
缩放150%
-
（1920/150%）*（1080/150%）
-
-
总结
-
硬件分辨率（出厂设置）
-
缩放调节的分辨率（软件设置）
-
-
分辨率分类
-
物理分辨率是生产屏幕时就固定的，它是不可被改变的
-
逻辑分辨率是由软件（驱动）决定的
-
-
制作网页参考物理分辨率还是逻辑分辨率？
-
逻辑分辨率
-
-
-
视口
-
使用meta标签设置视口宽度，制作适配不同设备宽度的网页
-
手机屏幕尺寸都不同， 网页宽度为100%
-
网页的宽度和逻辑分辨率尺寸相同。
-
默认情况下，网页的宽度和逻辑分辨率相同吗？
-
不同， 默认网页宽度是980px。
-
-
-
目标：网页宽度和设备宽度(分辨率)相同。
-
解决办法：添加视口标签。
-
视口：显示HTML网页的区域，用来约束HTML尺寸。
-
viewport：视口
-
width=device-width：视口宽度 = 设备宽度
-
initial-scale=1.0：缩放1倍（不缩放）
-
-
-
二倍图
-
能够使用像素大厨软件测量二倍图中元素的尺寸
-
图片分辨率, 为了高分辨率下图片不会模糊失真
-
现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿。
-
二倍图设计稿尺寸：750px。
-
百分比布局
-
百分比布局
-
百分比布局， 也叫流式布局
-
效果： 宽度自适应，高度固定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.toolbar {
position: fixed;
left: 0;
bottom: 0;
/* 百分比布局 流式布局 */
width: 100%;
height: 50px;
background-color: pink;
border-top: 1px solid #ccc;
}
.toolbar li img {
height: 100%;
}
.toolbar li {
float: left;
/* 百分比布局 流式布局 */
width: 20%;
height: 50px;
}
</style>
</head>
<body>
<div class="toolbar">
<ul>
<li>
<a href="#"><img src="./images/index.png" alt=""></a>
</li>
<li>
<a href="#"><img src="./images/classify.png" alt=""></a>
</li>
<li>
<a href="#"><img src="./images/jd.png" alt=""></a>
</li>
<li>
<a href="#"><img src="./images/car.png" alt=""></a>
</li>
<li>
<a href="#"><img src="./images/login.png" alt=""></a>
</li>
</ul>
</div>
</body>
</html>
-
Flex布局
-
Flex布局
-
够使用Flex布局模型灵活、快速的开发网页
-
多个盒子横向排列使用什么属性？
-
浮动
-
-
设置盒子间的间距使用什么属性？
-
margin
-
-
需要注意什么问题？
-
浮动的盒子脱标
-
-
-
Flex布局/弹性布局：
-
是一种浏览器提倡的布局模型！！！
-
布局网页更简单、灵活
-
避免浮动脱标的问题
-
-
Flex布局模型构成
-
作用
-
基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
-
Flex布局非常适合结构化布局
-
-
设置方式
-
父元素添加 display: flex，子元素可以自动的挤压或拉伸
-
-
组成部分
-
弹性容器（父级）
-
弹性盒子（子级）
-
主轴
-
侧轴 / 交叉轴
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>体验flex布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
/* 视觉效果: 子级一行排列/水平排列 */
/* 水平排列: 默认主轴在水平, 弹性盒子都是沿着主轴排列 */
display: flex;
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>
</html>
-
-
主轴对齐方式
-
使用justify-content调节元素在主轴的对齐方式
-
在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距。
-
修改主轴对齐方式属性: justify-content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>主轴对齐方式</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
/* 居中 */
justify-content: center;
/* 间距在弹性盒子(子级)之间 */
justify-content: space-between;
/* 所有地方的间距都相等 */
justify-content: space-evenly;
/* 间距加在子级的两侧 */
/* 视觉效果: 子级之间的距离是父级两头距离的2倍 */
justify-content: space-around;
height: 200px;
margin: auto;
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>
</html> -
-
侧轴对齐方式
-
使用align-items调节元素在侧轴的对齐方式
-
修改侧轴对齐方式属性:
-
align-items（添加到弹性容器）
-
align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>1111</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
-
-
伸缩比
-
使用flex属性修改弹性盒子伸缩比
-
属性
-
flex : 值;
-
-
取值分类
-
数值(整数)
-
-
-
注意 : 只占用父盒子剩余尺寸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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>
</html>
-
标签：box,网页,进阶,前端,布局,基础,height,对齐,分辨率 来源： https://www.cnblogs.com/xydchen/p/15832003.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。