建立个人网站需要什么,长沙有网站建站吗,广州广告制作公司,成都建立网站移动web开发——flex布局
目标
了解flex布局的优缺点及原理能够说出flex布局原理、使用语法、特点#xff08;重点#xff09;能够使用flex布局常用属性#xff08;重点#xff09;能够独立完成携程移动端首页
1.0 传统布局和flex布局对比
1.1传统布局
兼容性好布局繁…移动web开发——flex布局
目标
了解flex布局的优缺点及原理能够说出flex布局原理、使用语法、特点重点能够使用flex布局常用属性重点能够独立完成携程移动端首页
1.0 传统布局和flex布局对比
1.1传统布局
兼容性好布局繁琐
1.2 flex布局
操作方便布局极其简单移动端webkit内核都支持该属性pc端浏览器支持情况比较差、IE11或更低版本不支持flex或仅支持部分
1.3 建议
如果是pc端页面布局还是采用传统方式如果是移动端或者是不考虑兼容的pc则采用flex
演示
2.0 flex布局原理、特点、使用语法
名称flex 是 flexible Box 的缩写意为弹性布局把布局分为父项和子项 面试叫法flex布局又叫伸缩 布局 、弹性布局 、伸缩盒布局 、弹性盒布局 原理 采用 Flex 布局的元素称为 Flex 容器flexcontainer父级简称容器。它的所有子元素自动成为容器成员称为 Flex 项目flexitem简称项目。
使用语法flex布局入口加在父项上
display:flex;特点 任何一个标签都可以指定使用 flex 布局。当为父盒子设为 flex 布局以后子元素的 float、clear 和 vertical-align 属性将失效。使用思想上和传统盒子完全不同不要再想子元素是块级元素、行内元素等
总结就是通过给父盒子添加flex属性来控制子盒子的位置和排列方式
3.0 父项常见属性
flex-direction设置主轴的方向justify-content设置主轴上的子元素排列方式flex-wrap设置子元素是否换行align-content设置侧轴上的子元素的排列方式多行align-items设置侧轴上的子元素排列方式单行flex-flow复合属性相当于同时设置了 flex-direction 和 flex-wrap
3.1 flex-direction设置主轴的方向(重要)
在 flex 布局中是分为主轴和侧轴两个方向同样的叫法有 行和列、x 轴和y 轴默认主轴方向就是 x 轴方向水平向右默认侧轴方向就是 y 轴方向水平向下 注意 主轴和侧轴是会变化的就看 flex-direction 设置谁为主轴剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
3.2 justify-content 设置主轴上的子元素排列方式 3.3 flex-wrap设置是否换行
默认情况下项目都排在一条线又称”轴线”上。flex-wrap属性定义flex布局中默认是不换行的。nowrap 不换行放不开会缩小子元素的宽度放到父元素里面wrap 换行 3.4 align-items 设置侧轴上的子元素排列方式单行 该属性是控制子项在侧轴默认是y轴上的排列方式 在子项为单项单行的时候使用flex-start 从头部开始flex-end 从尾部开始center 居中显示stretch 拉伸
练习设置子盒子在父级盒子中水平垂直都居中
3.5 align-content 设置侧轴上的子元素的排列方式多行 设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况多行在单行下是没有效果的。
strech: 默认值 设置多行子元素平均分配父元素flex-start: 在侧轴的头部开始排列flex-end: 在侧轴尾部开始平均分布center: 在侧轴中间显示space-around: 子项在侧轴上平均分布space-between: 子项在侧轴上先两头分布再把平分剩余空间
3.6 align-content 和align-items区别
align-items 适用于单行情况下 只有上对齐、下对齐、居中和 拉伸align-content适应于换行多行的情况下单行情况下无效 可以设置 上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。总结就是单行找align-items 多行找 align-content
3.7 flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性
flex-flow:row wrap;重点案例 nav导航 分析
整体 确认主轴水平向右 单独一个元素 整体单个元素flex布局确认主轴Y轴列侧轴对齐居中
4.0 flex布局子项常见属性
flex子项目占的份数align-self控制子项自己在侧轴的排列方式order属性定义子项的排列顺序前后顺序
4.1 flex 属性(重要)
flex 属性定义子项目分配剩余空间用flex来表示占多少份数。应用 圣杯布局子项按比例分配
.item {flex: number; /* 默认值 0 */
}
4.3 order 属性定义项目的排列顺序
数值越小排列越靠前默认为0。
注意和 z-index 不一样。
.item {
5.0 携程网首页案例制作
携程网链接添加链接描述
5.1技术选型
方案我们采取单独制作移动页面方案
技术布局采取flex布局 5.3设置视口标签以及引入初始化样式
meta nameviewport contentwidthdevice-width, user-scalableno,initial-scale1.0, maximum-scale1.0, minimum-scale1.0link relstylesheet hrefcss/normalize.css
link relstylesheet hrefcss/index.css5.4常用初始化样式
body {max-width: 540px;min-width: 320px;margin: 0 auto;font: normal 14px/1.5 Tahoma,Lucida Grande,Verdana,Microsoft Yahei,STXihei,hei;color: #000;background: #f2f2f2;overflow-x: hidden;-webkit-tap-highlight-color: transparent;
}5.5 模块名字划分
