• HTML + CSS (下)【更新中】


    弹性盒子:

        定义:弹性盒子模型是css3中新提出的一种布局方案。是一种为了应对针对不同屏幕宽度不同设备的一整套新的布局方案。

           主要是对一个容器中的子元素进行排列、对齐和分配空白空间的方案的调整。

      新旧版本的弹性盒子模型: 

         在之前,css3曾经推出过旧版本的弹性盒子模型。相对于新版本的弹性盒子模型而言,旧版本的内容与新版本还是有些出入。

         而且,从功能上来讲,旧版本的弹性盒子模型远远没有新版本的盒子模型强大,从兼容性来讲,二者在pc端ie9以下都存在着兼容性问题,但是在移动端,旧版本的弹性盒子模型兼容性则更好一点。但是对于我们来说,我们依然要将主要的精力放在新版本的弹性盒子模型的身上,因为旧版本的弹性盒子模型淘汰是必然,随着手机端的兼容性逐渐提升,旧版本必将被淘汰。

         另外,新版本具有更加强大的功能,也值得我们进行深度的学习。

         那么我们对于新旧两个版本的弹性盒子模型,我们只需要抱着对比的心态学习即可,掌握新版本,了解旧版本,这样即使有一天我们需要使用旧版本,也可以非常容易的学习旧版本的弹性盒子模型。

      相关概念:

          主轴:我们以元素排在一行为例,当元素排列在一行的时候,主轴既表示元素排列的方向,横向排列则主轴即可以理解为一条横线,

             又因为我们元素默认是从左向右排列,那么我们可以说在默认的情况下,元素的主轴的起始位置是在左,而方向为右,终点也为右。

          侧轴:元素垂直的方向即为侧轴。默认上为起点,下为终点。

          弹性容器:我们想要使用弹性盒子模型,就需要将容器转换为弹性容器,我们说一个包含于子元素的容器设置了display:flex,那么这个容器也就变成了弹性容器。

          弹性子元素:当子元素的父元素变成了弹性容器,那么其中的所有的子元素也自然而然的变成了弹性子元素。

      创建弹性容器:

              display:flex|inline-flex

      弹性容器属性:

          flex-direction:

              flex-direction

          flex-wrap:   

    flex-wrap

          flex-flow:flex-direction 和 flex-wrap 的简写

          align-item:

              align-item

          align-content:

              align-content

          justify-content

              justify-content

        弹性子元素属性:

    弹性子元素属性

    多列布局:

        多列布局是css3当中新增加的布局属性,目的是让网页的布局变得更加的灵活。
            相关属性
                column-count 规定元素应该被分隔的列数.
                    值:number |auto

                column-fill 指定如何填充列(兼容性较差,了解就好)
                    值: balance(所有列的高度与其中最高的一列统一)|auto(列高度自适应内容)

                column-gap 指定列与列之间的间隙
                    值:length(用长度值来定义列与列之间的间隙。不允许负值 )|normal(与 <' font-size '> 大小相同。

                          假设该对象的font-size为16px,则normal值为16px,类推。 )

                column-rule 所有column-rule-*的属性的简写

                    语法:column-rule: column-rule-width column-rule-style column-rule-color

                        column-rule-color 指定两列间边框的颜色

                        column-rule-style 指定两列间边框的样式

                        column-rule-width 指定两列间边框的宽度
                            值:thin(较细的边框)|medium(中等边框)|thick(粗)|length;

                        column-span 指定元素要跨的列数
                            语法:column-span: 1(1或者none,横跨一列)|all(横跨所有列);

                        column-width指定列的宽度
                            语法:auto(浏览器将决定列的宽度)|length(指定列宽的长度,column-count会产生影响);

                        columns
                            设置column-width和column-count的简写

     

    响应式布局:

        未完待续!

  • 相关阅读:
    第二阶段Sprint2
    第二阶段Sprint1
    Sprint10
    Sprint9
    Sprint8
    Sprint7
    第二阶段个人工作总结(2)
    第二阶段个人工作总结(1)
    查找三个“水王”
    构建之法阅读笔记03
  • 原文地址:https://www.cnblogs.com/ZhaoWeiNotes/p/11408752.html
Copyright © 2020-2023  润新知