CSS彈性布局常用設(shè)置方式

一、單位元素
vm 1vm 為視口的1%
vh 視口高的1%
vmin 參照長邊
vmax 參照長邊
rem 等比縮放
需要設(shè)置最外層盒子html設(shè)置vw
根字號html的--- font-- 1vm 去適配
初始化
//初始化 *{padding: 0;margin: 0} //清除列表符號 ul{list-style: none} //清除超鏈接下劃線 a{text-decoration: none} //清除圖片默認(rèn)間隙 img{display: block} //設(shè)置根字號 html{ font-size: 13.333vw; }
二、彈性容器
設(shè)置一個容器元素為彈性塊狀元素(內(nèi)部允許有彈性元素flex撐開)
display: flex;
設(shè)置容器的主軸方向
設(shè)置橫向 默認(rèn)為橫向
設(shè)置為縱向
flex-direction: column;
設(shè)置彈性容器中某個屬性為彈性元素
flex: 1; 會撐滿
overflow: auto; 給當(dāng)前彈性元素設(shè)置一個滾動條
設(shè)置彈性容器內(nèi)全部元素的居中方式(只是設(shè)置容器內(nèi)部元素內(nèi)部)
容器需要需要設(shè)置 display: flex;
上下居中
align-items: center; ( display: flex;)
水平居中
margin: 0 auto;(設(shè)置容器內(nèi)部元素左右外邊距自適應(yīng),萬能)
文本
text-align: center;(左left 右right) (行內(nèi)元素)
彈性容器設(shè)置元素自動換行 (ul自動換行l(wèi)i,溢出部分自動換行)
flex-wrap: wrap; (在display: flex; 容器內(nèi)設(shè)置)
三、常用屬性
浮動元素
在父框漂浮
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)邊距來調(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 (當(dāng)前容器 有flex: 1;使用)
元素定位
絕對定位(相對于設(shè)置了position:relative 父盒子)
position:absolute;(需要父盒子設(shè)置position:relative )
通過right和top等調(diào)整距離(本質(zhì)是設(shè)置border)
容器畫線
給容器頂部畫線(可以使用陰影實(shí)現(xiàn),更自然)
border-top-style: solid; (畫直線)
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; //列的個數(shù)
(容器可以設(shè)置flex:1 讓它自動變換大小)
元素設(shè)置
break-inside: avoid; (防止卡片被邊框截?cái)?
width:310rpx; (卡片寬高要設(shè)置)
height: 428rpx;
border-style: outset;(邊框樣式,可以不設(shè)置)
注意點(diǎn):(1)在使用彈性容器要設(shè)置父級容器的大小
(2)在設(shè)置彈性容器應(yīng)該初始化 html和bode大小 為 hight為100%
(3)彈性元素不擴(kuò)展可能是被父級容器限制了大小
三、項(xiàng)目實(shí)戰(zhàn)效果
仿造攜程旅游
仿淘寶
仿QQ
到此這篇關(guān)于CSS彈性布局常用設(shè)置方式的文章就介紹到這了,更多相關(guān)CSS彈性布局內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
- 本文將詳細(xì)介紹Flex布局中的換行與溢出處理方法,在實(shí)際開發(fā)中,靈活運(yùn)用這些方法,可以幫助我們更好地處理元素的布局與溢出內(nèi)容,具有一定的參考價(jià)值,感興趣的可以了解一2023-12-07
CSS 彈性布局Flex詳細(xì)講解(Flex 屬性詳解、場景分析)
Flex 是 Flexible Box 的縮寫,意為"彈性布局",用來為盒狀模型提供最大的靈活性,這篇文章主要介紹了Css 彈性布局Flex詳細(xì)介紹(Flex 屬性詳解、場景分析),需要2023-02-28CSS彈性布局FLEX,媒體查詢及移動端點(diǎn)擊事件的實(shí)現(xiàn)
這篇文章主要介紹了CSS彈性布局FLEX,媒體查詢及移動端點(diǎn)擊事件的實(shí)現(xiàn),本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-02-24- 這篇文章主要介紹了css flex 彈性布局詳解的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-02