HTML5 CSS3 基礎09 水平 垂直居中

2021-10-07 11:24:57 字數 1065 閱讀 8826

<

!doctype html>

"en"

>

"utf-8"

>

"viewport" content=

"width=device-width, initial-scale=1.0"

>

document<

/title>

.father

.son

/* 定位1 (需要知道盒子的自身高度和寬度)*/

/* .son */

/* 定位2 (盒子需要高度和寬度)*/

/* .son */

/* 定位3 (相容性不好)*/

/* .son */

/* 4.利用display:flex布局 */

/* .father */

/* 5.需要父盒子有固定寬高 */

.father

.son

<

/style>

<

/head>

="father" id=

"father"

>

="son" id=

"son"

>水平/垂直居中<

/div>

<

/div>

<

!-- js方法 --

>

// winw = father.offsetwidth;

// winh = father.offsetheight;

// sonw = son.offsetwidth;

// sonh = son.offsetheight;

// son.style.position = "absolute";

// son.style.left = (winw - sonw) / 2 + "px";

// son.style.top = (winh - sonh) / 2 + "px";

<

/script>

<

/body>

<

/html>

web前端基礎 html5 css3

知識就像一張網,越實越牢,網住的魚越多。基礎是走向成功的基石,在碼 的過程中,有些時候因為基礎不牢吃了許多苦頭。從今天開始 2020.6.15 先把基礎惡補起來。加油 文件型別宣告標籤,html5版本 設定語言 字符集,utf 8 萬國碼 gb2312 簡體中文 bic5 正體中文 gbk 簡 正體...

初學HTML5 CSS3動畫

乙個完整的css animations由兩部分構成 在css3中使用 keyframes規則來建立動畫,keyframes可以設定多個關鍵幀,每個關鍵幀表示動畫過程中的乙個狀態,多個關鍵幀就可以使動畫十分絢麗。keyframes animationname animation屬性用於描述動畫的css...

12 為何使用Html5 CSS3

一 大多瀏覽器支援,低版本也沒問題 我看點這方面的資料,是為了做手機應用 有三個方案,這個是備用方案 可以開發響應式 可以脫離開發平台進行跨平台。在html5網頁中引入modernizr,就能讓ie支援html5新元素。html5樣板檔案快速開發 html5boilerplate.com 二 布局 ...