CSS布局总结（一）

前言：今天是学校为期六周的实训第一天，实训课感觉很水，第一天讲的竟然是HTML...实训老师丢了一个静态页面给我们做。感觉很久没写过这种东西，突然觉得自己的基本功很渣。布局这方面感觉需要总结一下，然后再去把做好的网站页面做成响应式的吧。

一、文档流布局（与display有关）

none；
block；
inline-block。

二、浮动布局（与float有关）

三、定位布局（与display有关）

static；
relative；
absolute；
fixed。

四、flex布局

flex 在IE浏览器上只支持 ie 10+，设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

   .ele{

       display: -webkit-flex;

       display: flex;

       display: inline-flex;

       display: -webkit-inline-flex;

   }

（1）父容器

flex-direction:主轴的方向；
flex-wrap:子元素超过父容器之后的怎么排列；
flex-flow：flex-direction 属性和 flex-wrap 属性的简写形式。；
justify-content：子元素在主轴的排列方向；
align-items：子元素在交叉轴的排列方向；
align-content：多根轴线的对齐方式。

具体用法：

.ele {

  flex-direction: row;                // 默认值，主轴为水平方向，起点在左端。

  flex-direction: row-reverse;        // 主轴为水平方向，起点在右端。

  flex-direction: column;             // 主轴为垂直方向，起点在上。

  flex-direction: column-reverse;     // 主轴为垂直方向，起点在下。

}

.ele {

 flex-wrap: nowrap;          // 默认，不换行

 flex-wrap: wrap;            // 换行，第一行在上方。

 flex-wrap: wrap-reverse     // 换行，第一行在下方。

}

.ele{

    justify-content: flex-start;      // 默认，左对齐

    justify-content: flex-end;        // 右对齐

    justify-content: center;          // 居中

    justify-content: space-between;   // 两端对齐，项目之间的间隔都相等。

    justify-content: space-around;    // 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

}

.ele {

  flex-flow: <flex-direction> || <flex-wrap>;

}

.ele{

    align-items: flex-start;    // 交叉轴的起点对齐。

    align-items: flex-end;      // 交叉轴的终点对齐。

    align-items: center;        // 交叉轴的中点对齐。

    align-items: baseline;      // 项目的第一行文字的基线对齐。

    align-items: stretch;       // 默认，如果项目未设置高度或设为auto，将占满整个容器的高度。

}

.ele{

    align-content: flex-start;   // 与交叉轴的起点对齐

    align-content; flex-end;     // 与交叉轴的终点对齐。

    align-content: center;       // 与交叉轴的中点对齐。

    align-content: space-between;// 与交叉轴两端对齐，轴线之间的间隔平均分布。

    align-content: space-around; // 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

    align-content: stretch;     // 默认 轴线占满整个交叉轴。

}

（2）子元素

order：子容器的排列顺序；
flex-grow：当父容器中有剩余空间时，按子元素设置的flex-grow，按比例进行拉伸子元素；
flex-shrink：默认不换行的情况下，子元素超过父容器，则按照子元素设置的flex-shrink，按比例缩小子元素；
flex-basis：子容器在不伸缩情况下的原始尺寸，即与width相同，但优先级比width高，若有一个为auto，则不为auto的优先级高；
flex：子元素的 flex 属性是 flex-grow,flex-shrink 和 flex-basis 的简写；
align-self：属性允许单个项目有与其他项目不一样的对齐方式。

具体用法：

.ele{

   order: num;

}

.ele{

    flex-grow: <number>; /* default 0 */

}

.ele{

    flex-shrink: <number>; /* default 0 */

}

.ele{

    flex-basis: <length> | auto; /* default auto */

}

.ele{

    align-self: auto;             // 继承父元素的 align-items 属性

    align-self: flex-start;       // 交叉轴的起点对齐。

    align-self: flex-end;         // 交叉轴的终点对齐。

    align-self: center;           // 交叉轴的中点对齐。

    align-self: baseline;         // 项目的第一行文字的基线对齐。

    align-self: stretch;          // 默认，如果项目未设置高度或设为auto，将占满整个容器的高度。

}

五、网格布局

grid可以实现flex实现不了的二维布局

（1）基本概念：

网格线即每条线；
网格轨道即两条线之间的空间；
单元格是四条网格线直接的空间，它是网格的最小单位；
网格区域是由任意四条网格线组成的空间，包含一个或多个单元格。

（2）代码解析

3行4列（也可以使用fr作为单位）

        .grid-container{

            display: grid;

            grid-template-rows: 50px 80px 100px;

            grid-template-columns: 50px 40px 100px 80px;

        }

第一行的的高度在100-200px之间，第二行的高度在50-200px之间，由于两者的最大高度之和超过300px,故都取最小高度，则300-100-50=150；

　　　则第一行的高度为：100+150/2=175；第二行的高度为：50+150/2=125

        .grid-container{

            display: grid;

            grid-template-rows: minmax(100px,200px) minmax(50px,200px);

            grid-template-columns: 1fr 1fr 2fr;

            height: 300px;

        }

2行3列，repeat（个数，大小）

        .grid-container{

            display: grid;

            grid-template-columns: repeat(2,100px);

            grid-template-rows: repeat(3,100px);

        }

grid-column-gap：创建列与列之间的距离。
grid-row-gap：行与行之间的距离。

        .grid-container{

            padding: 20px;

            display: grid;

            grid-template-columns: repeat(2,100px);

            grid-template-rows: repeat(3,100px);

            grid-column-gap: 50px;

            grid-row-gap: 15px;

            background: pink;

        }

item1 在第2-3条行网格线、第2-3列网格线之间，一共3行2列，即item在第四个格子。

        .grid-container{

            padding: 20px;

            display: grid;

            grid-template-columns: repeat(2,100px);

            grid-template-rows: repeat(3,100px);

            grid-column-gap: 50px;

            grid-row-gap: 15px;

            background: pink;

        }

        .item{

            border: 2px solid palegoldenrod;

            color: #fff;

            text-align: center;

            font-size: 20px;

        }

        .item1{

            grid-row-start:;

            grid-row-end:;

            grid-column-start:;

            grid-column-end:;

            background: #fffa90;

            color: #000;

        }

grid-row-start: 2; grid-row-end: 3; grid-column-start: 2; grid-column-end: 3;

等价于：

   grid-row: 2;

   grid-column: 3 / 4;

合并表格单元

.item1{

            grid-column-start:;

            grid-column-end:;

            grid-row-start:;

            grid-row-end:;

        }

巴特西

CSS布局总结（一）

最新文章

热门文章