最全的HTML CSS布局

2021-09-24 02:34:54 字數 2527 閱讀 7114

水平居中

開始**

第一種
.parent

.child

第二種 (注意child要設定寬度)
.child
第三種
.parent

.child

第四種
.parent

.child

第五種
.parent

.child

第六種
.parent
第七種
.parent

.child

垂直居中

初始**

第一種
.parent
第二種
.parent

.child

第三種
.parent

.child

第四種
.parent
第五種
.parent

.child

水平垂直居中

初始**

第一種
.parent

.child

第二種
.parent

.child

第三種
.parent

.child

第四種
.parent

.child

第五種
.parent
第六種
.parent

.child

左邊定寬,右邊自適應

初始**

第一種
.left

.right

第二種
.left

.right

第三種
.parent

.left

.right

第四種
.parent

.left

.right

右列定寬,左列自適應

初始**

第一種
.left

.right

第二種
.parent

.left

.right

第三種
.parent

.left

.right

兩列定寬,一列自適應

初始**

第一種
.left, .content

.right

第二種
.left, .content

.right

第三種
.parent

.left, .content

.right

第四種
.parent

.left, .content

.right

左列、右列定寬,中間自適應

初始**

第一種
.parent

.left

.content

.right

第二種
.parent

.left

.content

.right

第三種
.parent

.left

.content

.right

多列布局

初始**

第一種
.page
第二種
.parent

.page

第三種
.parent

.page

九宮格布局

初始**

第一種
.parent

.row

.col

第二種
.parent

.row

.col

全屏布局

初始**

第一種
html, body

.header

.left

.page

.footer

HTML CSS 混合布局

charset utf 8 混合布局title type text css body top main left right foot margin 0auto 的意思就是 上下邊界為0,左右根據寬度自適應!其實就是 水平居中的意思 style head class top div class ma...

html css布局技巧

一 父元素的寬高的變化子元始終素鋪滿父元素 二 子元素位於父元素正中心 三 子元素垂直居中 四 子元素水平居中 五 固定寬高比盒子,padding bottom的取值是參照width,如果width的值是百分比,那麼參照就是父元素的width值 六 文字多於容器寬度顯示省略號 overflow hi...

html css簡單布局

經過幾天的學習漸漸掌握了一部分html和css 下面是用最近幾天學習的html css簡單布局的乙個頁面 這個頁面可以分為 header,middle和foot。其中head分為三部分,需要三個div標籤來進行布局 首先第乙個div標籤布局橙色區域以及整個header區域設定背景顏色,寬,高,外邊距...