css基礎(二)

時間 2020-02-13

標籤 css 基礎欄目 CSS 简体版

原文原文鏈接

１.1 Css書寫位置

◆內嵌css

<head>html

樣式表內容工具

</style>url

</head>spa

◆外鏈指針

◆行內樣式表繼承

<div style=」font-size:20px;」></div>圖片

１.2 標籤分類（顯示方式）

◆塊元素

典型表明： div,p,h1-h6,li,.....

★獨佔一行

★能夠設置寬高

★沒有定義寬度時，寬度爲父集元素的寬度

◆行內元素

典型表明：span,a,strong,em,del......

★在一行顯示

★不能直接設置寬高

★寬高爲內容撐開的寬高

◆行內塊元素

典型表明:img,input

★在一行上顯示

★能夠設置寬高

１.3 元素轉換

display:block; 行內轉塊

Display:inline; 塊轉行內

Display:inline-block; 塊或行內轉行內塊

１.4 Css三大特性

◆層疊性

樣式發生衝突的時候，老是執行後邊的樣式，和調用順序無關。

◆繼承性

★文字的全部屬性均可以被繼承

-特殊：h1-h6 文字大小不能被繼承

a標籤文字顏色不能被繼承

◆優先級

默認樣式<標籤選擇器<類選擇器<id選擇器<行內樣式<!important

0 1 10 100 1000 1000以上

★繼承的權重爲0

★權重會疊加

１.5 連接僞類

a:link{屬性:值;} 連接默認狀態 a{屬性:值;}是同樣的

a:visited{屬性:值;} 連接訪問以後的狀態

a:hover{屬性:值;} 鼠標放上去顯示的狀態

a:active{屬性:值;} 連接激活的狀態

:focus{屬性:值;} 獲取焦點

注意:若是四個連接僞類都使用，按順序書寫。

１.6 背景

background-color 背景顏色

background-image:url(「1.png」); 背景圖片

background-repeat: repeat | no-repeat | repeat-x | repeat-y

background-position left | right | center | top | bottom

Background -attachment scroll | fixed

２行高

◆瀏覽器默認文字大小

瀏覽器默認文字大小：16px

行高：是基線與基線之間的距離

行高=文字高度+上下邊距

一行文字行高和父元素高度一致的時候，垂直居中顯示。

２.1 行高的單位

行高單位	文字大小	值
20px	20px	20px
2em	20px	40px
150%	20px	30px
2	20px	40px

總結:單位除了像素覺得，行高都是與文字大小乘積。

行高單位	父元素文字大小	子元素文字大小	行高
40px	20px	30px	40px
2em	20px	30px	40px
150%	20px	30px	30px
2	20px	30px	60px

總結:不帶單位時，行高是和子元素文字大小相乘，em和%的行高是和父元素文字大小相乘。行高以像素爲單位，就是定義的行高值。

◆推薦行高使用像素爲單位。

３盒子模型

有ie盒模型和w3c盒模型;

w3c 盒子模型的範圍包括 margin、border、padding、content

　從上圖能夠看到 ie 盒子模型的範圍也包括 margin、border、padding、content，和標準 w3c 盒子模型不一樣的是：ie 盒子模型的 content 部分包含了 border 和 pading。

　　例：一個盒子的 margin 爲 20px，border 爲 1px，padding 爲 10px，content 的寬爲 200px、高爲 50px，假如用標準 w3c 盒子模型解釋，那麼這個盒子須要佔據的位置爲：寬 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的實際大小爲：寬 1*2+10*2+200=222px、高 1*2+10*2+50=72px；假如用ie 盒子模型，那麼這個盒子須要佔據的位置爲：寬 20*2+200=240px、高 20*2+50=70px，盒子的實際大小爲：寬 200px、高 50px。

　　那應該選擇哪中盒子模型呢？固然是「標準 w3c 盒子模型」了。怎麼樣纔算是選擇了「標準 w3c 盒子模型」呢？很簡單，就是在網頁的頂部加上 doctype 聲明。假如不加 doctype 聲明，那麼各個瀏覽器會根據本身的行爲去理解網頁，即 ie 瀏覽器會採用 ie 盒子模型去解釋你的盒子，而 ff 會採用標準 w3c 盒子模型解釋你的盒子，因此網頁在不一樣的瀏覽器中就顯示的不同了。反之，假如加上了 doctype 聲明，那麼全部瀏覽器都會採用標準 w3c 盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了。