《Head First HTML 與 CSS》讀書筆記之CSS篇
本文為閱讀《Head First HTML 與 CSS》的css部分的讀書筆記,方便回顧書上的知識,另一篇為Head First HTML 與 CSS》讀書筆記之HTML篇
基本
常識與實踐
- css的每一個語句包括一個場所,以及這個場所的一個屬性,還要應用到這個屬性一個樣式,一個典型的css規則如下:
p { // 需要增加樣式的元素: p,這稱為選擇器(selector),匹配頁面中的所有p元素
background-color: red; //背景色為紅色 格式: < 屬性:值; >
border: 1px solid gray; //邊框: 1畫素,實線,灰色
}
- css 的註釋:
/* */
- css驗證工具,你還可以把驗證圖示放到你的web頁面中
連結方式
內部連結
要為html直接增加css樣式,需要在<head>元素中增加開始和結束style標記,css規則放在裡面
<style>
p {
color: gray;
}
</style>
css檔案外接
另一種方式將css檔案外接,如style.css,作為樣式表(stylesheets),然後從html眾建立一個到這個檔案的外部連結,用<link>元素,用外部樣式表的好處是要修改整個網站的樣式,只要進入這個樣式表,對css進行幾處修改即可。如:
<link type="text/css" rel="stylesheet" href="lounge.css" >
#放到<head>元素中,在html5中不再需要type這個屬性(可選),rel(relation)指定html與所連結檔案間的關係,這裡指我們要連結到一個樣式表
#link是一個void元素
多樣式表
使用多個樣式表,順序很重要,一個樣式表會覆蓋在它上面連結的樣式表中的樣式,有時會有一個樣式表作為頁面的基礎樣式,要修改樣式,連結這個樣式表,然後在下面提供自己的樣式表,指定要修改的樣式,如下所示:
<link rel="stylesheet" href="corperate.css">//總公司樣式
<link rel="stylesheet" href="beverage-division.css">//部門對總公司的樣式做了一些補充,甚至可以覆蓋公司的樣式
<link rel="stylesheet" href="lounge-seattle.css">//西雅圖休閒室對樣式表做了自己的調整
簡寫
css屬性太多,能不能不費吹灰之力就指定這些屬性呢?可以把同一屬性的值結合起來寫成一句,即簡寫。
簡寫格式
padding
padding: 0px 40px 30px 20px;
,順序是上右下左,順時針有木有,如果都相同可以用padding: 20px;
padding-top: 0px;
padding-right: 40px;
padding-bottom:30px;
padding-left: 20px;
margin
上面的padding格式同樣對margin也適用,還有另一種方法,如果上下一樣,左右一致,可以這樣寫:margin: 0px 20px
,前面指定上下,後面指定左右。
border
邊框屬性簡寫 border: thin solid #007e73;
,可以用你喜歡的任何順序。
background
背景簡寫 background: white url(images/cocktail.gif) repeat-x;
,同樣順序隨便
字型
字型簡寫的格式稍微複雜一些:
font : font-style font-variant font-weight font-size/line-height font-family
- font的屬性中
font-size
必須有 -
font-size
前的屬性是可選的,組合任意,不過必須出現在font-size之前 -
line-height
是可選的,只要在font-size
後加/然後指定行高即可 -
font-family
名之間要使用逗號分隔 - 如:
font : small/1.6em Verdana, Helvetica, Arial,sans-serif;
簡寫的優劣
- 不一定要用簡寫形式,有些人覺得長形式更可讀。
- 簡寫的好處: 縮寫css檔案大小,輸入更快。
- 簡寫的不足: 如果存在問題,或者順序有誤,比較難除錯
- 簡寫記起來複雜,可以用參考手冊
選擇
子孫選擇器
父元素和子孫元素名之間有一個空格,子孫選擇器會選擇所有子孫,包括這個元素中巢狀的所有,不管巢狀多深,例如
#elixirs h2 {//選擇elixirs子孫的所有h2
color: black;
}
直接孩子
如果要選擇直接的孩子,用>
#elixirs>h2 {//選擇elixirs的直接孩子h2
color: black;
}
複雜選擇
更復雜的選擇,方法還是一樣
#elixirs blockquote h2 {//選擇elixirs中的blockquote中的h2元素
color: blue;
}
規則新增
- 要為多個元素編寫一個規則,只需要在選擇器之間加上逗號,如 "h1,h2"。
h1,h2 {// 多個選擇器
font-family: sans-serif;
color: gray;
}
- 元素可以指定多次規則,例如我們想給h1新增下邊框,但是不想給h2頁也加上,也不想分解上面的規則,可以給h1再增加一個屬性:
h1,h2 {
font-family: sans-serif;
color: gray;
}
h1{
border-bottom: 1px solid black;
}
- 把元素的所有共同樣式歸組在一起(如果改變,只需要在一個規則中修改),然後把一個元素特定的樣式寫在另一個規則中.
類
當我們用選擇器選擇元素使用一個規則時,會對所有該元素應用這個樣式,所以如何單獨地選擇這些元素呢?這裡就需要類class,class可以定義一類元素,對屬於該類的所有元素應用樣式.要將一個元素加入一個類,只需要增加屬性"class",並提供類名,如"greentea":
<p class="greentea">
...
</p>
類元素選擇器
先選擇這個類中的元素,再用"."指定一個類,最後是類名,如:
p.greentea {
color: green;
}
新增類元素
如果想對所有<blockquote>
也做同樣的處理,可以:
blockquote.greentea,p.greentea {
color: green;
}
<blockquote class = "greentea"
類選擇器
如果想把<h1>
,<h2>
,<h3>
,<p>
和<blockquote>
都增加到greentea呢?要對類中的所有元素都用同一樣式可以用:
.greentea{
color: green;
}
/*省略所有元素名,只有一個點,則會應用到所有成員*/
多類元素
元素可以有多個類,例如:
<p class="greentea raspberry blueberry"
#各個類名用空格分隔
#類中順序不重要
特定元素選擇器
如果多個選擇器都選擇了一個元素呢?例如上面的3個類都與p元素匹配,並且都定義了color屬性,那麼那個會勝出?
- 如果某個規則更特定,則選擇更特定的元素
- 如果特定程度相同,那麼會選擇css檔案中最後列出的規則,例如下面的例子中會選擇p.blueberry的規則:
p { color : black;} // 對於所有段落
.greentea { color: green;} //對於所有greentea類,比上面特定
p.greentea { color : green;} //只選擇greentea類中的段落,比上面特定
p.raspberry { color : blue;} //同上,與greentea特定程度相同
p.blueberry { color : purple;} //同上,與greentea特定程度相同
id
id
的作用
id屬性用來唯一地命名元素,通常你想對多個元素重用某些樣式,才能真正發揮類的作用。但是如果只有一個元素需要樣式,或者頁面上只有一個元素,那就應該使用id,每個元素只能有一個id,頁面中只能有一個元素擁有特定id,一個元素有一個id,同時可以屬於一個或多個類,id中不允許出現空格或其他特殊字元,如
<p id="footer">...</p>
選擇元素
用id選擇一個元素,需要在id前面使用一個#字元(類是[.]),id選擇器只與頁面中的一個元素匹配
#footer{
color: red;
}//選擇id為footer的任意元素
p#footer{
color: red;
}//選擇id為footer的<p>元素
實踐建議
- 在複雜頁面中,可能有些頁面把id指定給一個段落,有些頁面分配給了一個列表,那麼需要為該id定義多個規則,根據頁面上不同型別的元素應用不同的規則,如p#someid和blockquote#someid
- 類名要以一個字母開頭,不過id名可以以一個數字或字母開頭,但它們都不能有空格
繼承
樣式繼承
- 為p選擇器增加font-family屬性時,也會影響到
<p>
元素中內部元素的字型。 - 元素能夠從他們的父元素繼承樣式。
- 不是所有的樣式都能繼承,只有一部分,如font-family。
- 並不是所有元素都會繼承,如img沒有文字,所以不會受到字型影響。
- 繼承的樣式可以覆蓋,例如給
<em>
提供一個特定的規則來覆蓋body中指定font-family,瀏覽器會使用更特定的規則:
body {
font-family : sans-serif;
}
em {
font-family: serif;
}
那哪些元素能夠繼承
- 如果樣式會影響你的文字外觀,那麼所有這些樣式都能繼承,如color,font-family,font-size,font-weight,font-style等和字型相關的屬性
- 其他屬性不能繼承,如邊框,因為如果body元素有邊框,不表示你希望body內的所有元素都有邊框
- 根據常識確定,或者試試看
層疊
- 瀏覽器會用多個樣式表組織樣式,首先是你的ccs所有樣式表,其次是使用者建立的樣式,最後瀏覽器本身會維護一組預設樣式
- 給定一組樣式表中的一組樣式,瀏覽器會以層疊的方式確定具體使用哪個樣式
- 讀者可以在他的css屬性上加上!important,那他就能覆蓋你的樣式
- 瀏覽器需要選擇最特定的規則進行顯示
- 特定性由3個數開始000:
- 第一位: 這個選擇器包含id嗎?每個id加1分
- 第二位: 這個選擇器包含類或偽類嗎?每個類和偽類加一分
- 第三位: 這個選擇器包含元素名嗎?一個元素名加一分
- 把它們讀作真正的數,100>010>001,例如h1.greentea的特定性值為011,ol li p的特定性為003。
- 瀏覽器首先收集樣式表找到所有的宣告,然後對所有匹配的規則按作者,讀者和瀏覽器排序,再按特定性對組內的所有宣告分別排序,
最後對於衝突的規則,按照他們在各個樣式表中出現的順序排序,如果兩個規則得分相同,最後出現的規則勝出。
媒體查詢
link媒體查詢
你可能想針對將要顯示頁面的裝置調整頁面的樣式,可以用media屬性,在link元素中增加這個屬性.如
<link rel="stylesheet" href="lounge-mobile.css" mdeia="screen and (max-device-width: 480px)">
<link rel="stylesheet" href="lounge-print.css" media="print">
# 其他屬性包括min-device-width,max-device-width,orientation(橫向landscape,縱向portrait)
css媒體查詢
可以直接在css中增加媒體查詢,使用@media規則,把對所有媒體型別都通用的規則放在@media規則下面,例如
@media screen and (min-device-width: 481px){//當裝置螢幕寬度大於480px時使用
#guarantee {
margin-right: 250px;
}
}
@media screen and (max-device-width: 480px){//當裝置螢幕小於等於480px時使用
#guarantee {
margin-right: 30px;
}
}
@media print { // 如果要列印頁面,使用該規則
body {
font-family: Times, "Times New Roman", serif;
}
}
實踐建議
- 如果css檔案相當龐大,建議使用link元素
- 除了給出裝置的媒體屬性,如果你更關心瀏覽器大小,可以用max-width和min-width
屬性
盒模型
盒模型是css看待元素的一種方式,css將每個元素看作由一個盒子表示,每個盒子由一個內容區以及可選的內邊距,邊框和外邊距組成。由內而外分別是:
-
內容區
: content ,包含內容,如文字或影像 -
透明內邊距
: padding ,可選,包圍內容區 -
邊框
: border ,可選,內邊距周圍 -
透明外邊距
: margin,可選,包圍所有部分
內容區
內容區包含元素的內容,它的大小通常正好包含全部內容
padding
內邊距
- 使用內邊距可以在內容與盒子邊框之間建立一些看得到的空間
- css可以控制內邊距的寬度,甚至任意一邊的寬度,上下左右
- 透明,無法指定樣式
- 元素的背景顏色或背景影像會延伸到內邊距下面,但不會延伸到外邊距
- 設定padding的順序很重要,如果先設定padding-left再設定padding,剛才設定的padding-left就會被覆蓋
padding: 25px;
padding-left: 80px;
# 我們首先有一個屬性來控制所有4個邊,另外再對每個邊單獨設定
border
邊框
- 他是圍繞內容的一條線
- 邊框可以有不同的寬度,顏色和樣式
- 內邊距將內容區與邊框隔開
- 可以指定任意一邊的邊框樣式 border-top-color,border-top-style,border-top-width等
- 鋸齒邊框(破折線+白色):
border-style: dashed;
border-color: white;
border-style
邊框樣式
-
solid
實線 -
ridge
脊線 -
dashed
破折 -
dotted
虛線 -
double
雙線 -
groove
槽線 -
outset
外凸 -
inset
內凸
border-width
邊框寬度
- 關鍵字 thin medium thick
- 畫素 5px;
border-color
邊框顏色
和color 類似,使用顏色名,rgb或16進位制碼
border-radius
邊框圓角
- 可以為4個角分別指定,如border-top-left-radius
- 可以用px或em(相對於元素字型大小)
border-radius: 15px;
margin
外邊距
- 用外邊距在同一個頁面上的不同元素之間增加空間
- 和內邊距一樣,css可以控制外邊距的寬度,甚至任意一邊的寬度,上下左右
- 透明,無法指定樣式
- 和padding一樣,設定margin的順序很重要
margin: 30px;
margin-right: 250px;
color
顏色
文字元素的字型顏色
- color 元素實際控制著一個元素的前景色,他會控制文字和邊框顏色,不過你也可以用border-color屬性為邊框指定自己的顏色
- 改變p的字型顏色不會影響裡面的連結顏色.
- web顏色按構成顏色的紅,綠,藍三個分量所佔數量來指定,每種顏色會分別指定一個從0到100%的數值,然後把它們混合起來得到最終的顏色.如100%紅,100%綠,100%藍混合在一起是白色。所有指定web顏色的方法最終都是告訴瀏覽器:一個顏色的紅綠藍分量分別是多少.
- 對於文字和背景,要使用對比度最大的顏色,能提高可讀性
用16進位制碼指定指定顏色
- 如
#fc1257
,這種方式最常用 - 以#開頭,分別用2位數字指定紅綠藍
- 例如:
body {
background-color: #cc6600;
}
- wiki的web顏色表
- 如果每一組分量中的兩位數字都相同,可以使用簡寫,例如
#ccbb00
可以簡寫成#cb0
,不過如果是#ccbb10
則不能簡寫
按名指定顏色
- css只定義了大約150個顏色名,顏色名不區分大小寫
- 16種基本顏色,所有瀏覽器都有,以及150種擴充套件色,它們是:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
- 例如:
body {
background-color: silver;
}
用紅綠藍值指定顏色
以rgb開頭,在小括號裡指定紅綠藍的百分比,例如:
body{
background-color: rgb(80%, 40% , 0%)//橙色
}
還可以指定0-255之間的一個數值,例如:
body{
background-color: rgb(204, 102, 0)//和上面顏色一致,255*80% = 204...
}
font-family
字型
大多數計算機上通常只安裝了部分字型,所以選擇字型時要當心,通常指定的font-family包含一個候選字型列表,他們都來自同一個字型系列,候選字型用逗號分隔,大小寫字母必須一致,最後總是放一個通用的字型系列名,如果一個字型名中包含多個單詞,比如Courier New,如何指定?用引號,"Courier New",如:
body{
font-family: Verdana, Geneva, Arial, sans-serif;
}
字型系列
每個font-family包含一組有共同特徵的字型。共有5個字型系列:
Sans-serif
: 無襯線體 , 在計算機上更容易識別, 很多人認為在計算機顯示中最適合體文字,包括: [Verdana
: 大多數pc上都有],[Geneva
: 大多數Mac上都有],[Arial
: 在PC和Mac上都很常見]Serif
: 有襯線體 , 新聞報紙的文字排版Monospace
: 固定寬度的字元,主要用於顯示軟體程式碼示例Cursive
: 看似手寫的字型 , 有時會看到在標題中偶爾使用Fantasy
: 包含有某種風格的裝飾性字型
@font-face
指定字型
-
@font-face
允許你定義一種字型的名字和位置,然後可以在你的頁面中使用。 - web字型標準: 字型檔案使用".woff"副檔名,表示web開放字型格式(web open font format)
- 常用字型格式: [
TrueType
: .ttf],[OpenType
: .otf 建立在tt之上],[Embedded OpenType字型
: .eot otf的壓縮形式 微軟專用,僅ie支援],[SVG字型
: .svg 通用影像格式],[Web開放字型格式
: .woff 推薦使用,瀏覽器支援最廣泛] - 缺點: 獲取字型需要花費時間,第一次獲取字型時頁面效能可能會受影響。管理多個字型檔案痛苦,最後移動裝置和小型裝置不支援。
- 有字型託管服務可以為你託管web字型。
- 瀏覽器會先在使用者計算機上查詢Verdana字型,如果有,這個元素就使用這個字型,如果不可用,找Geneva,以此類推,
如果前面指定的字型都沒有找到,就用瀏覽器預設的Sans-serif字型,就是我們最後指定的通用字型。 - 利用font-family可以建立一個首選字型列表
- 把該規則增加到檔案的最上面,放在body規則之上
@font-face {
font-family: "Emblema One"; //建立一個名字
src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),
url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.tff");
//src屬性告訴瀏覽器到哪裡找到這個字型,瀏覽器會嘗試每一個src檔案,直到找到它支援的一個檔案。
}
@import
@import
允許匯入其他CSS檔案
font-weight
控制文字的粗細
-
lighter
: 相對於繼承的值使文字稍細一點。 -
normal
: 正常 -
bold
: 粗體 -
bolder
: 相對於繼承的值使文字稍粗一點。 - 還可以設定為100到900之間的一個數(100的倍數),不過並沒有廣泛支援,通常不使用
font-size
讓文字更大或更小
- 畫素px指定大小 :
font-size: 14px;
//告訴瀏覽器字母高度是多少畫素.14px中間不能有空格 - 百分數%指定大小 :
font-size: 150%;
//指定相對於父元素的字型大小 - em指定字型大小 :
font-size: 1.2em;
//指定相對於父元素的字型的比例因子,稱為相對大小 - 好吧,百分數和em看上去差別不大,可能%更容易理解些,例子:
body {
font-size: 14px;
}
h1 {
font-size: 150%; //父元素body,這裡是14*150% = 21px
}
h2 {
font-size: 1.2em; //父元素body,這裡是14*1.2 = 17px
}
- 關鍵字指定字型大小 :
font-size: small;
, small通常定義為12px,下面每一級大小約比前一個大小大20%,包括:xx-small
,x-small
,small
,medium
,large
,x-large
,xx-large
指定字型大小的祕訣
(1)選擇一個關鍵字(推薦small或medium),作為body的字型大小,為頁面預設字型大小 (2)使用em或百分數,相對於body字型大小指定其他元素的字型大小(em或百分數)這樣改變web頁面中字型大小就很容易,只要改變body字型大小就可以了,例如:
body { font-size : small; }
h1 { font-size : 150%; }
h2 { font-size : 120%; }
注意老版IE不支援用畫素指定的文字縮放
瀏覽器預設字型大小
- 大多數情況下,瀏覽器預設的body字型大小都是16畫素
- 如果在body中指定字型大小為90%,這將是預設字型的90%
- h1 : 200%, 相對於預設字型,下同
- h2 : 150%
- h3 : 120%
- h4 : 100%
- h5 : 90%
- h6 : 60%
text-decoration
文字裝飾
-
underline
: 下劃線 ,下劃線文字通常被使用者誤認為是連結文字,所以要謹慎使用 -
none
: 無效果 -
overline
: 上劃線 -
line-through
: 刪除線,html有個<del>的元素可以將內容標記為要刪除的內容 - 一次可以設定多個裝飾
- 如果文字繼承了你不想要的文字裝飾,可以使用值"none"來去除裝飾
- 如果em有兩個不同的規則,不會累加,要把這兩個值合併到一個規則中,才能同時得到這兩個文字裝飾.
- 例如:
em {
text-decoration: line-through;
}
font-style
字型風格
-
italic
: 斜體 ,斜體文字向右傾斜,另外襯線還有彎曲 -
oblique
: 傾斜 ,並不是使用一組專門設計的傾斜字元,而是由瀏覽器將正常文字傾斜
list-style
改變列表中列表項的外觀
- 列表的主要屬性是
list-style-type
,利用這個屬性可以控制列表中使用的專案符號-
disc
,預設 -
circle
,圓圈標記 -
square
,方塊標記 -
none
,刪除列表標記
-
定製列表標記
- 如果想定製列表的標記,可以用
list-style-image
為列表設定標記影像,如:
li{
list-style-image: url(images/backpack.gif);
padding-top: 5px;
margin-left: 20px;
}
- 對於有序列表也一樣,可以用
list-style-type
控制一個有序列表標記: -
decimal
,十進位制 -
upper-alpha
,大寫字母 -
lower-alpha
,小寫字母 -
upper-roman
,大寫羅馬數字 -
lower-roman
,小寫羅馬數字 - 列表項的專案符號的位置如何控制?用
list-style-position
,有兩個取值inside
(標記在列表項裡)和outside
(列表項外)。
區別如下:
其他屬性
left
指定一個元素的左邊所在位置
top
控制一個元素頂部的位置
background-image
在元素後面放置一個影像,如
background-image: url(images/background.gif);
//用url括起來,注意沒有引號
background-repeat
背景影像是否重複
- 預設在水平和垂直方向上重複
- 控制平鋪行為,no-repeat,repeat-x,repeat-y,inherit;
background-repeat: no-repeat;
background-position
背景影像的位置
- 可以按畫素指定,或百分數,還可以用關鍵字,如top,left,right,bottom和center
background-position: top left;
background-color
控制元素的背景顏色
text-align
對齊
- text-align會對塊元素中的所有內聯內容對齊,而不僅僅是文字
- text-align只能在塊元素上設定,對內聯元素無效
-
left
左對齊 -
center
居中 -
right
右對齊
letter-spacing
在字母之間設定間距
line-height
設定文字元素中的行間距
body {
font-size: small;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 1.6em; //調整為字型大小的1.6倍
}
- line-height元素有點特殊,可以對它直接使用一個數,而不是相對度量,代表各元素行高是其自己字型大小的多少倍
#elixirs {
line-height: 1;//代表elixirs中的所有元素的行間距為其自己字型大小的1倍
}
- 設定
line-height
為normal
,允許瀏覽器選擇一個適當的行高大小,通常根據字型來確定。
border-bottom
下邊框
- 下邊框會延伸到頁面邊緣,但是文字的underline屬性的下劃線只會出現在文字下面
- 1px solid black
width
指定元素寬度
- 寬度永遠是設定的值
- width屬性只指定內容區的寬度
- 要確定整個盒子的寬度,需要將內容區的寬度加上左和右內邊距,左右外邊距和邊框的寬度
- 一個塊的預設寬度為"auto",它會延伸佔滿可用的空間
- 如果使用百分數,那麼寬度會計算為元素所在容器寬度的一個百分比
- 高度也是預設的,也是"auto",一般,不用指定元素的高度,就讓它們預設為auto
a
元素和它的多重人格
- 頁面上的連結有多重顯示樣式,包括未訪問,已訪問或者處於懸停狀態等(還有focus和active),這裡需要用到偽類
- foucs是指瀏覽器將焦點放在你的連結上時就是焦點狀態,瀏覽器允許使用者按下tab鍵輪流訪問時,瀏覽器訪問到某個連結,某個連結就擁有了"焦點"
- active是指使用者第一次單擊一個連結時,就處於活動狀態。
- a元素可能同時處於多個狀態,一般認為適當的順序是link,visited,hover,focus,active - 例子:
a:link {
color: green;
}
a:visited {
color: red;
}
a:hover {
color: yellow;
}
偽類
- 上面的a:link,a:visited和a:hover就是偽類
- 它們都允許我指定樣式,就好像他們是類一樣,但是沒有人在html中真正輸入這些類
- 瀏覽器會仔細檢查所有a元素,把它們增加到正確的偽類中,如果一個連結已訪問過,會放到:visited類中,如果懸停,瀏覽器會把這個連結
扔到:hover偽類中。瀏覽器會在後臺向這些類增加和刪除元素. - 偽類不止能處理連結,還能對其他型別的元素提供處理,如first-child對應元素的第一個子元素。
佈局和定位
流
- 流:瀏覽器從html檔案最上面開始,從上到下沿著元素流逐個顯示所遇到的各個元素。
- 塊元素從上向下流,各元素之間有一個換行,內聯元素從左上方流向右下方,在水平方向上相互挨著擺放(只要右邊還有空間放的下)
- 文字是行內函數的特殊情況,瀏覽器會把它分解成適當大小的內聯元素,以適應給定的空間。
- 對於外邊距,瀏覽器並排放置兩個內聯元素時,外邊距會相加,但是當上下放置兩個塊元素時,會把它們共同的外邊距摺疊在一起,高度為最大的外邊距高度。
事實上只要兩個垂直外邊距碰到一起,它們就會摺疊,但是如果外面的元素有一個邊框,那麼兩個元素的外邊距就不會碰到一起,就不會摺疊
float
- float屬性首先儘可能遠地向左或向右浮動一個元素,然後在它下面的所有內容會繞流這個元素。
- 對於所有浮動元素都有一個要求:它必須有一個寬度。
- 浮動元素的外邊距不會摺疊,因為它只是浮在頁面上,注意到這一點可以避免常見css錯誤.
- 內聯元素也可以浮動,如浮動影像
- float屬性可以設定為left或right,不能是中間
#amazing {
width: 200px;
float: right;
}
- 下面看瀏覽器如何處理float(想象一下word的圖片浮動):
(1)首先,瀏覽器像往常一樣,正常將元素流入頁面,從最上面開始。
(2)瀏覽器遇到浮動元素時,會把它儘可能放在最右邊,還會從流中刪除這個段落,好像它浮在頁面上一樣。
(3)由於該浮動段落已經從正常的流中刪除,所以其他塊元素會填在這裡,就好像沒有這個段落一樣。
(4)對於內聯元素定位時,它們會考慮浮動元素的邊界,因此會繞著浮動元素。
clear
- 當元素流入頁面時,在這個元素左邊,右邊或兩邊不允許有浮動內容,例如為防止頁尾和右邊欄重疊,可以用clear設定:
#footer {
background-color: #675c47;
color: #efe5d0;
text-align: center;
padding: 15px;
margin: 10px;
font-size: 90%;
clear: right;
}
- 現在瀏覽器放置元素時會檢視右邊有沒有浮動元素,如果有就下移,直到沒有浮動元素為止。
兩欄效果
- 把sidebar放在頁首下面,然後用float將sidebar欄向右浮動,通過將main div的右外邊距設定得和sidebar的寬度相同,來建立兩欄效果,不過此時如果頁面太寬,頁尾會上移造成重疊問題,
這個問題可以在頁尾腫新增clear屬性解決。還有一個問題是因為我們把sidebar放在主要內容前,所以在小的移動裝置上會看到邊欄在最前面。 - 右緊左鬆,讓主內容向左浮動,設定仿照上面的。這樣div的順序是正確的,不過邊欄過於擴充套件不好,還是固定些好
- 使用絕對定位,類似浮動效果,當主內容區的垂直空間縮小,邊欄會向下覆蓋頁尾
- 使用css表格
流體與凍結設計
- 上面討論的都是流體佈局(liquid layouts),下面討論凍結佈局(frozen layouts),凍結佈局會鎖定元素,
如將body中的所有內容都放到一個id為#allcontent的div中
#allcontent {
width: 800px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #675c47;
}
那麼頁面的寬度將被限制為800px,無論瀏覽器寬度如何變化都不會移動,但這會導致瀏覽器很寬時,右邊有很多空白空間
凝膠布局 Jello
- 凝膠布局會鎖定頁面中內容區的寬度,不過會將它在瀏覽器中居中,將內容區的內外邊距設為auto即可,瀏覽器會確定正確的外邊距是多少,確保左和右外邊距相同,所以內容會居中,如下所示
#allcontent {
width: 800px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #675c47;
margin-left: auto;
margin-right: auto;
}
絕對定位
- 例如上面的邊欄,將邊欄絕對定位時,它會從流中刪除並根據制定的top,left,right或bottom屬性定位
- 由於邊欄在流之外,其他元素甚至不知道有這樣一個元素,它們會將它完全忽略,所以流中的內聯內容不會圍繞在一個絕對定位的元素周圍。
- 如將側邊欄絕對定位
#sidebar {
position: absolute;
top: 100px;
right: 200px;
width: 280px;
}
- 關於絕對定位還有一個分層放置的問題,一個元素可以放在另一個絕對定位元素上面,那如何分層?誰在上面?每個定位元素都有一個z-index的屬性,這會指定它在一個虛擬z軸上的位置(上面的元素“更靠近”你,z-index更大).
- 可以對任何元素指定絕對位置
- position的預設值為static,將元素放在正常的文件流中。position共有4個值:static,absolute,fixed和relative。fixed將元素放在相對於瀏覽器視窗(區別頁面)的一個位置上,固定元素永遠不會移動。relative讓元素正常流入頁面,不過在頁面上顯示之前要進行偏移。
- 絕對元素不必像浮動元素一樣指定寬度,不過預設會佔瀏覽器的整個寬度,所以如果要改變這種行為就要設定width屬性
- 指定元素位置還可以用百分數,相對於瀏覽器寬度.
css表格
- 類似電子表格,在表格中只放置塊元素,所以要把影像包圍在一個div中。
- 為整個表格建立一個div,然後為每一行分別建立一個div,對於每一列,只要在行div中放置一個塊級元素。
- 例如一行兩列的表格可以按如下方式建立:
<div id="tableContainer">
<div id="tableRow">
<div id="main">
...
</div>
<div id="sidebar">
...
</div>
</div>
</div>
- 對應的css為:
#tableContainer {
display: table;
border-spacing: 10px;//於是不再需要div中的外邊距
}
#tableRow {
display: table-row;
}
#main {
display: table-cell;
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
padding: 15px;
/*margin: 0px 10px 10px 10px;*/
vertical-align: top;//確保表格兩個單元格中的所有內容相對於單元格上邊對齊,預設為中間對齊,可以設定為top,middle,bottom
}
#sidebar {
display: table-cell;
background: #efe5d0 url(images/background.gif) bottom right;
font-size: 105%;
padding: 15px;
/*margin: 0px 10px 10px 10px;*/
vertical-align: top;
}
- 上面的border-spacing會在單元格之間增加10畫素空間,另外在邊界周圍也會增加10畫素空間,但是border-spacing和外邊距建立的空間不會摺疊!就會導致頁首和頁尾與兩列之間有20畫素的空間,如何修正?將頁首(頁尾)的下邊距(上邊距)設為0即可。
相關文章
- Head First HTML and CSS (八)HTMLCSS
- Head First HTML 與 CSS(第二版)學習筆記HTMLCSS筆記
- 《Head First Java》20201017讀書筆記Java筆記
- 《Head First Java》20200927讀書筆記Java筆記
- 《Head First Java》20201009讀書筆記Java筆記
- Head First設計模式讀書筆記設計模式筆記
- 《CSS揭祕》讀書筆記CSS筆記
- HTML/CSS基礎課程筆記————CSS結束篇HTMLCSS筆記
- HTML+CSS筆記HTMLCSS筆記
- 【HTML CSS】筆記9日HTMLCSS筆記
- html+CSS筆記(1)HTMLCSS筆記
- HTML/CSS篇HTMLCSS
- 讀“css世界”筆記CSS筆記
- html,css前端開發筆記HTMLCSS前端筆記
- html&css面試筆記HTMLCSS面試筆記
- html+css複習筆記HTMLCSS筆記
- HTML&CSS學習筆記HTMLCSS筆記
- Head First Java學習筆記(7):繼承與多型Java筆記繼承多型
- 《Head First Android》讀後感,電子書PDF下載Android
- 前端筆記之CSS(上)前端筆記CSS
- 《CSS重構:樣式表效能調優》讀書筆記CSS筆記
- 《讀書與做人》讀書筆記筆記
- CSS 小結筆記之emCSS筆記
- CSS 小結筆記之定位CSS筆記
- CSS 小結筆記之背景CSS筆記
- CSS 小結筆記之BFCCSS筆記
- html+css 佈局篇HTMLCSS
- 前端高頻筆試題之HTML/CSS部分前端筆試HTMLCSS
- HTML5與CSS3權威指南筆記案例1HTMLCSSS3筆記
- HTML5,CSS3,學習筆記HTMLCSSS3筆記
- 學習《HTML+CSS基礎課程》的筆記---第十五篇:CSS樣式設計小HTMLCSS筆記
- CSS筆記CSS筆記
- CSS學習筆記——傳統定位篇CSS筆記
- 《CSS世界》閱讀筆記,持續更新CSS筆記
- Html與css基礎知識介紹(必看篇)HTMLCSS
- CSS 小結筆記之浮動CSS筆記
- 學習《HTML+CSS基礎課程》的筆記---第一篇:Html介紹HTMLCSS筆記
- Head First C 電子書pdf下載
- CSS E::first-letterCSS