常用布局【类】整理

作者: js_hcl | 来源:发表于2019-04-02 00:26 被阅读21次

相关文章

Grid和Flex对比总结

css可以分为三类

base.css

common.css 本文可以作为common.css来使用

page.css

一、Grid布局(`二维布局`)(`网格布局`)

/* grid布局 */
.grid{
    display: grid;
}
/* grid容器模板设置 */
.grid-template-xx{
    grid-template-rows: repeat(12,1fr);
    grid-template-columns: 100px;
    grid-template-areas: 'a a a a';
    /* 剩余网格的宽高会根据内容来决定，类似flex */
    grid-auto-rows: auto;/*设置剩余网格的高*/
    grid-auto-columns: auto;/*设置剩余网格的宽*/
}
/* 网格间距 */
.grid-gap-20{
    gap: 20px 20px;
}
.grid-gap-40{
    gap: 40px 40px;
}
/* 排版方向 */
/* 指定排版方向，后面项目默认是跟随其后 */
/* 如果在当前行没有可用位置，网格会自动搜索下一行，这样会造成一定的差距，浪费可用空间 */
.grid-direction-row{
    grid-auto-flow: row;
}
.grid-direction-column{
    grid-auto-flow: column;
}
/* 某些项目指定位置以后，剩下的项目怎么自动放置 */
/* 以下两个属性，是对于部分项目指定位置，导致后面跟随其后留空格问题，的解决方案 */
/* dense 英 [dens] 稠密的，意为去除空位置 */
.grid-direction-row-dense{
    grid-auto-flow: row dense;
}
.grid-direction-column-dense{
    grid-auto-flow: column dense;
}

/* 容器内容排版，带c代表content*/ 
/* 容器内容水平排版 */
/* start | end | center | stretch | space-around | space-between | space-evenly */
.grid-justifyc-between{
    justify-content: space-between;
}
.grid-justifyc-center{
    justify-content: center;
}
/* 容器内容垂直排版,仅对多行时生效*/
.grid-alignc-start{
    align-content:start;
}
.grid-alignc-between{
    align-content: space-between;
}
.grid-alignc-center{
    align-content: center;
}
/* 项目s内容排版,带s代表项目s */
/* start | end | center | stretch */
.grid-justifys-center{
    justify-items: center;
}
.grid-aligns-center{
    align-items: center;
}

/* grid项目常用类 */
/* 行 跨越几个网格，较少用*/
.grid-row-span2{
    grid-row: span 2;
}
.grid-row-span4{
    grid-row: span 4;
}
.grid-row-span6{
    grid-row: span 6;
}
.grid-row-span8{
    grid-row: span 8;
}
.grid-row-span10{
    grid-row: span 10;
}
/* 列跨越几个网格 */
.grid-column-span2{
    grid-column: span 2;
}
.grid-column-span4{
    grid-column: span 4;
}
.grid-column-span6{
    grid-column: span 6;
}
.grid-column-span8{
    grid-column: span 8;
}
.grid-column-span10{
    grid-column: span 10;
}

/* 项目自身对齐方式 */
/* start | end | center | stretch */
/* 项目内容水平方向 */
.grid-justify-self-start{
    justify-self: start;
}
.grid-justify-self-center{
    justify-self: center;
}
.grid-justify-self-end{
    justify-self: end;
}
/* 项目内容垂直方向 */
.grid-align-self-start{
    align-self: start
}
.grid-align-self-center{
    align-self: center;
}
.grid-align-self-end{
    align-self: end;
}

二、Flex布局(`一维布局`)(`弹性布局`)

/* flex容器常用类 */
.flex{
    display: -webkit-flex; /* Safari */
    display: flex;
}

/* 排版方向 */
.flex-direction-row{
    flex-direction: row;
}
.flex-direction-row-reverse{
    flex-direction: row-reverse;
}
.flex-direction-column{
    flex-direction: column;

}
.flex-direction-column-reverse{
    flex-direction: column-reverse;
}

/* 容器内容排版，带c代表content*/ 
/* 容器内容水平排版 */
.flex-justifyc-between{
    justify-content: space-between;
}
.flex-justifyc-center{
    justify-content: center;
}
/* 容器内容垂直排版,仅对多行时生效*/
.flex-alignc-start{
    align-content: flex-start;
}
.flex-alignc-between{
    align-content: space-between;
}
.flex-alignc-center{
    align-content: center;
}
/* 换行 */
.flex-wrap{
    flex-wrap: wrap;
    align-content: flex-start;/* 默认是stretch则每行底下平分剩余高度空间*/
}

/* 项目s内容排版,带s代表项目s */
.flex-aligns-center{
    align-items: center;
}

/* flex项目常用类 */
/* 平均放大，平均缩小 */
.flex-auto,.flex1{
    flex:auto;/*1 1 auto*/
}
/* 不放大不缩小，超出会溢出*/
.flex-none,.flex0{
    flex:none;/*0 0 auto*/
}
/* 默认,不放大，平均缩小*/
.flex-default{
     /*放大比例*/
     flex-grow: 0;
    /*缩小比例*/
    flex-shrink: 1;
    /* 主轴空间 */
    flex-basis: auto;
}
.flex-2{
    flex:2;/*放大比例系数为2,后面缺省为1 auto*/
}
/*多交叉轴自身对齐方式*/
/* flex-start | flex-end | center | baseline | stretch */
.flex-align-self-auto{
    align-self: auto;/*默认*/
}
.flex-align-self-start{
    align-self: flex-start;
}
.flex-align-self-center{
    align-self: center;
}
.flex-align-self-end{
    align-self: flex-end;
}


/* 一行多列水平垂直居中,默认水平排版，可由flex-direction来确定排版方向*/
/* 相当于针对该行，项目内容居中 */
.flex-all-center{
    justify-content: center;
    align-items: center;
}

/* 多行多列水平居中，默认水平排版，可由flex-direction来确定排版方向 */
/* 相当于针对flex容器，容器的居中 */
.flex-alls-center{
    justify-content: center;
    align-content: center;
}

1.常见应用

1.1 多栏铺满布局:`flex:auto`

传统要实现这个，借助calc方法也能实现，但要手动计算，费劲
但对应弹性缩放则无能为力，Flex完胜

任何复杂的布局，可以拆分出垂直多栏或水平多栏
1.垂直多栏，弹性铺满
<div class="divBox flex flex-direction-column">
    <div class="divItem" ></div>
    <div class="divItem flex1" ></div>
    <div class="divItem" ></div>
</div>

2.水平多栏，弹性铺满
<div class="divBox flex">
    <div class="divItem flex1" ></div>
    <div class="divItem" ></div>
    <div class="divItem" ></div>
</div>

3.水平多栏，多栏弹性铺满
<div class="divBox flex">
    <div class="divItem flex1" ></div>
    <div class="divItem flex2" ></div>
    <div class="divItem" ></div>
</div>

1.2 该行联动布局：`justify-content属性及align-items属性及flex-direction-row`

1. 左右 或 左左右 布局，联动该行垂直居中 (非常常用)
<div class="divBox flex flex-justifyc-between flex-aligns-center">
    <!-- 左边 ，较多为image-->
    <div class="divItem flex0" ></div>
    <!-- 右边,右边也是flex布局-->
    <div class="divItem flex1 flex flex-justifyc-between flex-aligns-center" >
        <div class="divItem flex1"></div>
        <div class="divItem"></div>
    </div>
</div>

2.水平居中布局
等同于margin:0 auto
但传统布局需要items设置为inline-block，且外面包裹div设置style="margin:0 auto"。
Flex布局对于排版方向有多个项目，自动转为inline-block，Flex完胜
<div class="divBox flex flex-justifyc-center">
    <div class="divItem"></div>
</div>

3.全居中(Flex终于解决了垂直居中顽疾)
用在容器中，在容器中全居中，场景：弹窗
用在项目中，项目内容全居中，场景：高度固定的文字等居中展示（棒棒哒）
<div class="divBox flex flex-all-center" style="height:40px">
   example
</div>

4.放不下放下一行
<div class="divBox flex flex-wrap">
    <div class="divItem"></div>
    <div class="divItem"></div>
    <div class="divItem"></div>
</div>

5.一行放n个
<div class="divBox flex">
    <div class="divItem right-margin-20"></div>
    <div class="divItem right-margin-20"></div>
    <div class="divItem right-margin-20"></div>
    <div class="divItem right-margin-20"></div>
    <div class="divItem"></div>
</div>
//对应css
div{
    border: 1px solid greenyellow;
    box-sizing: border-box;
}
.divBox{
    width: 100%;
    height: 100%;
}
.divItem{
    width: calc(20% - 16px);/*重点*/
    height: 100px;
}
.right-margin-20{
    margin-right: 20px
}
6.多行排版，每行放n个
<div class="divBox flex flex-wrap">
    <div class="divItem rb-margin-20"></div>
    <div class="divItem rb-margin-20"></div>
    <div class="divItem rb-margin-20"></div>
    <div class="divItem rb-margin-20"></div>
    <div class="divItem"></div>
    <div class="divItem rb-margin-20"></div>
    <div class="divItem"></div>
</div>
//对应css
.rb-margin-20{
    margin: 0 20px 20px 0;
}

1.3 半独立流：`order及flex-direction`

对于会变动顺序的，非常棒！
对于简单的，flex-direction即可；
对于复杂的，设置order值

1.4 案例

<div class="divBox flex flex-wrap">
    <div class="divItem rb-margin-20 flex flex-all-center">1</div>
    <div class="divItem rb-margin-20 flex flex-all-center">2</div>
    <div class="divItem rb-margin-20 flex flex-all-center">3</div>
    <div class="divItem rb-margin-20 flex flex-all-center">4</div>
    <div class="divItem flex flex-all-center">5</div>
    <div class="divItem rb-margin-20 flex flex-all-center">6</div>
    <div class="divItem flex flex-all-center">7</div>
</div>

图示

三、其它常用类

/*其它布局*/
.fl{float: left;} /* float */
.fr{float: right;}  
.clear{height:0;clear:both;font-size:0}
.clearfix{*zoom:1}
.clearfix:after,.clearfix:before{display:table;content:" "}
.clearfix:after{clear:both}

.rel{position:relative;}/* 定位 */
.abs{position:absolute;}
.fixed{position: fixed;}
/* 列表 */


/*框类型*/
.dn{display:none;}
.db{display:block;}
.di{display:inline;}
.dib{-moz-inline-stack:inline-block; display:inline-block;}
.hidden{visibility:hidden;}


/* 内外边距，盒子模型*/
/* 单位根据应用场景来换 */
.mtb-20{margin-top:20px;margin-bottom: 20px;}/* 外边框 *//* 上下 */
.mtb-40{margin-top:40px;margin-bottom: 40px;}
.mt-20{margin-top:20px;}
.mt-40{margin-top:40px;}
.mb-20{margin-bottom: 20px;}
.mb-40{margin-bottom: 40px;}
.mlr-auto{margin-left: auto;margin-right: auto;}/*左右*/
.mlr-20{margin-left: 20px;margin-right: 20px;}
.mlr-20{margin-left: 20px;margin-right: 20px;}
.ml-20{margin-left: 20px;}
.ml-40{margin-left: 40px;}
.mr-20{margin-right: 20px;}
.mr-40{margin-right: 40px;}
.m-auto{margin: auto;}/*可用于绝对定位元素的水平垂直居中*//* 上下左右 */
.m-20{margin: 20px;}
.m-40{margin: 40px;}
.ml--20{ margin-left: -20px;}/* margin负数情况 */

.ptb-20{padding-top:20px;padding-bottom: 20px;}/* 内边框 *//* 上下 */
.ptb-40{padding-top:40px;padding-bottom: 40px;}
.pt-20{padding-top:20px;}
.pt-40{padding-top:40px;}
.pb-20{padding-bottom: 20px;}
.pb-40{padding-bottom: 40px;}
.plr-20{padding-left: 20px;padding-right: 20px;}/*左右*/
.plr-20{padding-left: 20px;padding-right: 20px;}
.pl-20{padding-left: 20px;}
.pl-40{padding-left: 40px;}
.pr-20{padding-right: 20px;}
.pr-40{padding-right: 40px;}
.p-20{padding: 20px;}/* 上下左右 */
.p-40{padding: 40px;}

/* 盒子模型 */
/* content-box,border-box */
/* w3c width指的是内容盒子的宽度，IE指的是到border的宽度 */
.border-box{box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */}
.content-box{box-sizing:content-box;-moz-box-sizing:content-box; /* Firefox */-webkit-box-sizing:content-box; /* Safari */}

.br-4{border-radius: 4px;}/* 圆角 */
.br-6{border-radius: 6px;}
.br-8{border-radius: 8px;}
.br-10{border-radius: 10px;}
.br-20{border-radius: 20px;}
.br-25{border-radius: 25px;}
.br-50{border-radius: 50%;}/* 针对宽高一样的，形成圆 */
/* 宽高不一样的，需要左右是半圆的，还木有想到办法写成通用类，只能手写 */


.bt-line{border-top: 1px solid grey;}/* 边框，颜色根据需求写成模板 */
.bb-line{border-bottom: 1px solid grey;}

/* 三角形，根据需求来设置模板，*/
/*类名称：b:border,11代表宽高1：1，-l:代表要left的，-active代表激活的 */
.b11-l{/*css做出的三角形*/
    --borderWidth:20px;
    --borderHeight:calc(var(--borderWidth) * 1);
    width: 0px;
    height:0px;
    border-top: var(--borderHeight) solid transparent;
    border-right:var(--borderWidth) solid transparent;
    border-left: var(--borderWidth) solid #ffff00;
    border-bottom: var(--borderHeight) solid transparent;
}
.b12-t-active{/*css做出的三角形*/
    --borderWidth:20px;
    --borderHeight:calc(var(--borderWidth) * 2);
    width: 0px;
    height:0px;
    border-top: var(--borderHeight) solid  red;
    border-right:var(--borderWidth) solid transparent;
    border-left: var(--borderWidth) solid transparent;
    border-bottom: var(--borderHeight) solid transparent;
}

.bs-1{box-shadow: 0 0 5px 1px grey;}/* 阴影 */


/*对齐*/
.tc{text-align:center;}/* 水平对齐方式 */
.tr{text-align:right;}
.tl{text-align:left;}

.vm{vertical-align:middle;}/* 行内元素在行内的垂直对齐方式 */
.vtb{vertical-align:text-bottom;}
.vt{vertical-align:top;}

/* 字体<大小，风格，粗细>*/
.fs-0{font-size:0;}/*处理，换行时占用宽高问题；其它解决途径：上个标签闭合和该文本在一行即可*/
.fs-10{font-size: 10px;}
.fs-12{font-size: 12px;}
.fs-14{font-size: 14px;}
.fs-16{font-size: 16px;}
.fs-18{font-size: 18px;}
.fs-20{font-size: 20px;}

.fi{font-style: italic;/*斜体*/}
.fo{font-style: oblique;/*倾斜*/}
.fn{font-style: normal;font-weight: normal}

.fb{font-weight: bold;}


/* 颜色 <主题色(背景色)，文本颜色，衬托色(边框/阴影)>*/
/* 能设置为类的，只有color及background颜色，其它要有颜色，可以借鉴这边颜色，保持颜色一致 */
/*背景色(看主题色)*/
/* 具体值根据自己风格设置 */
/* 深颜色使用c、f、6、9这四个字符，组合生成 RGB 色值 */
/* 淡颜色使用a、b、c、d、e、f这六个字符，组合生成 RGB 色值 */
.theme-color-page{background-color:#eee;}
.theme-color-button{background-color:#ffcc66;}

.color-2{color:#222;}/*文本颜色，2->9为显眼到不显眼*/
.color-3{color:#333;}
.color-6{color:#666;}
.color-9{color:#999;}
.color-f{color:#fff;}/*白色*/

.color-a{border-color: #aaa;}/* 衬托色 ，建议从aaa、bbb、ccc、ddd这四个色值挑选:阴影的也根据这个来写即可*/
.color-b{border-color: #bbb;}
.color-c{border-color: #ccc;}
.color-d{border-color: #ddd;}

/* 其它 */
/* 遮罩 */
.mask{z-index:999;position:fixed;position:absolute;
top:0;left:0;width:100%;height:100%;background:#000;filter:alpha(opacity=50);opacity:.5}

/* 骨架屏开始，建议每个页面写不一样的 */
.skeleton {
    background-repeat: no-repeat;
    background-image:/*这里写骨架屏的所有元素(第一个是动画)，绘制背景。底下属性，对应其大小和位置*/
        linear-gradient(to right,transparent 0%, grey 50%,transparent 100%), /* 第4层 动画 */
        radial-gradient(circle closest-side at center, white 100%, transparent), /* 第3层 头像 */
        linear-gradient(to right, white , white 100%), /* 第2层 标题 */
        linear-gradient(to right, white , white 100%), /* 第1层 标题 */
        linear-gradient(to bottom,gray 0%,gray 100%); /* 第0层 卡片背景 */
    background-size:
        20px 100%,  /* 动画 */
        32px 32px,  /* 头像 */
        200px 25px,  /* 标题 */
        250px 25px,  /* 标题 */
        100% 100%; /* 卡片背景 */
    background-position:
        -20px 0,  /* 动画 */
        24px 24px,  /* 头像 */
        24px 70px, /* 标题 */
        24px 100px, /* 标题 */
        0 0;        /* 卡片背景 */
        -webkit-animation: skeletonLoading 5s infinite;
        animation: skeletonLoading 2s infinite;
}
@-webkit-keyframes skeletonLoading {
    0% {
        background-position: 24px 0,24px 24px,24px 70px,24px 100px, 0 0;
        background-size: 20px 100%,32px 32px,0 25px,0 25px,100% 100%; 
    }
    100% {
        /*其实有两种动画，自己选择需要的一种。*/
        /* 分别是以上元素的position */
        background-position: 260px 0,24px 24px,24px 70px,24px 100px, 0 0;
        background-size: 20px 100%,32px 32px,200px 25px,250px 25px,100% 100%; 
    }
}
@keyframes skeletonLoading {
    0% {
        background-position: 24px 0,24px 24px,24px 70px,24px 100px, 0 0;
        background-size: 20px 100%,32px 32px,0 25px,0 25px,100% 100%; 
    }
    100% {
        /* 分别是以上元素的position */
        background-position: 260px 0,24px 24px,24px 70px,24px 100px, 0 0;
        background-size: 20px 100%,32px 32px,200px 25px,250px 25px,100% 100%; 
    }
}
/* 骨架屏结束 */

/* 超出省略号... */
.dots{
    display:-webkit-box;
    -webkit-line-clamp:3;/* 多行改这个数字即可*/
    overflow:hidden;/*要设置容器高度，为：line-height*-webkit-line-clamp*/
    /* 否则，虽然会出现...。但如果高度较高，底下还是会展示 */
    /*如果要文字外层使用padding，则在祖父容器设置padding，父容器设置dots*/
    text-overflow:ellipsis;
    -webkit-box-orient:vertical;
    word-break:break-all;
}

/* 动画 */
@-webkit-keyframes fadeIn{
    0%{opacity:0}
    to{opacity:1}
}
@keyframes fadeIn{
    0%{opacity:0}
    to{opacity:1}
}

常用布局【类】整理

一、Grid布局(`二维布局`)(`网格布局`)

二、Flex布局(`一维布局`)(`弹性布局`)

1.常见应用

1.1 多栏铺满布局:`flex:auto`

1.2 该行联动布局：`justify-content属性及align-items属性及flex-direction-row`

1.3 半独立流：`order及flex-direction`

1.4 案例

三、其它常用类

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端基础：H5、CSS3、JS

常用布局【类】整理

一、Grid布局(二维布局)(网格布局)

二、Flex布局(一维布局)(弹性布局)

1.常见应用

1.1 多栏铺满布局:flex:auto

1.2 该行联动布局：justify-content属性及align-items属性及flex-direction-row

1.3 半独立流：order及flex-direction

1.4 案例

三、其它常用类

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端基础：H5、CSS3、JS

一、Grid布局(`二维布局`)(`网格布局`)

二、Flex布局(`一维布局`)(`弹性布局`)

1.1 多栏铺满布局:`flex:auto`

1.2 该行联动布局：`justify-content属性及align-items属性及flex-direction-row`

1.3 半独立流：`order及flex-direction`