css必備知識點

水果哥發表於2019-03-06
CSS

一、在一個div中實現未知圖片上下左右居中

<body>
    <style>
        .outer {
            position: relative;
            width: 600px;
            height: 600px;
            background: red;
        }
        .innerImg {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
    <div class="outer">
        <img class="innerImg" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551859237655&di=070c00eb8908bdecc2b10b67400a7723&imgtype=0&src=http%3A%2F%2Fwx1.sinaimg.cn%2Forj360%2Fda30383dgy1fue1s8rswsj20et0dugw5.jpg" alt="">
    </div>
</body>
複製程式碼

效果如下：

css必備知識點

二、使用display:table-cell和水平居中、垂直居中來實現圖片居中

<body>
    <style>
        .outer {
            display: table-cell;
            width: 600px;
            height: 600px;
            margin: 0 auto;
            text-align: center;
            vertical-align: middle;
            background: rebeccapurple;
        }
        img{
            vertical-align:middle;
        }
    </style>
    <div class="outer">
        <img class="innerImg" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551859237655&di=070c00eb8908bdecc2b10b67400a7723&imgtype=0&src=http%3A%2F%2Fwx1.sinaimg.cn%2Forj360%2Fda30383dgy1fue1s8rswsj20et0dugw5.jpg" alt="">
    </div>
</body>
複製程式碼

css必備知識點

三、使用flex佈局

<body>
    <style>
        .outer {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 600px;
            height: 600px;
            background: rebeccapurple;
        }
    </style>
    <div class="outer">
        <img class="innerImg" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551859237655&di=070c00eb8908bdecc2b10b67400a7723&imgtype=0&src=http%3A%2F%2Fwx1.sinaimg.cn%2Forj360%2Fda30383dgy1fue1s8rswsj20et0dugw5.jpg" alt="">
    </div>
</body>
複製程式碼

效果與上圖相同

四、多行文字垂直居中

<body>
    <style>
        .outer {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 600px;
            height: 600px;
            background: pink;
        }
        p {
            width: 300px;
        }
    </style>
    <div class="outer">
      <p>豫章故郡，洪都新府。星分翼軫，地接衡廬。襟三江而帶五湖，控蠻荊而引甌越。物華天寶，龍光射牛鬥之墟；人傑地靈，徐孺下陳蕃之榻。雄州霧列，俊採星馳。臺隍枕夷夏之交，賓主盡東南之美。都督閻公之雅望，棨戟遙臨；宇文新州之懿範，襜帷暫駐。十旬休假，勝友如雲；千里逢迎，高朋滿座。騰蛟起鳳，孟學士之詞宗；紫電青霜，王將軍之武庫。家君作宰，路出名區；童子何知，躬逢勝餞。</p>
    </div>
</body>
複製程式碼

效果圖：

css必備知識點

五、已知寬高的上下左右居中

<body>
    <style>
        .outer {
            position: relative;
            width: 600px;
            height: 600px;
            background: rebeccapurple;
        }
        .inner {
            position: relative;
            width: 200px;
            height: 300px;
            left: 50%;
            top: 50%;
            margin-left: -100px; // 或 transform: translateX(-50%)
            margin-top: -150px; // 或 transform: translateY(-50%)
            background: white;
        }
    </style>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
複製程式碼

效果如下：

css必備知識點

六、省略號

單行文字省略號，部分瀏覽器需要加width屬性。

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; //規定段落中的文字不進行換行
複製程式碼

多行文字

（1）webkit瀏覽器或移動端的頁面

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
複製程式碼

跨瀏覽器相容方案

p {
    position: relative;
    line-height: 2em;
    height: 6em;
    overflow: hidden;
}
p::after {
    content: "...";
    font-weight: bold;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 20px 1px 45px;
}
複製程式碼

注意：

1.height高度是line-height的3倍；

2.要支援IE8，需要將::after替換成:after

七、vertical-align: middle;

如何讓div裡的圖片和文字同時上下居中

img標籤是行內元素，設定文字和圖片垂直居中時需要把div的line-height和height的值設定相同即可。
並且img需要設定vertival-align：middle；

複製程式碼

vertical-align css的屬性vertical-align用來指定行內元素（inline）或表格單元格（table-cell）元素的垂直對齊方式。只對行內元素、表格單元格元素生效，不能用它垂直對齊塊級元素。

vertical-align：baseline/top/middle/bottom/sub/text-top;
複製程式碼

八、cursor的url屬性

cursor的屬性如果為url，需要使用圖片作為效果時，圖片的大小不能超過128px*128px

九、transfrom的rotate屬性在span標籤下失效

因為span標籤是inline屬性，rotate只在inline-block或block屬性時生效。

十、flex實現內部元素三等分

<body>
    <style>
        .tab {
            display: flex;
            width: 100%;
            height: 100px;
            background: blue;
            list-style: none;
        }
        li {
            flex: 1; // 表示子元素之間平均分配
            background: red;
        }
        li:nth-child(2){
            background: yellow;
        }
    </style>
    <ul class="tab">
        <li>flex1</li>
        <li>flex2</li>
        <li>flex3</li>
    </ul>
</body>
複製程式碼

效果如下：

css必備知識點

flex-grow屬性中的grow是擴充套件的意思，擴充套件的就是flex子項所佔據的寬度，擴充套件所侵佔的空間就是除去元素外的剩餘的空白間隙。

flex-grow：<number>; /* 數值，可以是小數，預設值是0 */
複製程式碼

flex-grow不支援負值，預設值是0，表示不佔用剩餘的空白間隙擴充套件自己的寬度。如果flex-grow 大於0，則flex容器剩餘空間的分配就會發生變化，具體規則如下：

  • 所有剩餘空間總量是1。
  • 如果只有一個flex子項設定了flex-grow屬性值：
    • 如果 flex-grow值小於1，則擴充套件的看空間就總剩餘空間和這個比例的計算值。
    • 如果flex-grow值大於1，則獨享所有剩餘空間。
  • 如果有多個flex設定了flex-grow屬性值：
    • 如果flex-grow值總和小於1，則每個子項擴充套件的空間就總剩餘空間和當前元素設定的flex-grow比例的計算值。
    • 如果flex-grow值總和大於1，則所有剩餘空間被利用，分配比例就是flex-grow屬性值的比例。 例如所有flex子項都設定flex-grow:1,則表示剩餘空白間隙大家等分 ，如果設定的flex-grow比例是1：2：1，則中間的flex子項佔據一半的空白間隙，剩餘的前後兩個元素等分。

flex屬性是 flex-grow, flex-shrink和 flex-basis的縮寫。

flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
複製程式碼

其中第2和第3個引數是可以選的，預設值為0 1 auto。

十一.column-count實現三列布局

一般用於線上文件

column-count: 3;
複製程式碼

十二.修改全站字型

html[lang=en-RU] body *{
  @import url('http://fonts.googleapis.com/css?family=Roboto:400,700');
  font-family: 'Roboto' !important;
}
複製程式碼

十三.px

在不同的螢幕上，css畫素所呈現的物理尺寸是一致的，而不同的是css畫素所對應的物理畫素數是不一致的。在普通螢幕下1個css畫素對應1個物理畫素，而在Retina螢幕下，1個畫素對應的卻是4個物理畫素。

CSS畫素

css畫素是一個抽象的單位，主要使用在瀏覽器上，用來精確度量Web頁面上的內容。一般情況之下，css畫素稱為與裝置無關的畫素（device-indpendent pixel）,簡稱DIPs.

螢幕密度

螢幕密度是指一個裝置表面上存在的畫素數量，它通常以每英寸有多少個畫素來計算（PPI）

物理畫素

物理畫素又被稱為裝置畫素，他是顯示裝置中一個最微小的物理部件。每個畫素可以根據作業系統設定自己的顏色和亮度。正是這些裝置畫素的微小距離欺騙了我們肉眼看到的影象效果。

推薦一篇文章：再談Retina下1px的解決方案

十四. 媒體查詢

1.什麼是媒體查詢

媒體查詢可以讓我們根據裝置顯示器的特性(如視口寬度、螢幕比例、裝置方向：橫向或縱向)為其設定CSS樣式，媒體查詢由媒體型別和一個或多個檢測媒體特性的表示式組成。媒體查詢中可用於檢測的媒體特性有 width 、 height 和 color （等）。使用媒體查詢，可以在不改變頁面內容的情況下，為特定的一些輸出裝置定製顯示效果。
複製程式碼
  1. 邏輯操作符

not and only

  1. 在html中寫入media
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
複製程式碼

引數詳解：

  • width=device-width: 寬度等於當前裝置的寬度
  • initial-scale=1: 初始的縮放比例 （預設為1）
  • minimum-scale=1: 允許使用者縮放到的最小比例（預設為1）
  • maximun-scale=1: 允許使用者縮放到的最大比例 （預設為1）
  • user-scalable=no: 使用者是否可以手動縮放（預設為no)
  1. 寫Media中的程式碼
/* 當頁面大於1200px時，大螢幕，主要是PC端 */
@media (min-width: 1200px) {
    
}
/* 在992 和 1199畫素之間的螢幕裡，中等螢幕，解析度低的pc */
@media (min-width: 992px) and (max-width: 1199px) {
    
}
/* 在768 和 991 畫素之間的螢幕裡，小螢幕，主要是PAD */
@media (min-width: 768px) and (max-width: 991px) {
    
}
/*在480 和767 畫素之間的螢幕裡，超小螢幕，主要是手機*/
@media (min-width: 480px) and (max-width: 767px) {

}
/*在小於480 畫素的螢幕，微小螢幕，更低解析度的手機*/
@media (max-width: 479px) {
    
}
複製程式碼

十五、box-shadow

/* x偏移量 | y偏移量 | 陰影模糊半徑 |陰影擴散半徑 | 陰影顏色 */
box-shadow: 2px 2px 2px 1px rgba(0,0,0, 0.2);
任意數量的陰影，以逗號分隔
複製程式碼

模糊距離和擴散半徑的區別：

相同點： 都會產生額外長度區域。

不同點： 模糊距離產生的額外長度帶有模糊效果。

十六、scss中的@mixin與@function

scss是Sass3引入的新語法，語法完全相容CSS3，且繼承了Sass的強大功能。所有在CSS中正常工作的程式碼也能在SCSS中正常工作。

@mixin

// 定義
@mixin rounded($amount) {
    -moz-border-radius: $amount;
    border-radius: $amount;
}
// 使用
.box {
    border: 3px solid #777;
    @include rounded(5px);
}
// 結果
.box {
    border: 3px solid #777;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
複製程式碼

@function

// 定義 pc端2560設計稿
@function v($px) {
    @return round($px * 10000 / 2560) /10000 * 100vw;
}
// 使用
.root {
    width: v(2560);
}
// 結果
.root {
    width: 100vw;
}
複製程式碼

@mixin 用於被多次宣告的樣式。符合DRY原則（Don't Repeat youself）.

@function 類似於宣告一個函式，呼叫後計算返回相應的結果

相關文章