C1認證學習二十三、二十四、二十五（塊級元素與行内元素、定位、浮動）

二十三

任務背景

HTML中元素大多數是塊級元素或者是行内元素，浏覽器在顯示頁面的時候，對這兩類元素的預設處理方法是不一樣的。

任務目标

1、了解塊級元素以及行内元素的差別

2、掌握塊級元素以及行内元素的轉換方法

塊級元素

在浏覽器中總是獨占一行

寬高、内外邊距可以控制，而且上下左右的外邊距均可以對周圍的元素産生影響

可以包含内容、行内元素以及其他塊級元素

寬度未設定的時候預設為父級元素的寬度，高度未設定的時候是内容的高度

常見的快有：

div、form、footer、h1-h6、ol、ul、p、video

設定display屬性是display：block可以将元素轉換為塊級元素。

行内元素

不獨占一行

寬高、上下邊距不可以控制，僅有左右的邊距可以控制而且會對周圍的元素産生影響

一般隻能包含内容以及其他行内元素，不可以包含塊級元素

寬高未設定的時候預設是内容的寬高

常見的行内元素有：

span、label、a、em、strong、img

設定display屬性的值是display：inline可以将元素轉換為行内元素

行内塊級元素

綜合塊級元素以及行内元素的特性

不獨占一行

元素的寬高、内外邊距均可以設定，上下左右邊距會對周圍的元素産生影響

寬高未設定的時候是内容的寬高

常見的行内塊級元素有：

button、input、textarea、select

設定display屬性是display：inline-block可以将元素轉換為行内塊級元素

二十四

任務背景

在一個網頁的排版布局中，定位屬性是最重要的屬性之一，能夠熟練使用定位布局對頁面的美化有很好的的幫助。

任務目标

1、了解什麼是脫離文檔流

2、掌握position定位的特性以及使用方法

3、掌握層級屬性z-index的使用

脫離文檔流

文檔流指的是在元素排版的過程中，元素會自動從上到下，從左到右進行排列，這叫文檔流

position定位

position定位用于指定元素的定位的類型，屬性的值是：

static

relative

absolute

fixed

sticky

二十五

任務背景

浮動屬性

這個屬性的産生之初是為了實作“文字環繞的效果”，讓文字環繞在網頁中實行類似于word中的圖文混排，浮動可以使用于任何的一個元素，在頁面布局中發揮着巨大的作用。

任務目标

float