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

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技巧介紹

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

前端開發常用css居中布局

CSS布局技巧

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

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

前端開發常用css居中布局

CSS布局技巧

相關推薦