一、單位元素

vm 1vm 為視口的1%
vh 視口高的1%
vmin 參照長(zhǎng)邊
vmax 參照長(zhǎng)邊

rem 等比縮放

需要設(shè)置最外層盒子html設(shè)置vw
根字號(hào)html的--- font-- 1vm 去適配

初始化

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

二、彈性容器

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

display: flex;

設(shè)置容器的主軸方向

設(shè)置橫向 默認(rèn)為橫向
設(shè)置為縱向
flex-direction: column;

設(shè)置彈性容器中某個(gè)屬性為彈性元素

flex: 1; 會(huì)撐滿

overflow: auto; 給當(dāng)前彈性元素設(shè)置一個(gè)滾動(dòng)條

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

容器需要需要設(shè)置 display: flex;

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

水平居中

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

文本

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

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

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

三、常用屬性

浮動(dòng)元素

在父框漂浮
float: right;

設(shè)置背景圖片

                 //圖片                       平鋪方式    坐標(biāo)
         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)邊距來(lái)調(diào)整里面元素的距離

圓角邊框

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

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

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;

給容器加上滾動(dòng)條

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

元素定位

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

容器畫(huà)線

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

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

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

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

容器內(nèi)部文字

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

line-hight :20px

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

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

元素流式布局（淘寶）

容器設(shè)置

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

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

(容器可以設(shè)置flex:1 讓它自動(dòng)變換大小)

元素設(shè)置

break-inside: avoid; (防止卡片被邊框截?cái)?

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

height: 428rpx;

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

注意點(diǎn):（1）在使用彈性容器要設(shè)置父級(jí)容器的大小

（2）在設(shè)置彈性容器應(yīng)該初始化 html和bode大小 為 hight為100%

（3）彈性元素不擴(kuò)展可能是被父級(jí)容器限制了大小

三、項(xiàng)目實(shí)戰(zhàn)效果

仿造攜程旅游

仿淘寶

仿QQ

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

最新評(píng)論