《HTML5權威指南》之使用盒模型

2021-08-07 09:25:49 字數 4687 閱讀 8919

屬性                      說明                      值

padding-top 為頂邊設定內邊距 長度值或者百分數

padding-right 為右邊設定內邊距 長度值或百分數

padding-bottom 為底邊設定內邊距 長度值或者百分數

padding-left 為左邊設定內邊距 長度值或者內邊距

padding 簡寫屬性

示例**:

如果需要設定簡寫屬性,可以設定乙個值,兩個值,四個值,乙個值表示,所有的內邊距一樣,如果設定兩個值,說明頂邊內邊距和底邊內邊距是一樣的,左邊和右邊的內邊距是一樣的。

外邊距是元素邊框和頁面上圍繞在它周圍的所有東西之間的空白區域。圍繞在它周圍的東西包括其他元素和它的父元素。

下面說明控制外邊距的屬性:

屬性              說明                      值   

margin-top 為頂邊設定外邊距 長度值或者百分數

margin-right 為右邊設定外邊距 長度值或者百分數

margin-bottom 為底邊設定外邊距 長度值或者百分數

margin 簡寫屬性

示例**:

屬性                      說明                              值

width 設定元素的高度和寬度 auto,長度值或百分數

height

min-width 為元素設定最小可接受寬度和高度 auto,長度值或百分數

min-height

max-width 為元素設定最大可接受的寬度和高度 auto,長度值或百分數

max-height

box-sizing 設定尺寸調整應用元素盒子的哪一部分 content-box,padding-box,border-box,margin-box

前三個屬性值都是auto。

示例**:

head內結構:body內結構:

其中div元素設定為75%,意思是將div元素的寬度設定為其所在父元素的寬度的75%。

3.1.設定最小和最大尺寸

上述**使img元素的寬度為其父元素的50%,但是最大不超過200px,至少為100px。

4.處理溢位內容

如果我們固定元素的尺寸,可能會存在溢位的問題,這時可以使用overflow屬性來處理溢位的內容,說明如下:

屬性              說明

overflow-x 設定水平方向和垂直方向水平溢位的方式

overflow-y

overflow 簡寫屬性

下面說明了這三個屬性的取值說明:

值           說明

auto 瀏覽器自行處理溢位內容,通常,如果內容被剪掉就顯示滾動條,否則就不顯示

hidden 多餘的部分直接剪掉,只顯示內容盒裡面的內容

no-content 如果內容無法全部顯示,則全部移除

no-display 如果內容無法全部顯示,則隱藏全部內容

scroll 為了讓使用者看到內容,瀏覽器會新增滾動機制

visible 預設值,不管是否溢位,都顯示元素內容

可以通過屬性visibility屬性控制元素的可見性,具體說明如下:

值               說明

collapse 元素不可見,且在頁面布局中不佔據空間

hidden 元素不可見,但在頁面中佔據空間

visible 預設值,元素在頁面上可見

display屬性提供了一種改變元素盒型別的方式,這會相應改變元素在頁面上的布局方式。下表顯示的是display允許的值:

值               說明

inline 盒子顯示為文字行中的字

block 盒子顯示為段落

inline-block 盒子顯示為文字行

list-item 顯示為列表項,通常具有專案符號或者其他標記符號

run-in 盒子型別取決於周圍的元素

compact 盒子的型別為塊或者標記盒(跟list-item型別產生的類似)

flexbox 這個值跟彈性盒布局有關

table 這些值跟**中的元素布局有關

inline-table

table-row-group

table-header-group

table-footer-group

table-row

table-column-group

table-column

table-cell

table-caption

ruby 這些值跟ruby注釋的文字有關

ruby-base

ruby-text

ruby-base-group

ruby-text-group

none 元素不可見,且在頁面布局中不佔空間

6.1.認識塊級元素

將display屬性設定為block會建立乙個塊級元素,塊級元素可以理解為在該元素前後都放置了換行符。自成一段。

示例**如下:

6.2.認識行內元素

將display屬性設定為inline會建立乙個行內元素,它在視覺上跟周圍元素沒啥區別,行內元素可以理解為將該元素的左右兩邊挨著其他元素,不用另起一段。

示例**:

p元素在正常情況下是會另起一段,然而上面的p元素不會另起一段,緊挨著其他元素。

6.3.認識行內塊級元素

將display設定為inline-block值會建立乙個其特徵混合了塊和行內元素的元素,具體來說,它具有塊元素的特徵,比如height,width,padding等,又具有行內元素的特徵,即不會另起一段。

示例**:

6.4.認識插入元素

display屬性值為run-in會建立乙個這樣的元素: 其盒子的型別取決於周圍的元素,通常瀏覽器會應對以下三種情況:

這裡對第二個情況進行說明一下:

body內結構:

content1

content2

顯示的結果是span元素內容緊挨著p元素內容,span元素作為行內元素處理。

body內結構:

content1

content2

顯示結果是span元素和p元素各另起一段,span元素作為塊元素處理

6.5.隱藏元素

將display元素屬性值設定為none,就是不為元素建立任何型別的盒子,這時元素在頁面內不佔據任何空間。

可以使用float屬性建立浮動盒,浮動盒將元素的左邊界或者右邊界移動到包含塊或者另乙個浮動盒的邊界。下面總結資格屬性:

屬性              說明                      值

float 設定元素的浮動樣式 left,right,none

對值進行說明:

值               說明

left 移動元素,使其左邊界挨著包含塊的左邊界,或者是另乙個浮動元素的右邊界

right 移動元素,使其右邊界挨著包含塊的右邊界,或者是另乙個浮動元素的左邊界

none 元素位置固定

如果設定多個浮動元素,它們會乙個挨著乙個堆疊在一起。如果不想讓元素堆疊在一起,那麼可以使用clear屬性。值說明如下:

值           說明

left 元素的左邊界不能挨著另乙個浮動元素

right 元素的右邊界不能挨著另乙個浮動元素

both 元素的左右邊界都不能挨著另外的浮動元素

none 元素的左右邊界可以挨著另外的浮動元素

示例**:

HTML5權威指南 使用window物件

下面是window.history的物件和方法 1.在瀏覽歷史中導航 window.history.back 後退 window.history.forward 前進 window.history.go 以當前頁為基準想到哪就到哪 2.在瀏覽歷史中插入條目 3.為不同的文件新增條目 window.h...

HTML5權威指南 建立布局

值 說明static 預設值,普通布局 relative 元素位置相對於static定位 absolute 元素相對於position值不為static的第一位祖先元素定位 fixed 元素相對於瀏覽器視窗定位 跟報紙的排版一樣 果然如同報紙一樣!書中寫的已經有些過時了。我就找一些資料按照書上的思路...

html5權威指南 標記文字

html5權威指南 第八章 用基本的文字元素標記內容 html5權威指南 第八章 標記文字 通用容器 p some span text span p 強調重要 i am very worried warning 表示不同情緒或聲音的文字,如內心對白 表示外來語 分類學名和技術術語等 fr oh la...