前端学习记录 | 移动WEB（D10-13）

24.12.1-12.4

【 黑马pink老师 h5(html5)+css3+移动端前端视频教程】

目录

移动WEB

一、视口

二、二倍图

三、开发选择

四、移动端常见布局

1、流式布局（百分比布局）

案例1：京东移动端

2、flex布局（重要）

案例2：携程网首页

---

移动WEB

一、视口

视口是浏览器显示页面内容的屏幕区域，分为布局视口、视觉视口和理想视口

meta视口标签

二、二倍图

三、开发选择

单独移动端页面（主流）、响应式兼容PC移动端

四、移动端常见布局

1、流式布局（百分比布局）

案例1：京东移动端

1、移动端导航栏直接用a，不用ul>li

nav>a

2、全选从第二个开始后面的盒子：nthchild(n+2)

3、清除图片下方的空白复习：vertical-align:middle

2、flex布局（重要）

布局原理

常见父项属性

flex-direction 决定主轴方向

justify-content 设置主轴上子元素的排列方式

flex-wrap 设置子元素是否换行

如果装不开，会缩小子元素的宽度

align-items 设置侧轴上子元素的排列方式（单行）

strech是指沿着侧轴拉伸子元素（前提：子元素没有高度）

align-content 设置侧轴上子元素的排列方式（多行）

flex -flow direction和wrap的复合属性

常见子项属性

flex属性

类似百分比的分份数，可以不给盒子宽度

典型应用：

京东导航栏

快速进行同行/列内的子元素分配

align-self 控制子项自己在侧轴上的排列方式

在align-content的基础上可以控制其中的一个单个元素

order 定义子项的排列顺序

案例2：携程网首页

1、置定模块用position:fixed绝对定位！

·绝对定位以浏览器为参照的，一定要写宽度100% min-withd max-width

·固定定位和父级没有关系，所以要居中的话需要重新定位

left:50%

transform:translateX(-50%)

2、常见的flex布局思路

3、背景线性渐变