經常使用前端佈局，CSS技巧介紹

時間  2019-12-04
標籤 經常 使用 前端 佈局 css 技巧 介紹 欄目 CSS 简体版
原文   原文鏈接

前端經常使用佈局，CSS技巧介紹

對前端經常使用佈局的整理總結，並對其性能優劣，兼容等狀況進行介紹

timg.jpg

css經常使用技巧之可變大小正方形的繪製

1：若經過設置width爲百分比的方式，則高度不能經過百分比來控制.在這個地方可使用padding來實現，首先，元素的高度=height+padding2+border2; 因此咱們能夠將widht設置爲0，而後用padding來實現盒子的高度(若元素padding的值是一個百分比，則是基於其父元素的寬度來計算的)javascript

<div class="container">
        <div class="box"></div>
    </div>

    .container {
        width: 50%;
        margin: 0 auto;
        background: yellow;
    }

    .box {
        width: 50%;
        height: 0;
        background: red;
        padding-bottom: 50%;
        margin: 0 auto;
    }
複製代碼

square.gif

2:經過在元素中添加一個正方形的圖片實現，設置圖片寬度100%，高度auto，元素不設置高度便可。（不推薦，特別是九宮格）css

3：經過vw,vh來實現。（有必定的兼容性問題）html

<div class="container">
        <div class="box"></div>
    </div>

    .container {
        width: 50%;
        margin: 0 auto;
        background: yellow;
    }

    .box {
        width: 30vw;
	height: 30vw;
    }
複製代碼

元素高度可變，須要元素內部元素水平垂直居中（主要是垂直）方案

1：經過display:table實現，給最外部元素display:table，同時添加一個次外層元素,設置display:table-cell，vertical-align: middle;這時第三層的元素便可垂直居中。前端

<div class="container">
        <div class="box">
            <span></span>
        </div>
    </div>

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

複製代碼

square.gif

2:經過flex佈局，容器元素設置爲justify-content：center，align-items:center;java

3:經過grid佈局，容器元素設置爲justify-content：center，align-items:center;css3

4:經過position + transform（margin）實現,若是使用margin則須要知道子元素的寬高且這個寬高不可變（這是因爲magin若是設置爲百分比是基於父元素的widht來計算的），若是使用transform則沒有這個限制（transform的值是基於元素自己的widht和height來計算的），但又一點兼容的問題（推薦使用transform的方式）web

<div class="container">
        <div class="box">
        </div>
    </div>

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

複製代碼

對於單行文本和多行文本超出部分 ...

//多行文本 須要注意盒子的高度要調整適當，否則會出行最後一行文字只顯示一半的狀況
//該方法適用於WebKit瀏覽器及移動端
    <div class="container">
        single line : <p class="single-line-text">...</p>
        multi line : <p class="multi-line-text">...</p>
    </div>

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

    .multi-line-text{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-height: 20px;
        width: 200px;
        height: 40px;
        overflow: hidden;
        background: red;
    }
複製代碼

image.png

自定義文本選擇樣式

<p class="custom-text-selection">Select some of this text.</p>

//全局設置選中文本樣式
::selection {
    background: aquamarine;
    color: black;
}
//針對某個class設置
.custom-text-selection::selection {
    background: deeppink;
    color: white;
}
複製代碼

image.png

雜項

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

//CSS3 filter(濾鏡) 屬性
filter: 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; //文本不能選擇
複製代碼

image.png

css變量使用

//基礎用法
<p class="var-dynamic">var-dynamic</p>
.body {
    --customize-height: 100px;
}

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

//擴展高級 經過js來控制css中的變量值
<p class="var-dynamic">var-dynamic</p>

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

<script>
    var varDynamic  = document.querySelect(".var-dynamic");
    el.style.setProperty('--customize-height', 200 + 'px')
</script>

//和less sass等預處理器的變量比較

1：預處理器的變量不是實時的，在media中試圖改變變量的值是不可行的，css變量能夠

2：不繼承，不級聯

複製代碼

查看詳情瀏覽器

border爲1像素的邊框

//因爲設備的dpr不一樣，咱們設置的1px邊框在不能的設備中呈現的效果不一。
//那麼經過設備dpr來設置不一樣的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;
  }
}

複製代碼

對於列表元素針對某個元素的樣式作單獨處理（:not 選擇器）

//對每一個li元素 添加右border 最後一個不加
<ul class="css-not-selector-shortcut">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

//傳統解決
li {
    border-right: 2px solid #d2d5e4;
}

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

//簡潔寫法
li:not(:last-child) {
    border-right: 2px solid #d2d5e4;
}
//關於not的其餘寫法
li:not(.a) //not中放入其餘選擇器

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

複製代碼

css三角形的繪製

<div class="triangle"></div>

//經過border的方式間接實現
.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%);
複製代碼

一個小小的loading動畫

<div class="donut"></div>
@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;
}

複製代碼

loading.gif

css實現switch

<input type="checkbox" id="toggle" class="offscreen" />
<label for="toggle" class="switch"></label>

.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;
}
複製代碼

switch.gif
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程