CSS技巧總結1

CSS從基礎知識到技巧總結，知識點十分繁多。爲了將這些知識點進行一個系統的總結。我列舉了一下幾部分進行記憶。個人記憶方法主要是記住全部的CSS書寫順序，而後對每一個屬性進行屬性的相關功能進行記憶。這樣就能夠作到總體呈現結構式的記憶。

CSS 技巧和經驗列表

目錄

• 第一部分 CSS規範
• 第二部分 位置屬性
• 第三部分 大小
• 第四部分 文字系列
• 第五部分 背景
• 第六部分 動畫

第一部分 CSS規範

1. CSS書寫順序

1.位置屬性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其餘(animation, transition等)
複製代碼

2. 須要寫兼容的常見的CSS屬性(注意：不帶前綴的寫法必須放在最後)

• -moz- /* 火狐等使用Mozilla瀏覽器引擎的瀏覽器 */
• -webkit- /* Safari, 谷歌瀏覽器等使用Webkit引擎的瀏覽器 */
• -o- /* Opera瀏覽器(早期) */
• -ms- /* Internet Explorer (不必定) */

常見的須要寫兼容的CSS屬性以下：

• border-radius
• box-shadow
• flex系列(flex、flex-direction、justify-content、align-items、align-self)
• transform
• transition
• animation

3. CSS條件hack

3.1 語法

注意：<keywords> 和 <version> 都爲選填
<!--[if <keywords>? IE <version>?]>
HTML代碼塊
<![endif]-->
複製代碼

3.2 取值

<keywords>
if條件共包含6種選擇方式：是否、大於、大於或等於、小於、小於或等於、非指定版本

是否：
指定是否IE或IE某個版本。關鍵字：空
大於：
選擇大於指定版本的IE版本。關鍵字：gt（greater than）
大於或等於：
選擇大於或等於指定版本的IE版本。關鍵字：gte（greater than or equal）
小於：
選擇小於指定版本的IE版本。關鍵字：lt（less than）
小於或等於：
選擇小於或等於指定版本的IE版本。關鍵字：lte（less than or equal）
非指定版本：
選擇除指定版本外的全部IE版本。關鍵字：!
複製代碼

3.3 示例

大於或等於，示例代碼：
<!--[if gte IE 6]>
<style>
.test{color:red;}
</style>
<![endif]-->
複製代碼

第二部分 位置屬性

• 佈局
• 最小固定寬度佈局
• 百分比佈局
• 柵格佈局、彈性佈局
• js + rem 佈局方案
• 經典聖盃佈局
• position:(sticky footer、sticky list、sticky Modal)/(BFC)
• z-index失效
• display:清除浮動、去掉img幾像素的空白、水平垂直居中
• display:table/table-cell/table-row/flex
• display:none與visibility:hidden的區別？

1. sticky footer 代碼戳這裏

效果圖以下：

2. sticky list 代碼戳這裏

效果圖以下：

3. sticky Modal 代碼戳這裏

效果圖以下：

4. BFC 戳這裏

4.1 BFC基本概念

BFC Block Formatting Context 塊級格式化上下文

4.2 BFC原理

4.3 BFC觸發

• float不爲none
• display值爲inline-block 、table-cell、table-caption
• position值爲absolute、fixed
• overflow的值不爲visible

4.4 BFC應用場景

• 清除浮動
• 被float元素覆蓋
• margin重疊

4. z-index 失效

• 父標籤 position屬性爲relative；
• 問題標籤無position屬性（不包括static）；
• 問題標籤含有浮動(float)屬性。

5. 清除浮動

> 方法一:
#test{clear:both;}
#test爲浮動元素的下一個兄弟元素

> 方法二：
#test{display:block;zoom:1;overflow:hidden;}
#test爲浮動元素的父元素。zoom:1也能夠替換爲固定的width或height

> 方法三：
#test{zoom:1;}
#test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}
#test爲浮動元素的父元素
複製代碼

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

> 方法一：
img{display:block;}

> 方法二：
img{vertical-align:top;}
除了top值，還能夠設置爲text-top | middle | bottom | text-bottom，甚至特定的<length>和<percentage>值均可以

> 方法三：
#test{font-size:0;line-height:0;}
test爲img的父元素
複製代碼

7.水平垂直居中

如何讓元素水平居中

元素爲 inline-* 系列（包括inline/inline-block/inline-table/inline-flex）
text-align:center;

元素爲block：
margin: 0 auto;

多個塊級元素：
{
    display:inline-block;
    text-aligin:center;
}
或者
{
    display:flex;
    justify-content:center;
}

複製代碼

如何讓元素垂直居中

• inline

單行文本
{
    padding-top:30px;
    padding-bottom:30px;
}
或者
{
    height:30px;
    line-height:30px
}

多行文本
<div><p>文本文本文本文本文本</p></div>
方法一：
div{
    display: flex;
	flex-direction: column;
	justify-content: center;
}
方法二：
div{
    display: table;
}
p{
    display:table-cell;
    vertical-align:middle;
}
複製代碼

• block

知道高度
.parent{
	position: relative;
}			
.child{
	position: absolute;
	top: 50%;
	height: 100px;
	margin-top: -50px;
}

不知道高度
.parent{
	position: relative;
}			
.child{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
複製代碼

• use flex

.parent{
	display: flex;
	flex-direction: column;
	justify-content: center;
}
複製代碼

如何讓元素水平垂直居中

固定寬帶和高度：
.parent{
	position: relative;
}			
.child{
	position: absolute;
	top: 50%;
	left:50%;
	width:100px;
	height:100px;
	margin:-50px 0 0 -50px;
}

不知道高度和寬度:
.parent{
	position: relative;
}			
.child{
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%);
}

使用flex
.parent{
	display: flex;
	justify-content: center;
	align-items: center;
}
複製代碼

8.如何區別display:none與visibility:hidden？

• 相同的是display:none與visibility:hidden均可以用來隱藏某個元素； 不一樣的是display:none在隱藏元素的時候，將其佔位空間也去掉；
• 而visibility:hidden只是隱藏了內容而已，其佔位空間仍然保留。

display屬性值解析：display:table/table-cell/table-row/flex

第三部分 大小

1.box-sizing 戳這裏

注意：

• 在響應式佈局總box-sizing的border-box屬性使用比較普遍
• 重置box-sizing的方法

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
複製代碼

2.設置圖片的寬度爲屏幕的寬度，（高度可設置爲寬度對應的百分比）

<div class="image-header">
    <img :src="food.image">
</div>
CSS代碼：
.image-header{
    position: relative;
    width: 100%;
    height: 0;
    /**100%：高度=寬度 80%：高度=0.8*寬度*/
    padding-top: 100%;
    img{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}
複製代碼

3. 繪製三角形

一篇很好的關於繪製三角形原理的文章 點這裏

html代碼：<div id="triangle"></div>

正三角形：
#triangle{
	width: 0;
	height: 0;
	border-bottom: 100px solid red;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
}
複製代碼

接下來的請點擊CSS技巧總結2