常用前端布局,CSS技巧介紹

2021-09-13 03:00:40 字數 3180 閱讀 5260

1:若通過設定width為百分比的方式,則高度不能通過百分比來控制.

在這個地方可以使用padding來實現,首先,元素的高度=height+padding*2+border*2;所以我們可以將widht設定為0,

然後用padding來實現盒子的高度(若元素padding的值是乙個百分比,則是基於其父元素的寬度來計算的)

width: 50%;

height: 0;

background: red;

padding-bottom: 50%;

3:通過vw,vh來實現。(有一定的相容性問題)

1:通過display:table實現,給最外部元素display:table,同時新增乙個次外層元素 

設定display:table-cell,vertical-align: middle;這時第三層的元素即可垂直居中。

.container 

.center

.center > span

2:通過flex布局,父元素設定為justify-content:center,align-items:center;

3:通過grid布局,父元素設定為justify-content:center,align-items:center;

4:通過position + transform(margin)實現,如果使用margin則需要知道子元素的寬高且這個寬高不可變(這是由於magin如果設定為百分比是基於父元素的widht來計算的),

如果使用transform則沒有這個限制(transform的值是基於元素本身的widht和height來計算的),但又一點相容的問題(推薦使用transform的方式)

.parent 

//transform: translate(-50%, -50%);

.child

//注意是單行文字可用

這時一段單行文字

.text

//多行文字 需要注意盒子的高度要調整適當,不然會出行最後一行文字只顯示一半的情況

//該方法適用於webkit瀏覽器及移動端

這時一段多行文字

.text

select some of this text.

//全域性設定選中文字樣式

::selection

//針對某個class設定

.custom-text-selection::selection

//文字陰影

text-shadow: 1px 1px #ad6969;

//css3 filter(濾鏡) 屬性

fliter: blur(50px); //設定高斯模糊 單位px 會導致邊緣變大

filter: grayscale(100%); //灰度100%

filter: brightness(150%) //設定亮度

filter: contrast(180%); //設定對比度

...clip: rect(0,0,0,0) //元素剪下(只在定位元素中生效)

cubic-bezier屬性 三階貝塞爾曲線 使用者控制動畫速度

用法:transition: transform 1s cubic-bezier();

user-select: none; //文字不能選擇

//基礎用法

var-dynamic

.body

.var-dynamic

//擴充套件高階 通過js來控制css中的變數值

var-dynamic

.var-dynamic //和less sass等預處理器的變數比較

1:預處理器的變數不是實時的,在media中試圖改變變數的值是不可行的,css變數可以

2:不繼承,不級聯

//由於裝置的dpr不同,我們設定的1px邊框在不能的裝置中呈現的效果不一。

//那麼通過裝置dpr來設定不同的border的值不可以嗎?

//我們需要知道border-widht的最低值為1px,低於1的無效

//使用 box-shadow: 0 0 0 0.5px; 來處理

//browser support 95.5%

.hairline-border

@media (min-resolution: 2***x)

}@media (min-resolution: 3***x)

}@media (min-resolution: 4***x)

}

//對每個li元素 新增右border 最後乙個不加

//傳統解決

li li:last-child

//簡潔寫法

li:not(:last-child)

//關於not的其他寫法

li:not(.a) //not中放入其他選擇器

ui:hover li:not(:hover)

//通過border的方式間接實現

.********

//css3 clip-path裁剪屬性

clip-path: polygon(50% 0px, 100% 100%, 0px 100%);

@keyframes donut-spin 

100%

}.donut

.switch 

.switch::after

input[type='checkbox']:checked + .switch::after

input[type='checkbox']:checked + .switch

.offscreen

常用前端布局,CSS技巧介紹

1 若通過設定width為百分比的方式,則高度不能通過百分比來控制.在這個地方可以使用padding來實現,首先,元素的高度 height padding 2 border 2 所以我們可以將widht設定為0,然後用padding來實現盒子的高度 若元素padding的值是乙個百分比,則是基於其父...

前端開發常用css居中布局

在前端開發中,經常會碰到布局需要左右居中,上下居中的情況,在現代瀏覽器中實現居中還是挺方便的,本文只考慮在高版本現代瀏覽器中的情況,不考慮ie.這是常用的水平居中,按鈕,文字等行內元素的方法,但不能上下居中 abcedd 實現效果 此方法也只能實現水平居中,具體用法為 margin 0 auto.s...

CSS布局技巧

兩欄布局 左邊寬度固定,浮動。右邊設定margin left,寬度自適應。反之,亦可。例子 左邊 右邊 三欄布局 兩側浮動且寬度固定,左邊left浮動,右邊right浮動,中間設定margin left和margin right寬度自適應。注意,書寫順序是左右中。例子 左邊 右邊 中間 水平居中 方...