心智圖資源庫 CSS前端HTML基礎課程訓練方案
CSS前端HTML基礎課程訓練方案、一個網頁有三個部分組成、結構是頁面的整體結構,哪裡是標題,哪裡是段落,哪裡是圖片、結構使用HTML來編寫、表現是頁面的外在的樣式,例如字體,字體大小,字體顏色,背景。
編輯於2022-11-08 10:53:34This is a mind map about bacteria, and its main contents include: overview, morphology, types, structure, reproduction, distribution, application, and expansion. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about plant asexual reproduction, and its main contents include: concept, spore reproduction, vegetative reproduction, tissue culture, and buds. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about the reproductive development of animals, and its main contents include: insects, frogs, birds, sexual reproduction, and asexual reproduction. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about bacteria, and its main contents include: overview, morphology, types, structure, reproduction, distribution, application, and expansion. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about plant asexual reproduction, and its main contents include: concept, spore reproduction, vegetative reproduction, tissue culture, and buds. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about the reproductive development of animals, and its main contents include: insects, frogs, birds, sexual reproduction, and asexual reproduction. The summary is comprehensive and meticulous, suitable as review materials.
CSS前端HTML基礎課程訓練方案
CSS
CSS叫做層疊樣式表,用來設定頁面中元素的樣式。背景顏色、字體顏色、字體大小。 。 。
CSS負責結構、表現、行為中的表現
編寫的位置
1.內聯樣式
將樣式編寫到標籤的style屬性中
這種樣式只會對目前標籤起作用,無法對樣式進行重複使用,不方便後期維護,不建議使用
2.內部樣式表
將樣式表編寫到head中的style標籤中
使用內部樣式表,進一步將表現和結構分離,可以同時為多個元素設定樣式,方便後期的維護
3.外部樣式表
將樣式表編寫到外部的CSS檔案中,然後透過link標籤將外部文件引入
將樣式編寫到外部樣式表中,可以在不同的頁面中使用同一個樣式表,完全將表現和結構分離,方便後期的維護,建議使用的方式
基本文法
選擇器
透過選擇器可以選取頁面中的一組元素,然後為其設定樣式
元素選擇器
根據標籤名,選取頁面中的指定元素
語法:標籤名{ }
例子:
div{}
p{}
h1{}
id選擇器
根據元素的id屬性值選取一個唯一的元素
語法:#id {}
例子:
#box1{}
#hello{}
類別選擇器
根據元素的class屬性值,選取一組元素
語法:.class{}
例子:
.hello{}
.box{}
通配選擇器
選取頁面中的所有元素
文法:*{}
通配選擇器的性能比較差,盡量避免使用
並集選擇器
可以同時選取符合多個選擇器的元素
語法:選擇器1,選擇器2,選擇器N{}
例子:
div,p,#box,.hello{}
交集選擇器
可以選取滿足多個條件的元素
語法:選擇器1選擇器2選擇器N{}
例:p.hello{}
後代元素選擇器
選取指定元素的指定後代元素
語法:祖先元素 後代元素{}
例子:
div span {}
div p{}
子元素選擇器
選取指定元素的指定子元素
語法:父元素 > 子元素 {}
例子:
div > span {}
div > p{}
聲明區塊
聲明區塊中其實就是一個CSS聲明
聲明
每一個CSS宣告都是一個樣式,其實就是一個名值對的結構
名和值之間使用:鏈接
:左邊是樣式的名字
:右邊是樣式的值
每一個聲明以;結尾
例子
color:red;
font-size:20px;
元素之間的關係
父元素
直接包含子元素的的元素叫做父元素
子元素
直接被父元素包含的元素叫做子元素
祖先元素
直接或間接包含後代元素的元素叫做祖先元素,父元素也是祖先元素
後代元素
直接或間接被祖先元素包含的元素叫後代元素,子元素也是後代元素
兄弟元素
擁有相同父元素的元素叫做兄弟元素
塊元素和內聯元素
塊元素
塊元素會獨佔頁面中的一行,無論他的內容的多寡
一般會使用區塊元素對頁面進行佈局
常見的塊元素
div
p
h1~h6
內聯元素
內嵌元素只佔用自身的大小,不會獨佔一行
內聯元素也叫行內元素(inline)
一般內嵌元素都是用來為文字來設定效果
常見的內聯
span
a
img
包裹規則
一般都是使用區塊元素去包裹內聯元素,而不會使用內聯去包裹塊元素
a元素可以包含任意元素,除了a本身
p元素不能包含任何區塊元素
偽類和偽元素
偽類和偽元素用來表示元素所處的一個特殊的狀態,或是一個特殊的位置
:link
表示一個普通的連結(未造訪過的連結)
:visited
表示訪問過的連結
:hover
滑鼠移入的鏈接,也可以為其他元素設定hover
:active
正在被點擊的鏈接,也可以為其他元素設定active
:focus
表示元素獲取焦點的狀態,一般用於文字框
::selection
表示內容被選取的狀態
在火狐中使用::-moz-selection來代替
:first-letter
表示第一個字符
:first-line
表示文字的第一行
:before
選取元素的最前邊
一般偽類都會結合content一起使用,透過content可以新增內容
:after
選取元素的最後邊
一般偽類都會結合content一起使用,透過content可以新增內容
屬性選擇器
根據元素的屬性選擇指定元素
[屬性名]
選取含有指定屬性的元素
[屬性名="屬性值"]
選取屬性值等於指定值的元素
[屬性名^="屬性值"]
選取屬性值以指定內容開頭的元素
[屬性名$="屬性值"]
選取屬性值以指定內容結尾的元素
[屬性名*="屬性值"]
選取屬性值中包含指定內容的元素
兄弟元素選擇器
選取後一個兄弟元素
前一個 後一個
選取後邊所有的兄弟元素
前一個 ~ 後邊所有
子元素的偽類
:first-child
尋找父元素的第一個子元素,在所有的子元素中排序
:last-child
尋找父元素的最後一個子元素,在所有的子元素中排序
:nth-child
尋找父元素中的指定位置子元素,在所有的子元素中排序
例子
p:nth-child(3)
可以使用even,來找出偶數的子元素
可以使用odd,來找出奇數的子元素
:first-of-type
尋找指定類型中的第一個子元素
:last-of-type
尋找指定類型中的最後一個子元素
:nth-of-type
尋找指定類型中的指定子元素
否定偽類
從一組元素中將符合要求的元素剔除出去
文法:
:not(選擇器)
例子:
.abc:not(div)
樣式的繼承
為祖先元素設定樣式,會同時套用到它的後代元素上,這項特性稱為樣式的繼承。
透過樣式的繼承可以將一些樣式統一設定個祖先元素,這樣所有的後代都會套用到相同的樣式。
但並不是所有的樣式都會繼承,例如:背景相關的,邊框相關的,定位相關的。具體參考文檔
選擇器的優先權
當使用選擇器為元素設定樣式時,如果樣式發生了衝突,則採用哪個樣式由選擇器的優先權來決定。
優先權
內聯樣式
1000
id選擇器
100
類別和偽類選擇器
10
元素選擇器
1
通配選擇器
0
繼承的樣式
沒有優先級
當樣式發生衝突時,需要將相關的選擇器優先權進行求和計算,優先權高的優先顯示,如果優先權一樣,則顯示靠後的樣式
優先級計算時,總大小不能超過他的最大的數量級
可以在樣式後邊添加一個!important,如果樣式中添加了該內容,則該樣式將會獲取最大的優先級,將會優先於所有的樣式顯示,包括內聯樣式,但是這個屬性要慎用。
選擇器的性能
瀏覽器在解析一組選擇器時,是從後邊往前一個一個的解析的
如果選擇器寫太長的話,瀏覽器解析起來效能會比較差,所以在寫選擇器時,越短越好。
*通配選擇器,性能也比較差,要避免使用通配選擇器
單位
長度單位
px
像素,像素就是構成一個圖片的最小的單位,我們的螢幕就是由一個一個像素點構成
一個像素指的就是一個像素點
在不同的顯示器中,一個像素的大小是不同的,越清晰的螢幕像素越小
%
可以將一個元素的樣式值設定為一個百分比的值,這樣瀏覽器就會根據父元素的值去計算出對應的值
當父元素的值改變時,子元素的值會依照一定比例一起改變,經常用於自適應的頁面
em
em會相對於目前元素的字體大小來計算
1em = 1font-size
em經常用於設定文字相關的一些樣式,因為當文字大小改變時,em會隨之改變
顏色單位
顏色單字
直接使用英文單字來表示顏色
red green blue orange
RGB值
所謂RGB值就是透過紅 綠 藍三元色的不同組合來搭配出各種不同的顏色
文法:
rgb(紅色,綠色,藍色)
這三個值需要一個0-255之間的值
0表示沒有
255表示最大
rgb(50,200,30)
也可以使用百分數來設定RGB值,需要0%-100%之間的值
百分數最終也是轉換為0-255的
0%相當於0
100%相當於255
rgb(100%,0%,0%)
十六進位RGB值
也是一種RGB值的表示方式,不同的是它使用的是16進制數字來表示而不是10進制
文法:
#紅色綠色藍色
這裡的顏色需要一個00-ff之間的值
例子:
#ff0000
如果顏色的是兩位兩位重複的,可以進行簡寫
例如 #aabbcc 可以寫成 #abc
例如 #bbffaa 可以寫成 #bfa
文字樣式
字體
color
字體的顏色
font-size
字體的大小
瀏覽器中預設的字體大小一般都是16px,而我們開發時一般會統一為12px
font-family
設定文字的字體
font-style
設定斜體
font-weight
設定文字的加粗
font-variant
小型大寫字母
font
文字的簡寫屬性
可以同時設定所有的字體相關的樣式
文法:
font: [加粗 斜體 小大字母] 大小[/行高] 字體
加粗,斜體,小大字母,順序無所謂,寫不寫都行,如果不寫在使用預設值
文字大小,和字體必須寫,大小必須是倒數第二個,字體必須是最後一個
大小後可設定行高,可寫可不寫,不寫則使用預設值
文字樣式
line-height
行高
文字預設都是在行高中垂直居中的
透過line-height可以修改行高
行間距 = 行高 - 字體大小
text-transform
設定文字的大小寫
text-decoration
設定文字修飾
text-align
設定文字對齊
text-indent
設定首行縮排
它需要一個長度單位,如果是正值則首行向右移動,如果是負值則向左移動
letter-spacing
字元間距
word-spacing
單字間距
背景
background-color
背景顏色
background-image
背景圖片
需要一個url地址作為參數
範例:background-image:url(圖片的路徑)
background-repeat
設定背景圖片重複方式
可選值:
repeat
預設值,背景圖片會平鋪顯示
沿x軸和y軸雙方重複
no-repeat
背景圖片不重複
repeat-x
背景圖片沿水平方向重複
repeat-y
背景圖片沿垂直方向重複
background-position
設定背景圖片的位置
設定方式一
可以直接透過幾個位置的關鍵字來設定圖片的位置
top
left
right
bottom
center
可以透過以上關鍵字兩兩組合的形式,將背景圖片設定到元素的任何位置
如果僅指定一個值,則第二個值預設是center
設定方式二
可以直接指定兩個值,來設定背景圖片的偏移量
例子:
background-position : x軸偏移量 y軸偏移量;
x軸偏移量,用來指定圖片的水平位置
如果指定一個正值,則圖片向右移動
如果指定一個負值,則圖片向左移動
y軸偏移量,用來指定圖片的垂直位置
如果指定一個正值,則圖片向下移動
如果指定一個負值,則圖片向上移動
background-attachment
用來設定背景是否隨頁面捲動
可選值
scroll
預設值,背景圖片會隨頁面一起捲動
fixed
背景圖片不隨頁面捲動,會固定在頁面的指定位置
設定該屬性的背景,背景會永遠相對於瀏覽器視窗進行定位
一般這種背景都會設定給body
background
背景的簡寫屬性
可以透過它來設定所有的背景相關的樣式
這個簡寫屬性沒有順序的要求,也沒有數量的要求,不寫的屬性使用預設值
opacity
用來設定背景的不透明度
可選值
0-1
0表示完全透明
1表示完全不透明
0.5半透明
IE8及以下的瀏覽器不支援該樣式,可以使用濾鏡來代替
filter:alpha(opacity=值)
這裡值需要一個0-100之間的值
0相當於完全透明
100完全不透明
HTML
網頁的結構
一個網頁有三個部分組成
結構
結構是頁面的整體結構,哪裡是標題,哪裡是段落,哪裡是圖片
結構使用HTML來編寫
表現
表現是頁面的外在的樣式,例如字體,字體大小,字體顏色,背景。 。 。
使用CSS來設定頁面中元素的樣式
行為
頁面與使用者之間的互動行為
使用JavaScript來設定頁面的行為
一個設計優良的網頁要求結構、表現、行為三者分離
在開發中總是要面臨一個問題,就是程式之間的耦合,三者分離就是要了解耦合
HTML,超文本標記語言
負責頁面中的結構,定義出頁面中的各個組成部分
HTML是採用純文字的形式的編寫,採用HTML標籤來識別頁面中的不同部分
標籤
成對出現
自結束標籤
屬性
透過屬性可以設定標籤的效果
屬性需要定義在開始標籤或這自結束標籤中
屬性其實是一組一組名值對結構
例子:
HTML頁面的基本結構
文件聲明
用來標識目前頁面的html的版本
該聲明用來告訴瀏覽器,目前的頁面是使用HTML5的標準編寫的
常用標籤
網頁的根標籤
一個頁面中有且只有一個根標籤
網頁中的所有內容都需要寫在html標籤的內部
網頁的頭部
該標籤中的內容不會在網頁中直接顯示
此標籤用於幫助瀏覽器解析頁面
子標籤
用來設定網頁的標題
預設會在瀏覽器的標題列中顯示
搜尋引擎檢索網頁時,會主要檢索title中的內容,它會影響到頁面在搜尋引擎中的排名
用來設定網頁的元數據,例如網頁使用的字元集
設定網頁的關鍵字
設定網頁的描述
請求的重定向
網頁的主體
網頁中所有的可見部分都需要在body中編寫
~
標題標籤
在html中一共有六級標題
在六級標題中,h1最重要,h6最不重要,一般頁面只會使用h1~h3
h1的重要性僅次於title,瀏覽器也會主要檢索h1中的內容,以判斷頁面的主要內容
一般一個頁面只能寫一個h1
段落標籤
換行標籤
水平線標籤
內聯框架
可以向一個頁面中引入其他的外部頁面
屬性
src
外部頁面的位址,可以使用相對路徑
width和height
可以設定框架的寬度和高度
name
可以為內聯框架指定一個名字
可以將該屬性值設定為超連結的target屬性的值
這樣當點擊超連結時,頁面將會在對應的內聯框架中打開
內嵌框架中的內容不會被搜尋引擎檢索,所以開發中盡量不要使用內嵌框架
超連結
可以使目前頁面跳到其他的頁面
<a>連結的文字</a>
屬性
href
指向連結跳轉的目標位址,可以是相對路徑
還可以是#id屬性值,這樣當點擊超連結以後,就會跳到目前頁面的指定位置
可以使用mailto:來建立一個發送電子郵件的超鏈接
target
指定在哪個視窗中開啟鏈接
可選值
_self
預設值,預設在目前視窗開啟鏈接
_blank
在新視窗中開啟鏈接
內聯框架的name屬性值
在指定的內聯框架中開啟鏈接
註解
文法
註解中的內容不會在頁面中顯示,但會在原始碼中顯示,我們可以透過註解來說明網頁的程式碼
也可以透過註解隱藏一些頁面中不想顯示的內容
實體
在HTML頁中一些特殊符號是不能直接使用,需要使用實體來取代這些特殊符號
實體也可以稱為轉義字符
實體的語法
&實體名;
常用的實體
空格
<
>
>
版權符號
©
圖片標籤
<img />
使用圖片標籤可以向頁面中引入一個外部圖片
屬性
src
指向一個外部圖片的路徑,可以使用相對路徑
alt
指定圖片無法載入時對圖片的描述
搜尋引擎主要透過該屬性來識別圖片的內容
如果不寫該屬性則搜尋引擎會對圖片進行收錄
width
設定圖片的寬度
height
設定圖片的高度
圖片的格式
JPEG
色彩豐富的圖片,如,照片
GIF
顏色單一,簡單透明的圖片,動態圖
PNG
色彩豐富,複雜透明的圖片
圖片選擇的原則
效果一致,用小的
效果不一致,用效果好的
相對路徑
相對於目前資源所在的目錄的路徑
可以使用../返回一級目錄,返回幾個等級使用幾個../
xHtml語法規範
1.HTML中不區分大小寫,但盡量使用小寫
2.HTML的註解不能嵌套
3.標籤必須結構完整
要么成對出現
要么自結束標籤
4.標籤可以嵌套但是不能交叉嵌套
5.屬性必須有值,且值必須加引號,單引號雙引號都可以
文字標籤
表示語氣上的強調
表示內容的重要性
表示單純的斜體
表示單純的加粗
表示細則一類的內容
表示參考的內容,凡是加書名號的都可以使用cite
短引用,行內引用
長引用,區塊級引用
上標
下標
刪除的內容
插入的內容
預格式標籤,可以保留程式碼中空格換行這些格式
表示程式碼
清單
無序列表
使用ul來建立一個無序列表,在列表中使用li來表示一個列表項
無序列表使用符號作為項目符號
有序列表
使用ol來建立一個無序列表,在列表中使用li來表示一個列表項
使用有序的序號作為項目符號
定義清單
列表相關的元素都是塊元素,他們之間可以互相嵌套
去除項目符號
list-style:none
佈局
浮動
使用float來設定元素浮動
可選值
none
預設值,不浮動,元素在文檔流中
left
元素向左浮動
right
元素向右浮動
特點
1.元素浮動以後會完全脫離文檔流
2.浮動以後元素會一直往父元素的最上方移動
3.直到遇到父元素的邊框或其他的浮動元素,會停止移動
4.如果浮動元素的上邊是一個塊元素,則浮動元素不會覆蓋塊元素
5.浮動元素不會超過他上邊的浮動的兄弟元素,最多一邊齊
6.浮動元素不會覆蓋文字,文字會自動環繞在浮動元素的周圍,可以透過浮動來實現文字環繞的效果
浮動以後元素的特點
元素浮動以後,會使其完全脫離文件流。
塊元素
區塊元素脫離文檔流以後
1.不會獨佔一行
2.寬度和高度都被內容撐開
內聯元素
內聯元素脫離文檔流以後會變成區塊元素
高度塌陷
父元素在文件流中高度預設是被子元素撐開的,當子元素脫離文檔流以後,將無法撐起父元素的高度,也會導致父元素的高度塌陷
父元素的高度一旦塌陷所有元素的位置將會上移,導致整個頁面的佈局混亂
方法一
開啟父元素的BFC或hasLayout
BFC
Block Formatting Context
區塊級格式化環境
BFC是元素的隱含屬性,預設是在關閉狀態的
可以透過一些特殊的樣式,來開啟BFC
開啟BFC以後元素將會具有下列特性
1.父元素的垂直外邊距不會與子元素重疊
2.開啟BFC的元素不會被浮動元素所覆蓋
3.開啟BFC的元素可以包含浮動子元素
開啟BFC的方式
1.設定元素浮動
2.設定元素絕對定位
3.設定元素的類型為inline-block
4.設定overflow為非預設值
一般都是使用overflow:hidden來開啟BFC
hasLayout
在IE6中沒有BFC,但是有一個和BFC類似的hasLayout
在IE6中可以透過開啟hasLayout來解決高度塌陷的問題
副作用最小的開啟方式
zoom:1
當為元素設定寬度非預設值時,會自動開啟hasLayout
方法二
在塌陷的父元素的最後添加一個空白的div,然後對該div進行清除浮動
使用這種方式會在頁面中添加多餘的結構
方法三
使用after偽類,在父元素後面加上一個區塊元素,並對其清除浮動
該種方式的原理和方法二原理一樣,但是不用在頁面中加入對於的結構
定位
透過定位可以將頁面中的元素,擺放到頁面的任意位置
使用position來設定元素的定位
可選值
static
預設值,元素沒有開啟定位
relative
開啟元素的相對定位
absolute
開啟元素的絕對定位
fixed
開啟元素的固定定位
相對定位
1.開啟元素的相對定位後,如果不設定偏移量元素不會有任何變化
2.相對定位元素相對於其自身在文檔流程中的位置來定位
3.相對定位的元素不會脫離文檔流
4.相對定位不會改變元素的性質,塊元素還是塊元素,內聯元素還是內聯元素
5.相對定位的元素會提升一個層級
絕對定位
1.元素設定絕對定位以後,如果不設定偏移量,元素的位置不會改變
2.絕對定位的元素是相對於距離他最近的開啟了定位的祖先元素進行定位,如果所有的祖先元素都沒開啟定位,則相對於瀏覽器視窗進行定位。
3.絕對定位的元素會完全脫離文檔流
4.絕對定位會改變元素的性質。內嵌變塊,塊的高度和寬度都被內容撐開,不獨佔一行
5.絕對定位會使元素提升一個層級
固定定位
固定定位是一種特殊的絕對定位,它的特色大部分都和絕對定位一樣
不同的是,固定定位的元素永遠都是相對於瀏覽器視窗進行定位的。而他不會隨捲軸滾動
IE6不支援固定定位
層級
定位元素 > 浮動元素 > 文檔流程中的元素
當元素開啟了定位以後,可以透過z-index來設定元素的層級
z-index值越高元素越優先顯示
如果z-index值一樣,或都沒有z-index則優先顯示下邊的元素
父元素永遠不會蓋住子元素
偏移量
當元素開啟了定位以後,可以透過偏移量來設定元素的位置
left
元素距離定位位置的左側距離
top
元素距離定位位置的上邊距離
right
元素距離定位位置的右側距離
bottom
元素距離定位位置的底部距離
一般情況下,只使用兩個值即可定義一個元素的位置。
課程簡介
軟體的架構
C/S,客戶端/伺服器
1.一般我們使用的軟體都是C/S架構
2.如係統的中的軟體QQ、360、office、XMind
3.C表示客戶端,使用者透過客戶端來使用軟體
4.S表示伺服器,伺服器負責處理軟體的業務邏輯
特點
1.軟體使用前必須要安裝
2.軟體更新時,伺服器和客戶端得同時更新
3.C/S架構的軟體不能跨平台使用
4.C/S架構的軟體客戶端和伺服器通訊採用的是自有協議,相對來說比較安全
B/S,瀏覽器/伺服器
1.B/S本質上也是C/S,只不過B/S架構的軟體,使用瀏覽器作為軟體的客戶端
2.B/S架構軟體透過使用瀏覽器存取網頁的形式,來使用軟體
3.例如:京東 淘寶 12306 知乎 新浪微博
特點
1.軟體不需要安裝,直接使用瀏覽器存取指定的網址即可
2.軟體更新時,客戶端不需要更新
3.軟體可以跨平台,只要係統中有瀏覽器,就可以使用
4.B/S架構的軟體,客戶端和伺服器之間通訊採用的是通用的HTTP協議,相對來說不安全
進位
幾進制就是滿幾進一
二進位
0 1
10 11 100 101 110 111
十進位
0 1 2 3 4 5 6 7 8 9
10 11 12 13 14 。 。 。
十六進位
滿16進1
0 1 2 3 4 5 6 。 。 。 9 a b c d e f
10 11 12 ... 19 1a 1b 1c 1d 1e 1f
16進位由於是滿16進1,所以必須設定幾個特殊的字元來表示10 11 12 13 14 15
使用a b c d e f分別表示10 11 12 13 14 15
八進位
滿8進1
0 1 2 3 4 5 6 7
10 11 12 13 14 15 16 17 20 21 22
亂碼的問題
亂碼出現的原因
計算機是一個非常笨的機器,它只認識兩個東西 0 1
在電腦中保存的任何內容,最終都需要轉換為0 1這種二進位編碼來保存,包括網頁中的內容
例如:中國,在電腦底層,可以能需要轉換為 1010001001010101011010
在讀取內容時,需要將二進位編碼,在轉換為正確的內容
編碼
依據一定的規則,將字元轉換為二進位編碼的過程
解碼
依據一定的規則,將二進位編碼轉換為字元的過程
字元集
編碼和解碼所採用的規則,我們稱為字元集
常見的字符集
ASCII
ISO-8859-1
GBK
GB2312
中文系統的預設編碼
UTF-8
萬國碼,支援地球上所有的文字
ANSI
自動以系統的預設編碼來儲存文件
產生亂碼的根本原因是,編碼和解碼採用的字元集不同
在中文系統的瀏覽器中,預設都是使用GB2312進行解碼的
盒子模型
CSS中將每個元素都設定為了一個矩形的盒子
將所有的元素都設為盒子,是為了方便頁面的佈局
當這些元素都是盒子以後,我們的佈局就變成了在頁面中擺放盒子
盒子模型
每個盒子都由下幾個部分構成
內容區
內容區相當於盒子放東西的空間
內容區在盒子的最裡邊
元素的所有的子元素都是放在父元素的內容區
內容區設定
width
內容區的寬度
height
內容區的高度
內邊距
內邊距指的是內容區和邊框的距離,內邊距會影響盒子的大小
盒子中一共有四個方向的內邊距
padding-top
padding-right
padding-bottom
padding-left
padding
可以同時設定四個方向的內邊距,規則和border-width一致
padding:上 右 下 左
padding:上 左右 下
padding:上下 左右
padding:上下左右
盒子的可見框大小由內容區、內邊距和邊框共同決定
邊框
邊框盒子可見框最外側,邊框是盒子的邊緣
設定邊框
設定邊框需同時設定三個樣式,缺一不可
border-width
邊框的寬度
可以同時指定四個邊框的寬度,也可以分別指定
規則
四個值
border-width : 10px 20px 30px 40px;
border-width : 上 右 下 左;
三個值
border-width : 10px 20px 30px;
border-width : 上 左右 下 ;
兩個值
border-width : 10px 20px;
border-width : 上下 左右 ;
一個值
border-width : 10px;
border-width : 上下左右 ;
border-color
邊框的顏色
border-style
邊框的樣式
除了這三個樣式,CSS中也提供了
border-xxx-width
border-xxx-color
border-xxx-style
xxx可以是
top
right
bottom
left
透過這些樣式可以單獨指定四個邊的顏色,寬度和樣式
邊框的簡寫屬性
border
border-left
border-top
border-right
border-bottom
這個幾個屬性可以同時設定邊框相關的樣式
border可以同時設定四個邊的顏色,寬度,樣式
border-xxx可以單獨設定某一個邊
規則
使用這些樣式可以同時設定border-width border-style border-color,不同的屬性使用空格隔開,並且沒有順序要求
外邊距
外邊距盒子和其他盒子之間的距離,外邊距不會影響可見框的大小,但會影響盒子的位置
也是具有四個方向的外邊距
margin-top
margin-right
margin-bottom
margin-left
簡寫屬性
margin
規則和padding一致
margin值
可以設定為auto
如果單獨將左右外邊距設為auto,則會將左或右外邊距設定為最大值
如果同時將左右外邊距設為auto,則會將左右外邊距設定為一個相等的值,以這種方式使一個子元素在它的父元素中水平居中
margin:0 auto
可以設定為負值
如果將margin設定為負值,則元素會朝相反的方向移動
外邊距的重疊
相鄰的垂直外邊距會發生重疊現象
相鄰元素的外邊距會取最大值
子元素的外邊距會傳遞給父元素
水平外邊距不會重疊,而是取和
內嵌元素的盒子模型
width
height
不支援
padding
支援水平方向的padding
垂直方向的padding也支持,但是不會影響佈局
border
支援四個方向邊框,但是垂直的邊框不會影響佈局
margin
支援水平方向外邊距
不支援垂直方向的
盒模型相關的樣式
display
設定元素的顯示類型
可選值
none
元素不會在頁面中顯示,也不會佔據頁面的位置
block
元素會作為區塊元素顯示
inline
元素會作為內聯元素顯示
inline-block
元素會作為行內塊元素顯示
既具有內聯元素的特點也具有塊元素的特點
不獨佔一行
可以設定寬高
visibility
設定元素是否在頁面中顯示
可選值
visible
預設值,元素在頁面中正常顯示
hidden
元素不在頁面中顯示,但是依然在頁面中佔據位置
overflow
設定元素如何處理溢出內容
可選值
visible
預設值,不會處理溢出的內容,在父元素以外的地方顯示
hidden
溢出的內容會被隱藏不會顯示
scroll
在父元素中同時加入水平和垂直方向的捲軸
不內容是否溢出都會添加捲軸
auto
根據需要自動產生捲軸
文件流程
文檔流程指的是網頁中的一個位置
文檔流是網頁的基礎,是網頁的最底層,所有的元素預設都是在文檔流中排列
元素在文件流中預設自左向右,自上向下排列(和我們的書寫習慣一致)
塊元素
1.區塊元素在文檔流程中自上向下排列
2.塊元素在文檔流中寬度預設是父元素的100%
3.區塊元素在文件流程中高度預設被內容撐開
內聯元素
1.內聯元素在文件流中自左向右排列,如果一行中不足以容下所有的內聯元素,則換到下一行,繼續自左至右排列
2.內嵌元素在文件流程中寬度和高度預設都會被內容撐開