一、單位元素

vm 1vm 為視口的1%
vh 視口高的1%
vmin 參照長邊
vmax 參照長邊

rem 等比縮放

需要設置最外層盒子html設置vw
根字號html的--- font-- 1vm 去適配

初始化

         //初始化
        *{padding: 0;margin: 0}
        //清除列表符號
        ul{list-style: none}
        //清除超鏈接下劃線
        a{text-decoration: none}
        //清除圖片默認間隙
        img{display: block}
        //設置根字號
        html{
        font-size: 13.333vw;
        }

二、彈性容器

設置一個容器元素為彈性塊狀元素(內(nèi)部允許有彈性元素flex撐開)

display: flex;

設置容器的主軸方向

設置橫向 默認為橫向
設置為縱向
flex-direction: column;

設置彈性容器中某個屬性為彈性元素

flex: 1; 會撐滿

overflow: auto; 給當前彈性元素設置一個滾動條

設置彈性容器內(nèi)全部元素的居中方式(只是設置容器內(nèi)部元素內(nèi)部)

容器需要需要設置 display: flex;

上下居中
align-items: center; ( display: flex;)

水平居中

margin: 0 auto;(設置容器內(nèi)部元素左右外邊距自適應,萬能)

文本

text-align: center;(左left 右right) (行內(nèi)元素)

彈性容器設置元素自動換行 (ul自動換行l(wèi)i，溢出部分自動換行）

flex-wrap: wrap; (在display: flex; 容器內(nèi)設置)

三、常用屬性

浮動元素

在父框漂浮
float: right;

設置背景圖片

                 //圖片                       平鋪方式    坐標
         background: url("../static/111.jpg") no-repeat top;
         background: url("../static/111.jpg") no-repeat 20px 30px;
        //圖片大小
        background-size: 7.5rem;

邊框距離

margin 外外邊距
border 主體盒子
padding 內(nèi)邊距 可以調(diào)整容器的內(nèi)邊距來調(diào)整里面元素的距離

圓角邊框

border-radius: .15rem;
border-radius: 0 0 0 0;

邊框陰影(可以用來繪制上劃線)

rgba 相比rgb多了透明度

               上下偏移  左右偏移   偏移半徑     顏色
         box-shadow: 40px    0px     10px    rgba(0,0,0,.4);

文本陰影

text-shadow 0 0 0 0;

元素溢出隱藏(防止元素溢出父盒子)

overflow: hidden;

給容器添加背景

                 //  圖片地址            //平鋪方式   位置
          background: url("../static/111.jpg") no-repeat top;
                            //背景圖片大小
            background-size: 7.5rem 7.5rem;
                            // png圖片顏色
            background-color: #9a6e3a;

給容器加上滾動條

overflow:visible
overflow:auto (當前容器 有flex: 1;使用)

元素定位

絕對定位(相對于設置了position:relative 父盒子)
position:absolute;（需要父盒子設置position:relative ）
通過right和top等調(diào)整距離(本質(zhì)是設置border)

容器畫線

給容器頂部畫線（可以使用陰影實現(xiàn)，更自然）

border-top-style: solid; (畫直線)

border-width:1px; (直線寬度)

border-color: #23221b; (線顏色)

容器內(nèi)部文字

文字行高 (文字上下間隔)

line-hight :20px

顏色漸變(設置盒子背景顏色)

background: linear-gradient(45deg, #fa5c56, #fd625c);

元素流式布局（淘寶）

容器設置

column-gap: 1px; //列的間隔

column-count: 2; //列的個數(shù)

(容器可以設置flex:1 讓它自動變換大小)

元素設置

break-inside: avoid; (防止卡片被邊框截斷)

width:310rpx; (卡片寬高要設置)

height: 428rpx;

border-style: outset;(邊框樣式，可以不設置)

注意點:（1）在使用彈性容器要設置父級容器的大小

（2）在設置彈性容器應該初始化 html和bode大小 為 hight為100%

（3）彈性元素不擴展可能是被父級容器限制了大小

三、項目實戰(zhàn)效果

仿造攜程旅游

仿淘寶

仿QQ

到此這篇關于CSS彈性布局常用設置方式的文章就介紹到這了,更多相關CSS彈性布局內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

最新評論