前端總結·基礎篇·CSS

時間 2019-12-01

標籤前端總結基礎 css 欄目 CSS 简体版

原文原文鏈接

前端總結·基礎篇·CSS

1 經常使用重置+重置插件（Normalize.css,IE8+）

* {box-sizing:border-box;} /* IE8+ */body {margin:0;} /* 去除邊距 */ul {margin:0;padding-left:0;} /* 去除邊距和左填充 */li {list-style-type:none;} /* 去除列表的圓點 */a {text-decoration:none;} /* 去除下劃線 */

2 瀏覽器前綴

{

transition: width 2s;

-moz-transition: width 2s; /* Firefox 4 */

-webkit-transition: width 2s; /* Safari 和 Chrome */

-o-transition: width 2s; /* Opera */

}

3 兼容性

爲針對不一樣IE瀏覽器進行樣式修改，可使用css hack

指定版本：IE6(_),IE7(+),IE8(/),IE9(:root 9)

指定範圍：IE6-7(*),IE8-10(\0),IE9-10(\9\0),IE All(\9)

除了手寫IE兼容性，你也能夠直接使用IE9.js自動處理IE6-9的bug。

IE6-9支持的支持圓角、背景漸變、邊框圖片、盒陰影、rgba等可視化的功能能夠用CSS3PIE。

IE6-8支持媒體查詢可使用Respond.js。

IE6-7支持CSS3 box-sizing可使用borderBoxModel.js。

IE6-8支持:first-child等高級CSS選擇符，能夠用selectivizr。

讓IE8及如下的瀏覽器支持H5新元素，能夠用html5shiv.js。

4 指定渲染模式

5 CSS庫

爲了方便快速的再次實現須要的效果，把經常使用的功能封裝起來。經過設置class的方式，使用封裝好的css庫。

CSS3懸浮效果（Hover.CSS）

提示（HINT.css）

進度（progress.js）

加載動畫（css-loaders）

按鈕（Buttons）

預處理（less,sass）

界面（Bootstrap）

1 路徑：

1 ../ 上一級目錄

2 ./ 當前目錄

3 / 根目錄

2 float+margin-佈局

雙飛翼佈局比聖盃佈局多使用了1個div，

少用大體4個css屬性（聖盃佈局container的 padding-left和padding-right這2個屬性，

加上左右兩個div用相對佈局position: relative及對應的right和left共4個屬性，；

而雙飛翼佈局子div裏用margin-left和margin-right共2個屬性

，比聖盃佈局思路更直接和簡潔一點。

簡單提及來就是：雙飛翼佈局比聖盃佈局多建立了一個div，但不用相對佈局了。

3 clear：清除浮動

eg: .clear{ zoom: 1;}

.clear:after { content:'';display:block;clear:both;}

.fl{ float:left;}

.fr{ float:right;}

浮動：1.overflow 將父輩元素的overflow設置爲hidden

2.after僞類對於元素after僞類進行設置

4 position與dispay

1.display:none; // 會清除本來佔用的佈局空間。

2.visibility:hidden; // 隱藏元素

3.display:none; // 隱藏元素並清除本來佔用的佈局空間

（1）清除佈局空間的定位（absolute fixed）

fixed 偏移量至關視口的。固定定位（fixed）不會隨着鼠標的滾動而改變位置。他真的是固定屏幕的某一個位置的，比較常見的是網頁右下角的廣告。

absolute 偏移至關於最近的一段podition 不是static的祖先元素。絕對定位（absolute）的定位原點是非默認定位（static）的父節點。能夠是absolute fixed relative，若是父節點沒有這些，那定位原點就是body了。使用了這兩種定位中的一種，元素本來佔用的佈局空間將會消失（脫離文檔流）。下面是絕對定位（absolute）的一個例子。左圖是默認佈局，右圖是使用絕對定位（absolute）以後的（元素本來的佈局空間被清除）。

（2）留佈局空間的定位（relative）

元素本來佔用的佈局空間依舊保留在文檔流中。

reltive偏移至關於原先在文檔中的位置。相對定位（relative）相對原有位置定位。把上例中的absolute改爲relative便可看到效果。使用這種方法，元素本來佔用的佈局會保留。

（3）默認定位：默認定位爲static。

（4）巧用relative+absolute定位父相子絕

父級採用relative，子代採用absolute。則子代的定位原點變爲父級元素的左上角。

5 居中

（1）水平居中

a. text-align:center

.parent {width: 500px;height: 100px;border: 1px solid #ddd;text-align: center;}.child {display: inline-block;width: 100px;}<div class="parent"><span class="child">123</span> </div>

該方法能夠水平居中塊級元素中的行內元素，如`inline`，`inline-block`；

對於塊級元素中的塊級元素，只會讓子元素中的內容居中，子元素仍然是左對齊，如上述例子中span改爲`display：block`，則child會左對齊，其中的文字會相對於span居中。

b. margin:0 auto

.parent {width: 500px;height: 100px;border: 1px solid #ddd;}.child {display: block;margin:0 auto;width: 100px;}<div class="parent"><span class="child">123</span></div>

對於已知width的塊級元素，能夠用`margin：0 auto`來設置水平居中。

（2）垂直居中

a. line-height

對於已知height的單行文本，設置line-height=height的值，便可實現垂直居中。

b. vertical-align: middle

模擬成表格屬性來實現居中。

.parent {display: table-cell; //模擬表格屬性vertical-align: middle;text-align: center;width: 500px;height: 100px;border: 1px solid #ddd;}.

child {display: inline-block;width: 100px;}

c. position：absolute + translate

對於height和width未知的元素能夠採用該方法

.parent {position: relative;width: 500px;height: 100px;border: 1px solid #ddd;}.

child {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: #ddd;}

（3）水平居中

1.text-align:center 水平居中的塊級元素的行內元素 inline inline-block

2.margin:auto 對已知的width塊級元素

6 垂直矩陣

1.line-height 單行文本

2.vertical-algin:middle 表格

3.position:absolute+translate 對height,width未知的元素採用該方法

4.flex佈局多個因素

7 行高

1.line-height 在文本行中垂直居中

2.vertical-align (1)top 按頂線對齊

(2)bottom 按底線對齊

(3)middle 文字居中

(4)..px 按數字

8 margin-外邊距

垂直方向的margin會合並，水平方向的不會。實際顯示的margin是二者中較大的那個

1.margin：0 auto （對已知的width塊級元素，實現水平居中等功能）

2.margin：上外右外下外左外

3.margin：上外左右外下外

4.margin：上下外左下外

5.margin：上下左右外

9 padding-內邊距

padding:1px 2px 1px 2px;（top/right/bottom/left）

1.padding：上內右內下內左內

2.padding：上內左右內下內

3.padding：上下內左右內

4.padding：上下左右內

10 border

outline和border相似，可是不佔用佈局空間。

border-image:url() 30 30 stretch;（round爲邊框重複，stretch爲邊框拉伸）

border:1px solid rgba(——，——，——，透明度)

11 border-radius-圓角

border-radius: 10px 0 10px 0; //設置圓角（四個值分別爲top-left、top-right、bottom-right和bottom-left）

1.border-radius：左上右上右下左下

2.border-radius：左上右上右下左下

3.border-radius：左上右上右下左下

4.border-radius：左上右上右下左下

1.圓 border-radius(100%)

2.半圓 border-radius(10px 0 0 10px)

3.扇形 border-radius(0 0 0 10px)

4.橢圓 border-radius(20px 40px)

12 list-列表與表格

1.list-style-type cellspacing border

合併邊框：border-collapse:collapse

2.list-style-image

3.list-style-position

13 text-文本樣式

@font-face用來設置自定義字體

1.text-algin 水平對齊方式

2.text-indent 文本縮進

3.line-height 行間距

4.text-decoration

14 word-文字折行

1.word-wrap: 文字溢出

2.word-break: 進行字母級截斷

3.white:space:

15 input

1.aufocus 自動獲取焦點

2.requred

3.placehoder

4.pattern 正則表達式

5.height/width 只適用於image

16 overflow

1.visble 滾動條

2.hidden

3.scroll:滾動條顯示

4.auto: 滾動條自動顯示

17 box-shadow-陰影

opacity: .5; // 設置默認透明度爲0.5

box-shadow:

18 background-背景屬性

製做精靈圖（sprite）能夠用，

而後將元素的width和height設置成小圖的大小。

background:red url(laughcry.gif) repeat top left;

多背景：（-image:url(bg.jpg),url(dog.jpg)）定位源（-origin:content-box/padding-box/border-box）顯示區域（-clip:content-box;）和尺寸（-size(80px 60px)）

1.三種寫法：

(1)image、

(2)repeat、

(3)position、

(4)color（理解）

2.background:url(img/..) no-repeat 顏色（10px 10px）

repeat x y

1.背景顏色

2.漸變色背景

3.背景與屬性

4.base64和性能優化

5.多分辨流適配

19 linear-gradient-漸變

background:linear-gradient(red,blue,green)

* background:linear-gradient(to right,red 10%,blue 50%,green 70%)

* background:linear-gradient(rgba(220,220,220,0),rgba(220,220,220,1))

默認爲從上到下漸變，to right（前綴寫法中皆爲left）

能夠設置從左到右漸變，to bottom right

則對角線漸變（前綴寫法中webkit爲left top），

180deg則能夠設置按照角度漸變；

linear-gradient(方向,開始的顏色,結束的顏色)

-moz-linear-gradient(top,red,yellow);

-webkit-linear-gradient(top,red,yellow);

-ms-linear-gradient(top,red,yellow);

linear-gradient(top,red,yellow)

-ms-fliter:「progid:DXImageTransform.Microsoft.gradient(enabled='false',

startColorstr=red, endColorstr=yellow)」;

20 尺寸：

1.百分比

2.rem html的font-size

3.em 父元素的flow-size

4.盒子

21 Z-index

1.Z順序值大的覆蓋值小的

2.auto

3.<interger>整數值

4.inherit

22 resize（notIE）（CSS3）

定義用戶是否可調整當前元素的邊框大小。

resize: horizontal（水平）/vertical（垂直）/both/none/inherit;

23 分欄（column）（IE10+ notOperaMini）（CSS3）

column-count: 3; /* 設定須要分幾欄 */

column-gap: 20px; /* 設定兩欄間隔 */

24 濾鏡（filter）（notIE,-webkit-）

25 自定義鼠標指針（cursor）

cursor:pointer/help/wait/text/move/crosshair;

26 @keyframe-動畫

定義動畫能夠用from-to的兩個定點形式，也可用百分比（0%、50%、100%）的多個定點形式

animation: toRight 5s;

transition: width 2s; /* 只需添加這一條 */

a.transform

1)translate

translate(x,y) transformX(n) translateY(n) translateZ(n) translate3d

2)rotate

rotateX() rotateY() rotateZ() rotatae3d()

3)shew

4)scale

scaleX() scaleY() scaleZ() scale3d()

5)matrix

6)transform-style:preserve-3d matrix3d(n,n,n,n,....,n)

b.transform-origin

(1)x-axis

X的值 left center right length %

(2)y-axis

Y的值 top center bottom length %

(3)z-axis

Z的值 length

3.background:

(1)liner-gradient

(2)radical-gradient

4.transition

(1)transition-property: none / all / property(與動畫裏的名稱能夠取同樣)

(2)transition-duration:

(3)transition-delay:

(4)transition-timing-function linear 勻速

ease 慢-快-慢（moren）

ease-in 慢開始

ease-out 慢結束

ease-in-out 慢速開始和結束

27 移動端

（1）視口（viewport）

width=device-width // 把頁面寬設置成設備同樣initial-scale=1.0 // 初始縮放爲1.0

user-scalable=no // 不容許用戶縮放（此處有坑，有時會無效）

（2）媒體查詢（media query）

媒體查詢來根據不一樣寬度的設備顯示不一樣的佈局。

（3）相對字體大小（rem/em）

rem是相對於根字體的大小，em是相對於父級的字體大小

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。