三大布局与flex布局

时间 2019-11-06

标签三大布局 flex 栏目 Flex 繁體版

原文原文链接

1.常见的布局方案有哪些？

流式布局
流式布局指的是按照标准文档流进行布局的布局方式，它为系统默认的布局方式，同时也是最为简单的布局方式。换句话说，在默认状况下，HTML中全部元素都是根据流动布局模型，从上到下，从左到右的方式来分布网页中的内容。
举例代码以下:

最终运行结果则是块级元素独占一行，行内元素并排显示，彻底符合标准文档流的模式.
    <style>
           div{
               width: 100px;
               height: 100px;
               border: 2px solid red;
           }
           span{
               border: 1px solid blue;
           }
        </style>
    </head>
    <body>
        <div>css</div>
        <div>html</div>
        <div>js</div>
        <span>span</span>
        <span>span</span>
        <span>span</span>
        <span>span</span>
    </body>
复制代码

浮动布局
浮动就是说盒子脱离了标准文档流（半脱离），标准文档流内的各类规则将再也不适用。做用本来是为了实现字围效果，但后来发现可让男标签并排显示，在同一行上和平共处。格式：float:left/right/none none默认为不浮动。更为详细的内容会在下面详细解释。
举例代码以下：

代码跑起来会出现字围效果，即文字（足够多时效果更明显）将图片包围了起来
    <style>
       img{
        width: 100px;
        height: 100px;
        border: 2px solid green;
        float:left;
      }
    </style>
</head>
<body>
    <div>
    <!--图片能够为任意-->
     <img src="./imgs/icon.png" alt="">
      做用本来是为了实现字围效果，但后来发现可让男标签并排显示，在同一行上和平共处。
      做用本来是为了实现字围效果，但后来发现可让男标签并排显示，在同一行上和平共处。
      做用本来是为了实现字围效果，但后来发现可让男标签并排显示，在同一行上和平共处。
      做用本来是为了实现字围效果，但后来发现可让男标签并排显示，在同一行上和平共处。
      做用本来是为了实现字围效果，但后来发现可让男标签并排显示，在同一行上和平共处。
    </div>
</body>
使得块级元素并排显示
  <style>
        div{
            width: 100px;
            height: 100px;
            background-color:#358990;
            border: 2px solid yellow;
            /* 会使得div并排显示 */
            float: left;
        }
    </style>
</head>
<body>
    <div>div</div>
    <div>div</div>
    <div>div</div>
</body>
复制代码

层布局
层布局简单来讲能够称为定位，它是彻底脱离了标准文档流的一种布局方案。它的好处：可以实现更为丰富的布局方式，为用户提供更好的体验。使用position这个属性来实现。
在CSS中，对于层布局，有以下三种实现方法（定位方式）：

相对定位：relative
参考点：盒子自己它应该出现的位置；
应用：在进行局部的细节调整时，或者做为绝对定位的参考点时。
绝对定位：absolute
参考点：根据设置的参考点（position：relative）进行定位 注意点：在寻找参考点时是一直向上寻找，找到的话就以这个参考点为主，不然就一直向上寻找，直到body，若是body没有设置参考点，那么就以body为参考点。
z-index:绝对定位因为它彻底脱离了标准文档流，它可能会发生覆盖；在它发生覆盖时，可经过z-index改变前后顺序1，z-index的值越大，就越靠前。
另外有个小知识点就是不管盒子是否彻底脱离文档，只要是脱离啦，那么就变成了块级，就能够设置宽高啦！不管是哪一种定位，都须要设置偏移量（top,right,bottom,left）。
固定定位:fixed
参考点：网页上的页面视窗
注意细节：在使用百分比时，它不是相对于body的值，而是针对当前窗口的值。

flex布局
flex布局要比float更好用，要是你熟练掌握flex布局，不会float也OK的！ flex布局的四大概念：
（1）容器：若是一个盒子设置了display：flex，那么这个盒子（必须是div标签）就变成一个容器；
（2）项目：容器的直接子元素才可称之为项目，其它的都不属于项目；
（3）主轴：在容器（这时已经display过啦）中，项目默认按主轴方向排列，默认是从左向右排列的；
（4）交叉轴：与主轴垂直的轴称为交叉轴。
容器的相关属性：
（1）flex-direction:改变主轴方向值：row(默认主轴方向) column(垂直的主轴方向) row-reverse(存在反转的含义) column-reverse(同上)

（2）flex-wrap:项目足够多的时候，是否换行值：wrap nowrap

（3）flex-flow:flex-direction和flex-wrap属性的简写形式。默认值：row nowrap；由于它太过于无聊简单，就不在演示。
（4）justify-content:处理富余空间值：flex-start flex-end center space-between space-around

（5）align-items:定义项目在交叉轴上是如何对齐的值：flex-start flex-end center

（6）align-content:当有多根主轴时，多根主轴的对齐方式；至关于处理垂直方向上的富余空间值：flex-start flex-end center space-bewteen space-around

项目相关属性：
（1）order:用来改变项目顺序和z-index有点相像，只不过该值是越大越靠后，z-index是越大越靠前值：直接用数字来表示大小

（2）flex-grow:用来让项目长大从而充满主轴值：直接用数字来表示大小，而项目也会按照数字比例来分配空间大小。

（3）flex-shrink：让某个项目压缩，也就和flex-grow相反值：直接用数字来表示大小，而项目也会按照数字比例来分配空间大小，在分配时与上面相反，数值越大，压缩越狠，所占空间越小。
（4） flex-basis：项目在主轴上占据的大小值：直接用数字（px）来表示大小，能够设置为百分比(这是基于容器来讲的)。

（5）flex：是一个复合属性，是上述几个属性的简写形式值：上面几个属性的综合，固然上面属性不设置的就能够不写数值啦
（6）align-self：单独设置某个项目的对齐方式,单独一个项目在交叉轴的对齐方式值：flex-start flex-end center

2.浮动布局的详细介绍

（1）浮动有三大特色css

包裹性：若是一个块级元素，在没有设置width的状况下（前提条件），一旦使用float，那么它的宽度就会发生变化，尽可能最小，包裹元素里的内容，可以彻底包裹其中内容。
破坏性：在一个块级元素中，若是它的子元素都浮动了起来，而且没有清除浮动，那么块级元素将会塌陷，这就是浮动的破坏性。
块级框：若是一个行内元素，设置浮动之后就变成一个块级框，块级框有一个特色，就是能够设置盒子模型的六大属性；简单来讲，当一个元素浮动时，它会悄悄的作一个变性手术。若是一个女盒子浮动了，那么就能够设置宽高了至关于把它变成男标签（挺简单的，再也不写代码啦）。

（2）浮动的其它特色
0，浮动的初衷目的是为了实现字围效果，后来才发现，浮动可让多个男标签并排显示。
1，在一个父元素内部，若是一个元素浮动了，那么它就脱离了标准文档流，后面的元素就向上排，它只会对浮动元素后面的元素起做用。
2，浮动并无彻底脱离标准文档流，仅仅是半脱离，具备脱标性，若是后面元素内部有文字，这些文字会环绕在浮动元素的周围，产生了字围效果。
3，若是多个元素浮动了，那么它们会并排显示，若是都是向同一方向的浮动，它们会牢牢贴靠在一块儿。
4，若是一个元素浮动了，先向上移动，直到贴靠到父元素顶部，接着知足左浮动或者右浮动的要求，向左边界或右边界浮动，直到移动到父元素的边界处。
5，若是一个元素没有设置高度，它的高度由里面的内容撑起来，若是父元素内部元素都浮动了，那么会形成父元素的塌陷问题；而若是父元素也浮动了，则不会出现高度的塌陷。
6，一个元素浮动了，那么它也会受到父元素的控制。当父元素宽度变小时，装不下全部子元素时，后面的子元素具备贴靠性。当父元素小到极致时，里面浮动的子元素宽度是不会改变的，也就是说边框走，里面内容宽度不变。 7，就是说若是有一个元素为左浮动，一个元素为右浮动，那么你须要把右浮动的元素写在左左浮动的前面。
8，若是元素浮动，那么会形成的影响有：形成父元素高度塌陷；对后面兄弟元素形成影响。
（3）元素浮动形成的影响解决方法
针对的是父元素塌陷的解决方案：
1，加高法：就是直接给块级元素加一个高度；大部分状况下是不用的，由于父元素的高度都是由子元素的内容撑起来的。
2，overflow：hidden：使用了overflow：hidden，父元素会随着子元素的高度变化而变化。overflow：hidden原本是用来处理溢出的，在使用过程当中，须要注意子元素若是想要超出父元素的高度，此时overflow：hidden也就不适合啦！
3，clear:both（内墙法）：在全部子元素后面加一个空的div，在这个div上面加clear:both；它的优势在于clear:both专业清除浮动的，而缺点是多写一个代码
针对后面兄弟元素影响的解决方案：
1，直接在受影响元素上加clear:both。
工程中经常使用的清除浮动的方案：
1，利用伪元素 after 也就是说直接写一个清除浮动的类（clear）：
举例.clear:after{content=""; display:block; clear:both; height:0; overflow:hidden;}html