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

标题: 张建斌-2022.11.25 [打印本页]

作者: IT5353 时间: 2022-11-26 01:54
标题: 张建斌-2022.11.25
               流式布局（百分比布局）
                     flex弹性布局
                     less+rem媒体查询进行布局
                     混合布局
            响应式
                     媒体查询
                     bootstrap响应式框架
      流式布局
            流式布局即百分比布局，也叫非固定像素布局
            通过盒子的宽度设置百分比的方式来根据屏幕的宽度进行伸缩，不受固定像素的限制。
      flex布局
            flex布局和传统布局相比
                     传统布局：兼容性比较好，布局比较繁琐，局限性，在移动端布局的效率不高
                     flex布局：操作比较方便，布局很简单，移动端应用非常广泛，pc端的浏览器支持不是很好，ie11或者更低版本的浏览器不支持flex
                     如果pc端页面布局不考虑兼容性或者移动端可以大量的使用flex布局，如果要考虑兼容性，建议选择传统布局方式。
            flex布局原理
                     Flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供大量的灵活性，任何一个容器都可以指定为flex布局
                     当我们给父盒子设置为flex布局后，子元素里面的float、clear 和 vertical-align属性都将失效
                     采用flex布局的元素称为Flex容器（flex container），简称“容器”。它里面的所有的子元素自动称为容器的成员，称为Flex项目（Flex item），简称“项目”。
                     核心：通过给父元素添加flex属性来控制子盒子的排列方式
            flex布局父项常见属性
                     flex-direction  设置主轴方向
                              flex-direction: row;
                                    将x轴当做主轴，所有子元素从左到右依次排列
                              flex-direction: row-reverse
                                    将x轴当做主轴，所有子元素沿着x轴从右到左进行排列
                              flex-direction: column;
                                    将y轴当做主轴对待，所有子元素从上到下进行排列
                              flex-direction: column-reverse;
                                    将y轴当做主轴对待，所有子元素从下到上进行排列
                     justify-content 设置主轴上子元素的排列方式
                              justify-content: flex-start;
                                    默认值：从头部开始，如果主轴是X轴就是从左到右，如果主轴是Y轴就是从上到下
                              justify-content: flex-end;
                                    从尾部开始排列
                              justify-content: center;
                                    所有子元素沿主轴进行居中对齐
                              justify-content: space-around;
                                    所有子元素平分主轴上的剩余空间
                              justify-content: space-between;
                                    先让边缘的两个元素贴边，然后其他的元素再平分剩余的空间
                     flex-wrap  设置子元素是否换行
                              flex-wrap: nowrap;
                                    默认值：不换行
                              flex-wrap: wrap;
                                    让子元素自动换行
                     align-items 设置侧轴上子元素的排列方式（单行）
                              align-items: flex-start;
                                    从侧轴的头部开始排列
                              align-items: flex-end;
                                    从侧轴的底部开始排列
                              align-items: center;
                                    让子项沿侧轴居中
                              align-items: stretch;
                                    将子项拉伸到和父级一样的高度（前提是子项不能有高度
                     align-content 设置侧轴上的子元素的排列方式（多行）
                              align-content: flex-start;
                                    沿侧轴的顶部开始排列
                              align-content: flex-end;

在侧轴的底部开始排列
                              align-content: center;
                                    让所有的子项侧轴居中排列
                              align-content: space-around;
                                    子项沿侧轴平分剩余空间
                              align-content: space-between;
                                    子项两侧先贴边，然后再平分剩余空间

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