CSS 知識點整理

本文是我整理的關於css的部分基礎知識點，適合正在準備前端工作面試的人做簡單回顧。

css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括：邊距，邊框，填充，和實際內容。

利用css我們可以擺脫html標籤歸類的限制，自由地在不同標籤/元素上應用我們需要的屬性。

主要用的css樣式有以下三個：

position 屬性的五個值：

overflow 屬性的五個值：

float 會使元素向左或向右移動，其周圍的元素也會重新排列。float 往往是用於影象，但它在布局時一樣非常有用。

乙個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。

浮動元素之後的元素將圍繞它。

浮動元素之前的元素將不會受到影響。

如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。

元素浮動之後，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性。clear 屬性指定元素兩側不能出現浮動元素。[1]

例如：css **：

.thumbnail 

.text_line

<

div 
class
="thumbnail"
>
div>
<
div 
class
="thumbnail"
>
div>
<
div 
class
="thumbnail"
>
div>
<
div 
class
="thumbnail"
>
div>
<
h3 class
="text_line"
>-----這裡清除浮動-----
h3>
<
div 
class
="thumbnail"
>
div>
<
div 
class
="thumbnail"
>
div>
<
div 
class
="thumbnail"
>
div>
<
div 
class
="thumbnail"
>
div>

-----這裡清除浮動-----

設定到元素的寬度將防止它溢位到容器的邊緣。元素通過指定寬度，並將兩邊的空外邊距平均分配。如果沒有設定 width 屬性(或者設定 100%)，居中對齊將不起作用。

要讓居中對齊, 可以使用 margin: auto; 並將它放到塊元素中:

如果僅僅是為了文字在元素內居中對齊，可以使用 text-align: center; [1]

比如，如果想要一段文字在乙個div中垂直居中，可以設定這個模組上下padding相同。

可以設定 line-height 屬性值和 height 屬性值相等來使 div 元素垂直居中。[1]

關鍵**：

.center  /*

如果文字有多行，新增以下**: 
*/.center p 

.center .center p

選擇器示例示例說明

:link

a:link

選擇所有未訪問鏈結

:visited

a:visited

選擇所有訪問過的鏈結

:active

a:active

選擇正在活動鏈結

:hover

a:hover

把滑鼠放在鏈結上的狀態

:focus

input:focus

選擇元素輸入後具有焦點

:first-letter

p:first-letter

選擇每個元素的第乙個字母

:first-line

p:first-line

選擇每個元素的第一行

:first-child

p:first-child

選擇器匹配屬於任意元素的第乙個子元素的 元素

:before

p:before

在每個元素之前插入內容

:after

p:after

在每個元素之後插入內容

:lang(language)

p:lang(it)

為元素的lang屬性選擇乙個開始值

在 css3 中包含了四種組合方式:

@media 規則允許在相同樣式表為不同**設定不同的樣式。[1]

**型別

描述all

用於所有的**裝置。

aural

用於語音和音訊合成器。

braille

用於盲人用點字法觸覺回饋裝置。

embossed

用於分頁的盲人用點字法印表機。

handheld

用於小的手持的裝置。

print

用於印表機。

projection

用於方案展示，比如幻燈片。

screen

用於電腦顯示器。

tty用於使用固定密度字母柵格的**，比如電傳打字機和終端。

tv用於電視機型別的裝置。

注意：ie7和ie8需宣告!doctype才支援屬性選擇器！ie6和更低的版本不支援屬性選擇器。[1]

[title]

[title=example] {}

[title~=hello]

[lang|=en]

CSS 知識點整理

均為外部引用css檔案 stylesheet href xx.css type text css import url xx.css 1 link屬於html標籤，而 import是css提供的 2 頁面被載入的時，link會同時被載入，而 import引用的css會等到頁面被載入完再載入 3 li...

CSS常見知識點整理

position的值 水平居中塊級元素 如 div 可以使用 margin auto css組合選擇符包括各種簡單選擇符的組合方式。在 css3 中包含了四種組合方式 ps 從外部載入樣式表 內聯元素的特點 1.和其他的元素顯示在一行上 2.內邊距和外邊距 高度，寬度都是不可改變的，他的寬度是根據他...

CSS 知識點整理1

css提供了一種分層設計的思想，html提供具體的內容，而css對內容進行編輯，排版，更加方便管理。一 css選擇器元素選擇器紅色 c1 藍色 c2 綠色紅色 c1 藍色 c2 綠色二 元素尺寸大小設定html，body 獲取瀏覽器的定高。子元素的父元素是body，body的父元素是html，通過設...