CSS中響應式布局的四種方式

2021-10-12 10:18:51 字數 1349 閱讀 6351

總的html**

>

class

="box"

>

class

="left"

>

leftdiv

>

class

="center"

>

中間div

>

class

="right"

>

rightdiv

>

div>

body

>

flex布局

.box

.left

.center

.right

優點缺點

絕對布局

.box

.left

.right

.center

@media

(max-width

: 600px)

}

優點缺點grid布局

.box

.left,.right

.center

優點缺點float布局

浮動流需要將right和center位置換一下

class

="box"

>

class

="left"

>

leftdiv

>

class

="right"

>

rightdiv

>

class

="center"

>

centerdiv

>

div>

.box

.left

.right

.center

優點缺點解決方式

@media

(max-width

: 600px)

.center

}

第三個問題

CSS中的響應式布局

在小型 建設中,有運用一套 來適應不同終端解析度的需求,優點 節約製作時間 節約製作成本 便於維護等優點。css3利用 查詢 media queries 即可針對不同的 型別定義不同的樣式,從而實現響應式布局 也可以針對不同的解析度設定不同的樣式。1024解析度以上 pc端 1024 768 pad...

css的四種書寫方式

優先順序 外部樣式 內部樣式表 內聯樣式表 優先順序,即 同名的選擇器右邊的會覆蓋左邊 1.內部樣式表 head style 內部樣式表,一般用於覆蓋公用樣式 headtip style head 2.使用link標籤,在文件中宣告使用外接資源,最常用的一種方式。css外部樣式表指定編碼的 char...

css的四種引入方式

css的四種引入方式 第一 頭部直接引用 style test1第二新建文件引用,建乙個 9.css其中寫入 test 通過 9.html中的語句呼叫 第三種在div中寫css 好好學習 第四種新建乙個文件,在裡面寫css 然後用 import url 匯入 相同元素在不同瀏覽器下顯示的效果稍有不同...