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

Rocture 發(fā)布于2019-08-02 11:58 / 1466人閱讀

摘要：不推薦，特別是九宮格通過來實(shí)現(xiàn)。有一定的兼容性問題元素高度可變，需要元素內(nèi)部元素水平垂直居中主要是垂直方案通過實(shí)現(xiàn)，給最外部元素，同時(shí)添加一個(gè)次外層元素設(shè)置，這時(shí)第三層的元素即可垂直居中。

常用前端布局，CSS技巧介紹 對(duì)前端常用布局的整理總結(jié)，并對(duì)其性能優(yōu)劣，兼容等情況進(jìn)行介紹

css常用技巧之可變大小正方形的繪制

1：若通過設(shè)置width為百分比的方式，則高度不能通過百分比來控制.
在這個(gè)地方可以使用padding來實(shí)現(xiàn)，首先，元素的高度=height+padding*2+border*2;所以我們可以將widht設(shè)置為0，
然后用padding來實(shí)現(xiàn)盒子的高度(若元素padding的值是一個(gè)百分比，則是基于其父元素的寬度來計(jì)算的)

    width: 50%;
    height: 0;
    background: red;
    padding-bottom: 50%;

2:通過在元素中添加一個(gè)正方形的圖片實(shí)現(xiàn)，設(shè)置圖片寬度100%，高度auto，元素不設(shè)置高度即可。（不推薦，特別是九宮格）

3：通過vw,vh來實(shí)現(xiàn)。（有一定的兼容性問題）

元素高度可變，需要元素內(nèi)部元素水平垂直居中（主要是垂直）方案

1：通過display:table實(shí)現(xiàn)，給最外部元素display:table，同時(shí)添加一個(gè)次外層元素 
設(shè)置display:table-cell，vertical-align: middle;這時(shí)第三層的元素即可垂直居中。


    
    

    
    


.container {
    display:table;
    widht:50%;
    height:50vw;
}
.center {
    display: table-cell;
    vertical-align: middle;
}
.center > span {
    display: block;
    widht: 20px;
    height: 20px;
    background: #ff0000;
    margin: 0 auto;
}

2:通過flex布局，父元素設(shè)置為justify-content：center，align-items:center;

3:通過grid布局，父元素設(shè)置為justify-content：center，align-items:center;

4:通過position + transform（margin）實(shí)現(xiàn),如果使用margin則需要知道子元素的寬高且這個(gè)寬高不可變（這是由于magin如果設(shè)置為百分比是基于父元素的widht來計(jì)算的），
如果使用transform則沒有這個(gè)限制（transform的值是基于元素本身的widht和height來計(jì)算的），但又一點(diǎn)兼容的問題（推薦使用transform的方式）


    


.parent {
    width: 200px;
    height: 200px;
    position: relative;
    background: yellow;
}

//transform: translate(-50%, -50%);
.child {
    position: absolute;
    width: 100px;
    height: 100px;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
    background: green;
}

對(duì)于單行文本和多行文本超出部分 ...

//注意是單行文本可用

    這時(shí)一段單行文本


.text{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 200px;
}

//多行文本 需要注意盒子的高度要調(diào)整適當(dāng)，不然會(huì)出行最后一行文字只顯示一半的情況
//該方法適用于WebKit瀏覽器及移動(dòng)端

    這時(shí)一段多行文本


.text{
    height: 100px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    overflow: hidden;
}

自定義文本選擇樣式

Select some of this text.

//全局設(shè)置選中文本樣式
::selection {
    background: aquamarine;
    color: black;
}
//針對(duì)某個(gè)class設(shè)置
.custom-text-selection::selection {
    background: deeppink;
    color: white;
}

雜項(xiàng)

//文字陰影
text-shadow: 1px 1px #ad6969;

//CSS3 filter(濾鏡) 屬性
fliter: blur(50px); //設(shè)置高斯模糊 單位px 會(huì)導(dǎo)致邊緣變大
filter: grayscale(100%); //灰度100%
filter: brightness(150%) //設(shè)置亮度
filter: contrast(180%);  //設(shè)置對(duì)比度
...

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

cubic-bezier屬性 三階貝塞爾曲線 用戶控制動(dòng)畫速度
用法：transition: transform 1s cubic-bezier();

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

css變量使用

//基礎(chǔ)用法
var-dynamic
.body {
    --customize-height: 100px;
}

.var-dynamic {
     height: var(--customize-height);
}

//擴(kuò)展高級(jí) 通過js來控制css中的變量值
var-dynamic

.var-dynamic {
     height: var(--customize-height);
}



//和less sass等預(yù)處理器的變量比較

1：預(yù)處理器的變量不是實(shí)時(shí)的，在media中試圖改變變量的值是不可行的，css變量可以

2：不繼承，不級(jí)聯(lián)

查看詳情

border為1像素的邊框

//由于設(shè)備的dpr不同，我們?cè)O(shè)置的1px邊框在不能的設(shè)備中呈現(xiàn)的效果不一。
//那么通過設(shè)備dpr來設(shè)置不同的border的值不可以嗎？
//我們需要知道border-widht的最低值為1px，低于1的無效

//使用 box-shadow: 0 0 0 0.5px; 來處理
//Browser Support 95.5%

.hairline-border {
  box-shadow: 0 0 0 1px;
}
@media (min-resolution: 2dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.25px;
  }
}

對(duì)于列表元素針對(duì)某個(gè)元素的樣式做多帶帶處理（:not 選擇器）

//對(duì)每個(gè)li元素 添加右border 最后一個(gè)不加

  One
  Two
  Three
  Four


//傳統(tǒng)解決
li {
    border-right: 2px solid #d2d5e4;
}

li：last-child {
    border-right: none;
}

//簡(jiǎn)潔寫法
li:not(:last-child) {
    border-right: 2px solid #d2d5e4;
}
//關(guān)于not的其他寫法
li:not(.a) //not中放入其他選擇器

ui:hover li:not(:hover) {
  opacity: 0.5;
}

css三角形的繪制



//通過border的方式間接實(shí)現(xiàn)
.triangle {
    width: 0;
    height: 0;
    border-top: 20px solid #333;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
}

//css3 clip-path裁剪屬性
clip-path: polygon(50% 0px, 100% 100%, 0px 100%);

一個(gè)小小的loading動(dòng)畫


@keyframes donut-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.donut {
    display: inline-block;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #7983ff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: donut-spin 1.2s linear infinite;
}

css實(shí)現(xiàn)switch




.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    transition: all 0.3s;
}
.switch::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 18px;
    background-color: white;
    top: 1px;
    left: 1px;
    transition: all 0.3s;
}
input[type="checkbox"]:checked + .switch::after {
    transform: translateX(20px);
}
input[type="checkbox"]:checked + .switch {
    background-color: #7983ff;
}
.offscreen {
    position: absolute;
    left: -9999px;
}