八、DIV+CSS

8.1 DIV與CSS的關系

DIV 是一個層，DIV 是在網頁懸浮的一個平面,網頁中的容器，該容器中可以擺放任何 HTML 元素；
DIV 默認情況在頁面中什么都不顯示，DIV 搭配 CSS 一起使用,通過 CSS 可以對DIV 進行內容、樣式的調整；
現在 web 中頁面中大量使用了 DIV，DIV 過于靈活需要我們使用 CSS 控制，

8.2 常用的樣式

position: absolute(絕對定位<當前 DIV 與瀏覽器邊緣的距離>) ，relative(相對定位<當前 DIV 相對于自身原有位置做為參考位置的定位方式>fixed（固定定位方式）默認定位)， z-index:指定 DIV 的顯示優先級(值為一個數字，該數字越大優先級越高)；
top:距頂端的距離；
left:距左端的距離；
right:距右端的距離；
bottom:距底部距離，

8.3 使用 DIV 對頁面進行布局

在現在的開發中大量使用 DIV 進行網頁布局；
span 標簽和 DIV 比較類似，但略有不同，span 是行級元素，div 是塊級元素；
span 標簽，用于設定文本資訊；
label 標簽，一般用于設定文本資訊，

8.4 HTML 中定位方式及浮動

8.4.1 普通流方式

普通留方式是指網頁元素的默認擺放方式,在開發中一般會指定元素的定位方式來改變默認方法，以便于布局管理，
(1) 塊級元素(默認):塊級元素如 div、p、h1~h6…每個元素單獨占一行，在其后放其他元素則另起一行,塊級元素可以自由的設定其高度和寬度；
在這里插入圖片描述
(2) 行級元素(默認):行級元素如，span,input…每個元素都在另一元素的后面直接擺放，當一行無法容納自動換行，行級元素默認不能設定寬度和高度，它只能隨內容多少自動改變寬度和高度；

實際應用中我們會根據需要對行級元素或塊級元素進行行塊級之間的轉換，我們會通過設定元素的 display 屬性，來修改行、塊級元素，

display:block(塊級元素顯示),inline(行級元素顯示),inline-block(行塊級元素，既有塊級元素的特點<可以設定寬高>,又有行級元素的特點<不獨占一行>)；
display:flex，設定容器的布局方式，flex 稱為彈性布局，使用它可以讓容器中的元素橫向擺放，也可以縱向擺放（默認為橫向擺放）可以通過 flex- direction 設定 flex 布局的擺放方式；
Row：按行擺放(默認)；
Column：按列擺放；
justify-content: center;設定主軸的對齊方法(flex- direction 指定的擺放方式)；
align-content:center;設定交叉軸的對齊方法，

8.4.2 position 定位方式

static(默認方式):該方式為 HTML 元素默認定位方式，這種定位方式遵循普通流方式；
absolute(決定定位方式):將 HTML 默認的檔案流(普通流)定位方式清除，它會按照瀏覽器的邊緣做為參照體來進行自主定位，使用top|left|bottom|right 指定元素的坐標位置；
relative(相對定位方式):該定位方式將 HTML 元素自身原有的位置做為參照體，進行定位; 使用top|left|bottom|right指定元素的坐標位置；
fixed(固定定位方法)：該方式將元素固定在某個位置上，

8.4.3 浮動

(不推薦使用，一般使用 display:flex 替換)
浮動是讓一個元素懸浮在半空中，懸浮的元素將不在占用空間;浮動后塊級元素轉換為了行級元素，可以在其他浮動的元素后繼續擺放，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/275494.html

標籤：其他

上一篇：讓一個文字在背景圖片水平居中的方法

下一篇：JavaScript運算子in：由一個問題引發的探究