整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          CSS3實現瀑布流布局(display: flex/column-count/display: grid)

          擊右上方紅色按鈕關注“web秀”,讓你真正秀起來

          前言

          在css3到來之前,都是用js來操作dom元素,計算位置,大小,形成瀑布流布局。但是有了css3之后,一切實現起來就太簡單了,沒有復雜的邏輯,輕松的幾行樣式代碼就可以搞定。

          回顧以前(js瀑布流)

          基于waterfall.js(11.8kb),還得寫入基礎的樣式,初始化等等,對比其他js,已經是很簡單了。

          var waterfall = new WaterFall({ 
           container: '#waterfall', 
           pins: ".pin", 
           loader: '#loader', 
           gapHeight: 20, 
           gapWidth: 20, 
           pinWidth: 216, 
           threshold: 100 
          });
          

          但是,有了css3,再簡潔的js,都比不過簡單的css代碼。

          display: flex

          關鍵點,橫向 flex 布局嵌套多列縱向 flex 布局,使用了 vw 進行自適應縮放

          // pug 模板引擎
          div.g-container
           -for(var i = 0; i<4; i++)
           div.g-queue
           -for(var j = 0; j<8; j++)
           div.g-item
          

          不熟悉pug模板(jade)的,可以先去了解一下。其實看大致也就懂了,就是循環多個元素,沒有復雜的邏輯。

          $lineCount: 4;
          $count: 8;
          // 隨機數(瀑布流某塊的高度)
          @function randomNum($max, $min: 0, $u: 1) {
           @return ($min + random($max)) * $u;
          }
          // 隨機顏色值
          @function randomColor() {
           @return rgb(randomNum(255), randomNum(255), randomNum(255));
          }
          .g-container {
           display: flex;
           flex-direction: row;
           justify-content: space-between;
           overflow: hidden;
          }
          .g-queue {
           display: flex;
           flex-direction: column;
           flex-basis: 24%;
          }
          .g-item {
           position: relative;
           width: 100%;
           margin: 2.5% 0;
          }
          @for $i from 1 to $lineCount+1 {
           .g-queue:nth-child(#{$i}) {
           @for $j from 1 to $count+1 {
           .g-item:nth-child(#{$j}) {
           height: #{randomNum(300, 50)}px;
           background: randomColor();
           // 瀑布流某塊中間的數字
           &::after {
           content: "#{$j}";
           position: absolute;
           color: #fff;
           font-size: 24px;
           // 水平垂直居中
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           }
           }
           }
           }
          }
          

          預覽:

          CSS 實現瀑布流布局(display: flex)

          演示地址: 點擊文章結尾“了解更多”

          column-count

          關鍵點, column-count: 元素內容將被劃分的最佳列數 break-inside: 避免在元素內部插入分頁符

          // pug 模板引擎
          div.g-container
           -for(var j = 0; j<32; j++)
           div.g-item
          

          column-count 看起來比display: flex更科學,模板不需要2層循環,更簡潔明了。如果真正用到數據上面,會更好處理。

          $count: 32;
          // 隨機數(瀑布流某塊的高度)
          @function randomNum($max, $min: 0, $u: 1) {
           @return ($min + random($max)) * $u;
          }
          // 隨機顏色值
          @function randomColor() {
           @return rgb(randomNum(255), randomNum(255), randomNum(255));
          }
          .g-container {
           column-count: 4;
           column-gap: .5vw;
           padding-top: .5vw;
          }
          .g-item {
           position: relative;
           width: 24vw;
           margin-bottom: 1vw;
           break-inside: avoid;
          }
          @for $i from 1 to $count+1 {
           .g-item:nth-child(#{$i}) {
           height: #{randomNum(300, 50)}px;
           background: randomColor();
           &::after {
           content: "#{$i}";
           position: absolute;
           color: #fff;
           font-size: 2vw;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           }
           }
          }
          

          預覽:

          CSS 實現瀑布流布局(column-count)

          演示地址: 點擊文章結尾“了解更多”

          display: grid

          關鍵點, 使用 grid-template-columns、grid-template-rows 分割行列 使用 grid-row 控制每個 item 的所占格子的大小

          // pug 模板引擎
          div.g-container
           -for(var i = 0; i<8; i++)
           div.g-item
          

          樣式

          $count: 8;
          // 隨機數(瀑布流某塊的高度)
          @function randomNum($max, $min: 0, $u: 1) {
           @return ($min + random($max)) * $u;
          }
          // 隨機顏色值
          @function randomColor() {
           @return rgb(randomNum(255), randomNum(255), randomNum(255));
          }
          .g-container {
           height: 100vh;
           display: grid;
           grid-template-columns: repeat(4, 1fr);
           grid-template-rows: repeat(8, 1fr);
          }
          @for $i from 1 to $count+1 {
           .g-item:nth-child(#{$i}) {
           position: relative;
           background: randomColor();
           margin: 0.5vw;
           &::after {
           content: "#{$i}";
           position: absolute;
           color: #fff;
           font-size: 2vw;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           }
           }
          }
          .g-item {
           &:nth-child(1) {
           grid-column: 1;
           grid-row: 1 / 3;
           }
           &:nth-child(2) {
           grid-column: 2;
           grid-row: 1 / 4;
           }
           &:nth-child(3) {
           grid-column: 3;
           grid-row: 1 / 5;
           }
           &:nth-child(4) {
           grid-column: 4;
           grid-row: 1 / 6;
           }
           &:nth-child(5) {
           grid-column: 1;
           grid-row: 3 / 9;
           }
           &:nth-child(6) {
           grid-column: 2;
           grid-row: 4 / 9;
           }
           &:nth-child(7) {
           grid-column: 3;
           grid-row: 5 / 9;
           }
           &:nth-child(8) {
           grid-column: 4;
           grid-row: 6 / 9;
           }
          }
          

          display: grid樣式上面感覺也不好用,需要書寫很多grid-column、grid-row。

          預覽:

          CSS 實現瀑布流布局(display: grid)

          演示地址: 點擊文章結尾“了解更多”

          總結

          通過,這3種CSS瀑布流布局,你更喜歡哪一種呢?

          個人更喜歡column-count,看起來更加清晰,容易理解,代碼量也很少。

          公告

          喜歡小編的點擊關注,了解更多知識!

          源碼地址請點擊下方“了解更多”

          由于漢字的特殊性,在css網頁布局中,中文排版有別于英文排版。排版是一個麻煩的問題,小編認為,作為一個優秀的網頁設計師和網頁制作人員,掌握一些簡單的中文排版技巧是不可或缺的,所以今天特意總結了幾個簡單實用的技巧,希望對大家有所幫助。

          Web前端教程

            一、如何設定文字字體、顏色、大小等

            font-style設定斜體,比如font-style:italic

            font-weight設定文字粗細,比如font-weight:bold

            font-size設定文字大小,比如font-size:12px

            line-height設定行距,比如line-height:150%

            color設定文字顏色,注意不是font-color喔,比如color:red

            font-family設定字體,比如font-family:"LucidaGrande",Verdana,Lucida,Arial,Helvetica,宋體,sans-serif

            二、使用margin,text-align 控制段落

            中文段落使用p標簽,左右、段前段后的空白,都可以通過margin來控制。

            比如

            p{

            margin:18px 6px 6px 18px;/*分別是上、右、下、左,十二點開始的順時針方向*/

            }

            而text-align則用于文字的對齊方式。

            比如

            p{

            text-align:center;/*居中對齊*/

            }

            除了居中對齊之外,對齊方式還有左對齊、右對齊和兩端對齊,對應的屬性值分別為left、right、justify。

            提示:由于默認的margin值會導致頁面排版出現問題,特別是ul、ol、p、dt、dd等標簽。小編的解決之道就是把所有標簽的margin值定義為0。

            三、豎排文字—使用writing-mode

            writing-mode屬性有兩個值lr-tb和tb-rl,前者是默認的左-右、上-下,后者是上-下、右-左。

            寫法如

            p{

            writing-mode:tb-rl;

            }

            四、使用list-style美化列表

            如果我們的排版涉及到列表,不妨考慮為它添加些項目符號進行美化。

          在CSS里,項目符號包括disc(實心圓點)、circle(空心圓圈)、square(實心方塊)、decimal(阿拉伯數字)、lower-roman(小寫羅馬數字)、upper-roman(大寫羅馬數字)、lower-alpha(小寫英文字母)、upper-alpha(大寫英文字母)、none(無)。

            嘿嘿!我們可用的項目符號數量不少喔,但美中不足的是我們不能為它們設定大小,也不能設定垂直方向上的對齊。

            如果我們想設定一個列表的項目符號為方塊,可以這樣寫:

            li{

            list-style:square;

            }

            小編在這里提醒大家一下:當一個項目列表的左外邊距設為零的時候,list-style-position:outside的項目符號不會顯示。

            五、使用text-overflow 實現固定寬度漢字截斷

            用后臺語言可以對從數據庫里的字段內容做截斷處理,如果想對列表應用該樣式,我們可以這樣寫:

            li{

            overflow:hidden;

            text-overflow:ellipsis;

            white-space:nowrap;

            }

            六、首字下沉

            如果你想制作首字下沉效果,不妨考慮偽對象:first-letter并配合font-size、float屬性。

            p:first-letter{

            padding:6px;

            font-size:32pt;

            float:left;

            }

            七、首行縮進—使用text-indent

            text-indent可以使得容器內首行縮進一定單位。比如中文段落一般每段前空兩個漢字。

          可以這么寫

            p{

            text-indent:2em;/*em是相對單位,2em即現在一個字大小的兩倍*/

            }

            注意:如果font-size是12px的話,那么text-indent:2em則代表縮進24px。

            八、固定寬度漢字(詞)折行—使用word-break

            在排版的時候,你是否為一個詞組,其中一個字出現在上面而另一個字折斷到下一行去而發愁呢?不用愁,這時使用word-break就可以輕松解決問題了。

            九、關于漢字注音—使用ruby標簽和ruby-align屬性

            最后小編向大家介紹一下ruby標簽和ruby-align屬性 。這是一個比較冷門的技巧,可能平時使用不多,但小編覺得不妨提供給大家預防不時之需。

            如果我們想為漢字注音就可以這樣寫

            <ruby>注音<rt style="font-size:11px;">zhuyin</rt></ruby>

            然后通過ruby-align設置其對齊方式。

          以上就是今日整理的“Web前端教程:簡單實用的CSS網頁布局中文排版技巧”一文,希望為正在學習Web前端的同學提供參考。你記住并理解了嗎?以后酷仔每日均會提供MySQL、Python及Web相關的教程及習題,趕快學習起來吧。


          .單列布局

          1.1 水平居中

          父元素 text-align:center;子元素:inline-block;

          • 優點:兼容性好;
          • 不足:需要同時設置子元素和父元素
          <divclass="parent">
          <divclass="child"></div>
          </div>


          .parent{
          width: 500px;
          height: 200px;
          background: red;
          text-align: center;
          }
          .child{
          display: inline-block;
          width: 300px;
          height: 100px;
          background: blue;
          }

          子元素 margin:0 auto;

          • 優點:兼容性好
          • 缺點:需要指定寬度
          <divclass="parent">
          <divclass="child"></div>
          </div>


          .parent{width: 500px;
          height: 400px;
          background: red;
          }
          .child{margin: 0 auto;
          width: 300px;
          height: 100px
          ;background: blue;
          }

          父元素:relative;子元素:absolute;left:50%;margin-left:-寬度的一半

          • 優點:兼容性好
          • 缺點:需要知道元素的寬度
          <div class="parent">
            <div class="child"></div>
          </div>


           .parent {
            position: relative;
            top: 0;
            left: 0;
            width: 500px;
            height: 400px;
            background: red;
          }
          .child {
            position: absolute;
            top: 0;
            left: 50%;
            margin-left: -150px;
            width: 300px;
            height: 100px;
            background: blue;
          }

          父元素:relative;子元素:absolute;left:50%;transform:translate(-50%,0);

          • 優點:不需要知道子元素的寬度
          • 缺點:兼容性差 (新時代的你們,現在新的瀏覽器支持了,放心用了)
          <divclass="parent">
          <divclass="child"></div>
          </div>


          .parent {
            position: relative;
            top: 0;
            left: 0;
            width: 500px;
            height: 400px;
            background: red;
          }
          .child {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, 0);
            width: 300px;
            height: 100px;
            background: blue;
          }

          彈性盒子:父元素:display:flex;justify-content:center;

          • 優點:簡單
          • 缺點:兼容性差 (新時代的你們,現在新的瀏覽器支持了,放心用了)
          <divclass="parent">
          <divclass="child"></div>
          </div>


          .parent {
            display: flex;
            justify-content: center;
            width: 500px;
            height: 400px;
            background: red;
          }
          .child {
            width: 300px;
            height: 100px;
            background: blue;
          }

          1.2 垂直居中

          vertical-align:center;

          <divclass="parent">
          <divclass="child"></div>
          </div>


          .parent {
            width: 500px;
            height: 400px;
            background: red;
            display: table-cell;
            vertical-align: middle;
          }
          .child {
            width: 300px;
            height: 100px;
            background: blue;
          }

          line-height

          <divclass="parent">
          <divclass="child">
          </div></div>


          .parent {
            width: 500px;
            height: 400px;
            background: red;
            line-height: 400px;
          }
          .child {
            width: 300px;
            height: 100px;
            background: blue;
            display: inline-block;
            vertical-align: middle;
          }

          父元素:position:relative;子元素:positon:absolute;top:50%;transform:translate(0,-50%);

          <divclass="parent">
          <divclass="child"></div>
          </div>


          .parent {
            position: relative;
            top: 0;
            left: 0;
            width: 500px;
            height: 400px;
            background: red;
          }
          .child {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(0, -50%);
            width: 300px;
            height: 100px;
            background: blue;
          }

          父元素:position:relative;子元素:positon:absolute;top:50%;margin-top:-子元素高度的一半;

          <divclass="parent">
          <divclass="child"></div>
          </div>


          .parent {
            position: relative;
            top: 0;
            left: 0;
            width: 500px;
            height: 400px;
            background: red;
          }
          .child {
            position: absolute;
            top: 50%;
            left: 0;
            margin-top: -50px;
            width: 300px;
            height: 100px;
            background: blue;
          }

          父元素:display:flex;align-items:center;

          <divclass="parent">
          <divclass="child"></div>
          </div>


          .parent {
            width: 500px;
            height: 400px;
            background: red;
            display: flex;
            align-items: center;
          }
          .child {
            width: 300px;
            height: 100px;
            background: blue;
          }

          1.3 水平垂直居中

          父元素:display:table-cell;vertical-align:middle;text-align:center;子元素;display:inline-block;

          <divclass="parent">
          <divclass="child"></div>
          </div>


          .parent {
            width: 500px;
            height: 400px;
            background: red;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
          }
          .child {
            width: 300px;
            height: 100px;
            background: blue;
            display: inline-block;
          }

          父元素:position:relative;子元素:position:absolute?50%;left:50%;margin-left:寬度的一半;margin-top:高度的一半;或者 transform:translate(-50%,-50%);

          <divclass="parent">
          <divclass="child"></div>
          </div>


          .parent {
            width: 500px;
            height: 400px;
            background: red;
            position: relative;
            left: 0;
            right: 0;
          }
          .child {
            width: 300px;
            height: 100px;
            background: blue;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }

          父元素{display:flex;justify-content:center;align-items:center;}

          <divclass="parent">
          <divclass="child"></div>
          </div>


          .parent {
            width: 500px;
            height: 400px;
            background: red;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .child {
            width: 300px;
            height: 100px;
            background: blue;
          }

          2.多列布局

          2.1 左側定寬,右側自適應

          left{float:left;width:100px;} .right{margin-left:100px;}

          <div class="left">left</div>
          <div class="right">right</div>


          * {
            margin: 0;
            padding: 0;
          }
          .left {
            height: 400px;
            width: 300px;
            background: red;
            float: left;
          }
          .right {
            height: 400px;
            margin-left: 300px;
            background: blue;
          }

          <div class="parent">
            <div class="left">
              left
            </div>
            <div class="right-fix">
              <div class="right">
                right
              </div>
            </div>
          </div>


          * {
            margin: 0;
            padding: 0;
          }
          .left {
            width: 300px;
            height: 400px;
            float: left;
            background: red;
          }
          .right-fix {
            width: 100%;
            margin-left: -300px;
            float: right;
          }
          .right {
            margin-left: 300px;
            height: 400px;
            background: blue;
          }

          .left{width:寬度值;float:left;} .right{overflow:hidden;}

          <divclass="parent">
          <divclass="left">   
            left   
          </div><divclass="right">   
            right   
          </div>
          </div>


          /*設置overflow:hidden;創建BFC。根據BFC特性,BFC不會與float box 重疊。*/
          
          * {
            margin: 0;
            padding: 0;
          }
          .left {
            width: 300px;
            height: 400px;
            float: left;
            background: red;
          }
          .right {
            height: 400px;
            background: blue;
            overflow: hidden;
          }

          table 實現

          <div class="parent">
            <div class="left">
              left
            </div>
            <div class="right">
              right
            </div>
          </div>


          * {
            margin: 0;
            padding: 0;
          }
          .parent {
            display: table;
            table-layout: fixed;
            width: 100%;
          }
          .left {
            width: 300px;
            height: 400px;
            background: red;
            display: table-cell;
          }
          .right {
            height: 400px;
            background: blue;
            display: table-cell;
          }

          flex 實現

          <div class="parent">
            <div class="left">
              left
            </div>
            <div class="right">
              right
            </div>
          </div>


          * {
            margin: 0;
            padding: 0;
          }
          .parent {
            display: flex;
            width: 100%;
          }
          .left {
            width: 300px;
            height: 400px;
            background: red;
          }
          .right {
            height: 400px;
            background: blue;
            flex: 1;
          }

          2.2 右側定寬左側自適應

          float margin 實現

          <div class="parent">
            <div class="left">
              left
            </div>
            <div class="right">
              right
            </div>
          </div>


          * {
            margin: 0;
            padding: 0;
          }
          .left {
            width: 100%;
            height: 400px;
            background: red;
            float: left;
            margin-right: -300px;
          }
          .right {
            height: 400px;
            background: blue;
            width: 300px;
            float: right;
          }

          table 實現

          <div class="parent">
            <div class="left">
              left
            </div>
            <div class="right">
              right
            </div>
          </div>


          * {
            margin: 0;
            padding: 0;
          }
          .parent {
            width: 100%;
            display: table;
            table-layout: fixed;
          }
          .left {
            width: 100%;
            height: 400px;
            background: red;
            display: table-cell;
          }
          .right {
            height: 400px;
            background: blue;
            width: 300px;
            display: table-cell;
          }

          flex 實現

          <div class="parent">
            <div class="left">
              left
            </div>
            <div class="right">
              right
            </div>
          </div>


          * {
            margin: 0;
            padding: 0;
          }
          .parent {
            width: 100%;
            display: flex;
          }
          .left {
            flex: 1;
            background: red;
            display: table-cell;
          }
          .right {
            height: 400px;
            background: blue;
            width: 300px;
          }

          2.3 左邊兩列定寬,右側自適應

          float margin 實現

          <div class="parent">
            <div class="left">
              left
            </div>
            <div class="center">
              center
            </div>
            <div class="right">
              right
            </div>
          </div>


          * {
            margin: 0;
            padding: 0;
          }
          .parent {
            width: 100%;
          }
          .left,
          .center {
            background: red;
            float: left;
            width: 300px;
            height: 400px;
          }
          .center {
            background: yellow;
          }
          .right {
            height: 400px;
            background: blue;
            margin-left: 600px;
          }

          float overflow 實現

          <div class="parent">
            <div class="left">
              left
            </div>
            <div class="center">
              center
            </div>
            <div class="right">
              right
            </div>
          </div>


          * {
            margin: 0;
            padding: 0;
          }
          .parent {
            width: 100%;
          }
          .left,
          .center {
            background: red;
            float: left;
            width: 300px;
            height: 400px;
          }
          .center {
            background: yellow;
          }
          .right {
            height: 400px;
            background: blue;
            overflow: hidden;
          }

          table 實現

          <div class="parent">
            <div class="left">
              left
            </div>
            <div class="center">
              center
            </div>
            <div class="right">
              right
            </div>
          </div>


          *{

          margin: 0;

          padding: 0;

          }

          .parent{

          width: 100%;

          display: table;

          table-layout: fixed;

          }

          .left,

          .center{

          background: red;

          display: table-cell;

          width: 300px;

          height: 400px;

          }

          .center{

          background: yellow;

          }.right{

          height: 400px;

          background: blue;

          display: table-cell;

          }

          想要更多關于前端培訓學習資料,可以關注“廣州藍景”微信公眾號,進行詳細的了解。


          主站蜘蛛池模板: 无码精品久久一区二区三区 | 中文字幕乱码人妻一区二区三区| 国产AV午夜精品一区二区三| 亚洲综合av一区二区三区 | 无码夜色一区二区三区| 国产a∨精品一区二区三区不卡| 鲁大师成人一区二区三区| 国内精品视频一区二区三区八戒| 青青青国产精品一区二区| 国产午夜福利精品一区二区三区 | 亚洲欧美日韩一区二区三区| 性色AV一区二区三区| 亚洲日韩精品一区二区三区无码 | 国产一区二区精品久久91| 女同一区二区在线观看| 亚洲丶国产丶欧美一区二区三区 | 国产精品区一区二区三| 性盈盈影院免费视频观看在线一区 | 午夜福利国产一区二区| 国产一区二区精品久久岳√| 国产精品一区二区久久沈樵| 国产精品亚洲一区二区三区在线观看 | 熟妇人妻AV无码一区二区三区| 国产高清视频一区三区| 国产av一区二区三区日韩| 国产伦精品一区二区三区不卡| 亚洲熟妇成人精品一区| 一区视频免费观看| 久久精品国产一区二区三区| 无人码一区二区三区视频| 国产精品区一区二区三在线播放| 久久无码人妻一区二区三区 | 亚洲熟妇无码一区二区三区导航| 亚洲国产精品一区二区久久| 欧美日韩国产免费一区二区三区| 自慰无码一区二区三区| 国产激情一区二区三区小说| 国产在线一区二区视频| 中文字幕Av一区乱码| 亚洲国产一区在线| 亚洲性色精品一区二区在线|