HTML与CSS学习笔记(6)

1、flex弹性盒模型

在父容器中添加display:flex;把父容器变为弹性盒模型

作用(写)在flex容器上 作用(写)在flex子项上

flex-direction order

flex-wrap flex-grow

flex-flow flex-shrink

justify-content flex-basis

align-items flex

align-content align-self

*快速写子类的方法：
    div.parent>div.box按下tab：
     <div class="parent">
        <div class="box"></div>
    </div>
1、作用在flex容器上的属性：
    1、flex-direction:
        用来控制子项整体布局方向的，是从左往右还是从右往左，是从上往下还是从下往上。
            取值:
                row:默认值，显示为行，默认方向为当前文档水平流方向，默认情况下是从左往右
                row-reverse：显示为杭，但是方向与row属性值相反
                column：显示为列
                column-reverse：显示为列，方向与column属性值相反

    2、flex-wrap：
        用来控制子项整体单行显示还是换行显示
            取值：
                nowrap：默认值，表示单行显示，不换行
                wrap：宽度不足换行显示
                wrap-reverse：宽度不足换行显示，但是是从下往上开始，也就是原本换行在下面的子项现在跑到上面

            注：子元素不会轻易溢出，而是在无法自动调节大小适应父容器后才溢出。

    3、flew-flow
        flex-flow属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性，第一个值表示方向，第二个值表示换行，中间用空格隔开。

    4、justify-content(针对主轴)
        决定了主轴方向上所有子项的对齐和分布方式。
        取值：
            flex-start：默认值，表现为其实位置对齐
            flex-end：表现为结束位置对齐
            center：表现为居中对齐
            space-between：表现为两端对齐，between是中间的意思，意思是多余的空白间距只在元素中间区域分配
            space-around：around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
            space-evenly：evenly是匀称、平等的意思，也就是视觉上，每个flex子向两侧的空白间距完全相等。

    5、align-items(在侧轴方向上操作子容器)
        align-items中的items指的就是flex子项们当中的元素，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式。
        取值：
            stretch：默认值，flex子项拉伸
            flex-start：表现为容器顶部对齐
            flex-end：表现为容器底部对齐
            center：表现为垂直居中对齐

        *flex-wrap：wrap；造成的换行会使父容器平均分配（换了多少行就分几份），这就解释了为何换行后两行间距这么大，这是因为，换行后容器分成几份，容器间挨着，容器里面的元素未填满时，乍一看两容器内，元素的间隔很大，其实两容器本身是挨着的

    6、align-content(针对侧轴)
        决定了侧轴方向上所有子项的对齐和分布方式。
        align-content可以看成和justify-content是相似且对立的属性，如果所有flex子项中只有一行，则align-content属性是没有任何效果的
             取值：
                stretch：默认值，每一行flex元素都等比例拉伸，例如，如果共两行flex元素，则每一行拉伸高度是50%
                flex-start：默认值，表现为起始位置对齐
                flex-end：表现为结束位置对齐
                center：表现为居中对齐
                space-between：表现为两端对齐，between是中间的意思，意思是多余的空白间距只在元素中间区域分配
                space-around：每一行元素上下都享有独立不重复的空白空间。
                space-evenly：每一行元素都完全上下等分

        *关于主轴、侧轴，比如在一个长方形盒子中，主轴类似于x轴，从左到右，起点在左（start），终点在右（end）
        侧轴类似于Y轴，不过是从上到下，起点在上（start），终点在下（end）。
        justify-content(针对主轴上各子容器的分布)
        align-content(针对侧轴上各子容器的分布)

2、作用在flex子项上的属性
    作用(写)在flex子项上
        order：通过设置order改变某一个flex子项的排序位置，所有flex子项的默认order属性值为0(即全部元素都为0，元素按order值从左到右，由小到大排列)

        flex-grow：扩展就是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余空白间隙，默认值为0(整个空余空间总大小为1，大于1时，比如一个值为1，一个为2则剩余空间分三份)

        flex-shrink：shrink是收缩的意思，flex-shrink主要处理当flex容器空间不足时，单个元素的搜索比例，默认值是1(0表示不收缩)

        flex-basis：定义了在分配剩余空间之前元素的默认大小(有空白空间时给的是确定值，没剩余空间时，由于优先级问题，不能按达到预期的大小)，当与width一起写时，优先级高。

        flex：flex属性是flex-grow、flex-shrink和flex-basis的缩写,默认值： flex:0 1 auto;（顺序与左边一一对应）

        注：flex：1;比flex-grow;优先级高，前者可以覆盖默认宽度，后者不行。
        align-self(针对侧轴，align-items是针对多个子项，该属性针对某个具体某某个子项，除此之外功能完全一样)：
        属性值默认为center(居中)，指控制单独某一个flex子项的垂直对齐方式,属性值与align-items相同

2、Grid网格布局

 在父容器中添加display:grid;把父容器变为网格模型 

Grid布局死一个二维的布局方法，纵横两个方向总是同时存在的
    作用(写)在grid容器上                 作用子啊grid子项上
    grid-template-columns               grid-column-start
    grid-template-rows                  grid-column-end
    grid-template-ares                  grid-row-start
    grid-template                       grid-row-end
    grid-column-gap                     grid-column
    grid-row-gap                        grid-row
    grid-gap                            grid-area
    justify-items                       justify-self
    align-items                         align-self
    place-items                         place-self
    justify-content
    align-content
    place-content

    *创建12个div，内容分别为1~12：div{$}*12
    1、作用在grid容器上的属性
        1、 grid-template-columns 与 grid-template-rows
            对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应及fr单位（网格剩余空间比例单位）。
            有时候，我们网格的划分是很规律的，如果需要添加多个横纵网格时，可以利用repeat()语法进行简化操作。

                创建三行，四列的网格：
                    grid-template-rows: 100px auto 25%;
                    grid-template-columns: 100px 100px 200px 100px;
                fr分配剩余空间：
                    均分为三行三列：
                        grid-template-rows: 1fr 1fr 1fr;（fr的值累加后大于1才撑满剩余空间，与flex-grow的值类似）
                        grid-template-columns: 1fr 1fr 1fr;
                值使用repeat表示（横纵较多且相同的简写方式）
                repeat(3,1fr)：表示三个大小为1fr的行/列

        2、grid-template-ares和grid-template
            area是区域的意思，grid-template-area就是给我们的网格划分区域的。此时grid子项只要使用grid-area属性指定其隶属于哪个区.(区域划分不能形成特殊图形)

            grid-template是以上三个属性的复合写法
                分开写法：
                    grid-template-rows: repeat(3,1fr);
                    grid-template-columns:repeat(3,1fr);
                    grid-template-areas:
                    "a1 a1 a1"
                    "a2 a2 a3"
                    "a2 a2 a3";
                复合写法：（比较麻烦）
                    grid-template:
                    "a1 a1 a1" 1fr
                    "a2 a2 a3" 1fr
                    "a2 a2 a3" 1fr
                    /1fr 1fr 1fr;

        3、grid-column-gap和grid-row-gap
            这两个属性使用来定义网格中网格间隙的尺寸。
            CSS grid-gap属性是该两个属性的复合写法。  grid-gap: 20px 20px;第一个表示横向，第二个为纵向

        4、justify-items和align-items
            justify-items指定了网格元素的水平(主轴)呈现方式，是水平拉伸显示，还是左中右对齐。align-items制定了网格元素的垂直(侧轴)呈现方式，是垂直拉伸显示，还是上中下对齐。

            place-items是这两个属性的复合写法。
                place-items: center start;注意顺序，第一个针对纵向，第二个针对水平

                取值：
                stretch：默认值，拉伸。表现水平或垂直填充
                start：表现为容器左侧或顶部对齐(即主轴或侧轴的起点)
                end：表现为容器右侧或底部对齐(即主轴或侧轴的终点)
                center：表现为水平或垂直居中对齐。

        5、justify-content和align-content
            justify-content指定了网格元素的水平分布方式。align-content指定了网格元素的垂直分布方式。place-content是这两种属性的复合写法。
                place-content: center start;同样值的顺序为纵横

                取值：
                    stretch：默认值，拉伸，表现为水平或者垂直填充
                    start：表现为容器左侧或顶部对齐
                    end：表现为容器右侧或底部对齐
                    center：表现为水平或垂直居中对齐。
                    space-between：表现为两端对齐
                    space-around：享有独立不重叠打的空白空间
                    space-evenly：平均分配空白空间

            *justify-content与justify-items的区别(务必弄清楚区别)
                justify-content针对的是整个网格在容器内的排列。
                justify-items针对的是每个网格里面元素的排列。

     2、作用在grid子项上的属性
        1、grid-column-start表示子项起始纵线是那一条， grid-column-end表示的是子项结束纵线是哪一条
        定义网格是每一条线都是有序号的，横线，从上往下从1开始；纵线从左往右，从1开始
        grid-column-start: 2;
        grid-column-end: 3;(定义子项容器区域为第二条纵线到第三条纵线)
        *简写grid-column：2/3;斜线前表示起始位置，斜线后表示结束为止

        2、grid-row-start表示子项起始的横线是那一条， grid-row-end表示的是子项结束横线是哪一条
        grid-row-start: 2;
        grid-row-end: 3;(定义子项容器区域为第二条横线到第三条横线)
         grid-row-end: span 2;（span表示结束地方占两个网格）
        *简写grid-row：2/3;或者grid-row：2/span 3;斜线前表示起始位置，斜线后表示结束为止

        3、grid-area：表示当前网格所占的区域，有名字和位置两种表示方法。
            位置表示法： grid-area: 3/2/4/4;分别表示，横线起始位置、纵线起始位置、横线结束位置、纵线结束位置。

        4、justify-self：针对单个网格元素的水平(主轴)对齐方式；align-self：单个网格元素的垂直(侧轴)对齐方式
            复合写法： place-self: start end;值的顺序为纵横

3、移动端模拟器

切换平台之后一定要重新刷新浏览器

4、去访问一些网站的PC端和移动端

大一点的公司都是分开开发的，PC端一套代码，移动端一套代码

访问淘宝-->后端检测当前设备->如果是PC端->www.taobao.com
访问淘宝-->后端检测当前设备->如果是移动端->www.taobao.com重定向->h5.m.taobao.com

5、viewport视口？

在移动端viewport视口就是浏览器显示页面内容的屏幕区域，在viewport中有两种视口，分别表示为，visual viewport（可视视口）和layout viewport（布局视口）

    visual viewport大小固定跟屏幕大小相同，在上面，而Layout viewport可改变大小，在下面。Layout viewport默认大小为980像素，可通过document.documentElement.clientWidth获取

    现代王爷需要将layout viewport设置成visual viewport等同的大小，方便进行网页制作。

viewport设置成
    通过<meta>标签进行设置，name属性指定viewport的值，content属性进行视口配置。
        取值：
        width：设置layout viewport的宽度特定值，deice-width表示设备宽
        height：设置layout-viewport的高度特定值，一般不进行设置
        initial-scale：设置页面的初始缩放
        minimum-scale：设置页面的最小缩放
        maximum-scale：设置页面的最大缩放
        user-scalable：设置页面是否可以进行缩放（应禁止no）

    例如：做移动端网页时一定要加下面这句代码
        <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

6、移动端的适配方案

1、百分比布局，也叫流式布局(随着屏幕的变大，容器间的间隔会变大)。代表网站：优酷、百度、天猫、腾讯。
    好处：大屏幕下显示更多的内容；
    坏处：宽屏比例下会有一点不协调

2、等比缩放布局，也叫作rem布局(随着屏幕的变大，容器间的间隔不会变)。代表网站：网页、爱奇艺、淘宝、美团。
    rem布局：
        单位：
            em：是一个相对的单位，1em等于当前元素或者父元素的font-size值
            rem：是一个相对单位，1rem等于根元素的font-size值
            vw/vh：把屏幕分成100份，1vw等于屏幕宽的1%
    动态设置font-size的值：
        通过JS
        通过vw：
             vw:把屏幕分成100份，屏幕宽等于100vw
            iphone 375 则1vw->3.75
            iphone plus 414 则1vw->4.14

        如果在iphone下想得到100px，则应该设置多少个vw呢？(100/3.75)
        有插件可以解决px到rem的换算问题

    注：使用rem布局时要给body重置一下font-size：16px;否则字体会过大
    例子：先添加如下样式：
                html{font-size: 26.66667vw;}
                body{font-size: 16px;}
         在通过插件设置每1rem=100px（对应的尺寸）
         再选中相关样式：alt+z把其中的px单位转化为rem单位