菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 流式布局-袁瑞-2-221124 [打印本页]

作者: Yrrrrrrrrrr 时间: 2022-11-24 22:21
标题: 流式布局-袁瑞-2-221124

视口和多倍图
视口概念：
视口就是浏览器显示页面内容的屏幕区域，视口可以分为：布局视口、视觉视口和理想视口。
理想视口：
使网站在移动端有最理想的浏览和阅读宽度而设定的，对于设备来说，理想视口是最理想的视口尺存
需要手动来添加<meta>标签来进行视口的设置
meta视口标签的主要目的：
布局视口的宽度和理想视口的宽度一致，简单来说就是设备有多宽，我们的布局的视口就有多宽
视觉视口

指用户正在看到的网站的区域，注意：是正在看到的网站区域，我们是可以通过缩放去操作视距视口里面能看到的内容的，但是不会影响布局视口，布局视口仍然采用的是原来的宽度。
meta标签
物理像素和物理像素比
多倍图
二倍精灵图的使用

移动端开发的选择和技术方案
移动端的主流方案
1、单独制作移动端网页（主流）
2.响应式的方式来制作网页
浏览器的兼容问题
1、移动端的浏览器基本都是以webkit内核为主，我们主要考虑webkit兼容性即可
2.移动端里面我们可以放心的去使用HTML5 和 CSS3的样式
3.同时我们的浏览器的私有前缀只需要考虑添加webkit即可
4.移动端的公共样式文件

移动端的常见布局
1.移动端单独制作（主流）
2、响应式（次要布局方式）

流式布局
1.流式布局就是百分比布局，也叫做非固定像素布局
2.通过盒子的宽度设置为百分比的方式来根据屏幕的宽度进行伸缩，不受固定像素的限制

Flex布局
1.传统布局和flex布局对比
传统布局：兼容比较好，布局繁琐。局限性，在移动端布局的效率不高
Flex布局：1.操作方便，布局简单应用广泛。2.PC端的浏览器支持情况不是很好。3.如果PC端页面布局不考虑兼容性或者移动端可以大量的使用flex布局，如果要考虑兼容性，建议选择传统布局方式。
2.Flex的布局原理
Flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供大量的灵活性，任何一个容器都可以指定为flex布局
当我们给父盒子设置为flex布局后，子元素里面的float、clear 和 vertical-align属性都将失效
采用flex布局的元素称为Flex容器（flex container），简称“容器”。它里面的所有的子元素自动称为容器的成员，称为Flex项目（Flex item），简称“项目”。
核心：通过给父元素添加flex属性来控制子盒子的排列方式

3.Flex布局父项常见属性
flex-direction 设置主轴方向
row、row-reverse
clomum、clomum-reverse
justify-content 主轴子元素的排列方式
flex-start 主轴X轴，从左到右。y轴：从右到左
flex-end: 尾部开始排列
center:所有子元素沿主轴进行居中对齐
space-around: 子元素平分剩余空间
space-between: 两边元素贴边，其他元素平分剩余空间
flex-wrap 元素是否换行
align-items 设置侧轴上子元素的排列方式（单行）
flex-start:侧轴的头部开始
flex-end:侧轴的尾部开始
center：让子项沿侧轴居中
strentch:让子元素拉到和父亲一样的高度
align-content 设置侧轴子元素的排列方式，（多行）
flex-start:沿侧轴的顶部开始排列
flex-end: 在侧轴的底部开始排列
space around:子项沿侧轴平分剩余空间
space-between:子项两侧先贴边，然后再平分剩余空间
strench:设置子项元素高度平分父元素的高度(前提是子项不能设置高度)
flex-flow 是flex-direction 和 flex-wrap的复合属性
Flex布局子项常见属性
1.flex子项占的份数

2.flex子项占的份数:给子项直接设置flex:1; 每一个子项就可以平分父项的空间了
如果父元素中有一个子项有自己的宽高，那么就是在该子项宽高占用的空间后的剩余空间内其他子项在平分空间
lign-self控制子项自己在侧轴上的排列方式
单独控制某一个子项的排列方式，可以覆盖align-items属性
order属性来定义子项的排列顺序（前后顺序）
数值越小，排列越靠前，默认值0

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)