CSS技巧和經驗 - laixiangran－IT工程師數位筆記本

文章出處

如何清除圖片下方出現幾像素的空白間隙

方法1

img {
    display: block;
}

方法2

除了top值，還可以設置為text-top | middle | bottom | text-bottom，甚至特定的和值都可以

img {
    vertical-align: top;
}

方法3

/*  #test為img的父元素  */
#test {
   font-size: 0;
   line-height: 0;
}

如何讓文本垂直對齊文本輸入框

input {
    vertical-align: middle;
}

如何讓單行文本在容器內垂直居中

只需設置文本的行高line-height等于容器的高度height即可

#test {
    height: 25px;
    line-height: 25px;
}

如何讓超鏈接訪問后和訪問前的顏色不同且訪問后仍保留hover和active效果

為什么是link-visited-hover-active

按L-V-H-A的順序設置超鏈接樣式即可，可速記為LoVe（喜歡）HAte（討厭）

a:link {
    color: #03c;
}
a:visited {
    color: #666;
}
a:hover {
    color: #f30;
}
a:active {
    color: #c30;
}

如何使文本溢出邊界不換行強制在一行內顯示

white-space詳解

設置容器的寬度和white-space為nowrap即可

#test {
    width: 150px;
    white-space: nowrap;
}

如何使文本溢出邊界顯示為省略號

text-overflow詳解

首先需設置將文本強制在一行內顯示，然后將溢出的文本通過overflow: hidden截斷，并以text-overflow: ellipsis方式將截斷的文本顯示為省略號

#test {
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

如何使連續的長字符串自動換行

word-wrap詳解

word-wrap的break-word值允許單詞內換行

#test {
    width: 150px;
    word-wrap: break-word;
}

如何清除浮動

方法1

#test {
    clear: both;
}
/* #test為浮動元素的下一個兄弟元素 */

方法2

#test {
    display: block;
    zoom: 1;
    overflow: hidden;
}
/* #test為浮動元素的父元素。zoom:1也可以替換為固定的width或height */

方法3

#test {
    zoom: 1;
}
#test:after {
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
    content: '';
}
/* #test為浮動元素的父元素 */

如何定義鼠標指針的光標形狀為手型

cursor詳解

#test {
    cursor: pointer;
}
/* 簡單設置cursor為pointer */

如何讓已知寬高的容器在頁面中水平垂直居中

方法1

position詳解

首先容器為相對定位，設置top: 50%;margin-top: -50px;使其垂直居中，再設置margin:0 auto使其水平居中

#test {
    width: 200px;
    height: 100px;
    position: relative;
    top: 50%;
    margin: 0 auto
    margin-top: -50px; /* height的一半 */
}

方法2

transform詳解

首先容器為相對定位，設置top: 50%;transform: translateY(-50%);使其垂直居中，再設置margin:0 auto使其水平居中

#test {
    width: 200px;
    height: 100px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 auto;
}

如何讓未知尺寸的圖片在已知寬高的容器內水平垂直居中

vertical-align詳解

#test {
    display: table-cell; /* vertical-align只支持內聯（inline）元素或表格單元格（table-cell）元素 */
    width: 200px;
    height: 200px;
    text-align: center;
    vertical-align: middle;
}
#test p {
    margin: 0;
}
#test p img {
    vertical-align: middle;
}
/* #test是img的祖父節點，p是img的父節點 */

如何設置span的寬度和高度（即如何設置內聯元素的寬高）

要使內聯元素可以設置寬高，只需將其定義為塊級或者內聯塊級元素即可。所以方法非常多樣，既可以設置display屬性，也可以設置float屬性，或者position屬性等等

span {
    display: block;
    width: 200px;
    height: 100px;
}

如何讓某個元素充滿整個頁面

html, body {
    height: 100%;
    margin: 0;
}
#test {
    height: 100%;
}

如何讓某個元素距離窗口上右下左4邊各10像素

html, body {
    height: 100%;
    margin: 0;
}
#test {
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
}

如何容器透明，內容不透明

方法1

原理是容器層與內容層并級，容器層設置透明度，內容層通過負margin或者position絕對定位等方式覆蓋到容器層上

.outer {
    width: 200px;
    height: 200px;
    background: #000;
    opacity: 0.2;
}
.inner {
    width: 200px;
    height: 200px;
    margin-top: -200px;
}

<div class="outer"><!--我是透明的容器--></div>
<div class="inner">我是不透明的內容</div>

方法2

直接使用background-color的rgba顏色值實現（高級瀏覽器）

.outer {
    width: 200px;
    height: 200px;
    background-color: rgba(0,0,0,0.2);
}

<div class="outer">
    <span>我是不透明的內容</span>
</div>

如何讓已知寬度的容器水平居中

#test {
    width: 960px;
    margin: 0 auto;
}

為什么容器的背景色沒顯示出來？為什么容器無法自適應內容高度？

清除浮動，方法請參考第8條
通常出現這樣的情況都是由于沒有清除浮動而引起的，所以Debug時應第一時間想到是否有未清除浮動的地方

如何做1像素細邊框的table

方法1

border-collapse詳解

#test {
    border-collapse: collapse;
    border: 1px solid #ddd;
}
#test th, #test td {
    border: 1px solid #ddd;
}

<table id="test">
    <tr>
        <th>姓名</th>
        <td>Joy Du</td>
    </tr>
    <tr>
        <th>年齡</th>
        <td>26</td>
    </tr>
</table>

方法2

border-spacing詳解

#test {
    border-spacing: 1px;
    background: #ddd;
}
#test tr {
    background: #fff;
}

<table id="test">
    <tr>
        <th>姓名</th>
        <td>Joy Du</td>
    </tr>
    <tr>
        <th>年齡</th>
        <td>26</td>
    </tr>
</table>

如何使頁面文本行距始終保持為n倍字體大小的基調

body {
    line-height: n;
}

注意，不要給n加單位

以圖換字的幾種方法及優劣分析

思路1 使用text-indent的負值，將內容移出容器

text-indent詳解

該方法優點在于結構簡潔，不理想的地方：
1.由于使用場景不同，負縮進的值可能會不一樣，不易抽象成公用樣式；
2.當該元素為鏈接時，在非IE下虛線框將變得不完整；
3.如果該元素被定義為內聯級或者內聯塊級，不同瀏覽器下會有較多的差異

#test {
    width: 200px;
    height: 50px;
    text-indent: -9999px;
    background:#eee url(*.png) no-repeat;
}

<div class="test">以圖換字之內容負縮進法</div>

思路2 使用display:none或visibility:hidden將內容隱藏

該方法優點在于兼容性強并且容易抽象成公用樣式，缺點在于結構較復雜

#test {
    width: 200px;
    height: 50px;
    background: #eee url(*.png) no-repeat;
}
#test span {
    visibility: hidden; /* 或者display:none */
}

<div class="test">
    <span>以圖換字之內容隱藏法</span>
</div>

思路3 使用padding或者line-height將內容擠出容器之外

該方法優點在于結構簡潔，缺點在于：

由于使用場景不同，padding或line-height的值可能會不一樣，不易抽象成公用樣式；
要兼容IE5.5及更早瀏覽器還得hack

#test {
    overflow: hidden;
    width: 200px;
    height: 0;
    padding-top: 50px;
    background: #eee url(*.png) no-repeat;
}
.test {
    overflow: hidden;
    width: 200px;
    height: 50px;
    line-height: 50;
    background: #eee url(*.jpg) no-repeat;
}

<div class="test">以圖換字之內容排擠法</div>

思路4 使用超小字體和文本全透明法

該方法結構簡單易用，推薦使用

.test {
    overflow: hidden;
    width: 200px;
    height: 50px;
    font-size: 0;
    line-height: 0;
    color: rgba(0,0,0,0);
    background: #eee url(*.png) no-repeat;
}

<div class="test">以圖換字之超小字體+文本全透明法</div>

為什么2個相鄰div的margin只有1個生效

本例中box1的底部margin為10px，box2的頂部margin為20px，但表現在頁面上2者之間的間隔為20px，而不是預想中的10+20px=30px，結果是選擇2者之間最大的那個margin，我們把這種機制稱之為“外邊距合并”；外邊距合并不僅僅出現在相鄰的元素間，父子間同樣會出現
簡單列舉幾點外邊距合并的注意事項:

a. 外邊距合并只出現在塊級元素上；

b. 浮動元素不會和相鄰的元素產生外邊距合并；

c. 絕對定位元素不會和相鄰的元素產生外邊距合并；

d. 內聯塊級元素間不會產生外邊距合并；

e. 根元素間不會產生外邊距合并（如html與body間）；

f. 設置了屬性overflow且值不為visible的塊級元素不會與它的子元素發生外邊距合并；

.box1 {
    margin: 10px 0;
}
.box2 {
    margin: 20px 0;
}

<div class="box1">box1</div>
<div class="box2">box2</div>

如何在文本框中禁用中文輸入法

ime-mode為非標準屬性，寫該文檔時只有IE能正確禁用中文輸入法，Firefox雖然支持但不能禁用

input, textarea {
    ime-mode: disabled;
}

打印分頁符

page-break-before詳解

雖然大多數的互聯網用戶更愿意在網上閱讀的內容，但一些用戶可能想打印文章。使用CSS，你可以控制內容的分頁符，把這個類加入到任何你想打印的標簽

#test { 
    page-break-before: always;
}

段落首字下沉

::first-letter詳解

你可以創建一個下沉效果，如在報紙或雜志的使用

p::first-letter {
    margin: 5px 0 0 5px;
    float: left;
    color: #FF3366;
    font-size: 3.0em;
}

單詞首字大寫

text-transform詳解

#test {
    text-transform: uppercase; /* lowercase 小寫 */
}

文字模糊化處理

text-shadow詳解

#test {
    color: transparent;
    text-shadow: #111 0 0 5px;
}

CSS重置

normalize.css下載

建議使用normalize.css

CSS中的簡單運算

calc詳解

通過CSS中的calc方法可以進行一些簡單的運算，從而達到動態指定元素樣式的目的。

#test {
  background-position: calc(100% - 50px) calc(100% - 20px);
}

參考

文章列表

不含病毒。www.avast.com

大師兄

IT工程師數位筆記本

大師兄發表在痞客邦留言(0) 人氣()

IT工程師數位筆記本

If you give someone a program , you will frustrate them for a day; if you teach them how to program, you will frustrate them for a lifetime.IT 這段話的意思是，如果你交給某人一隻程式，你將折磨他一整天;如果你教會某人如何寫程式，你將折磨他一輩子。

BloggerAds

CSS技巧和經驗 - laixiangran