一、怪異盒模型
瀏覽器對盒模型的解析一共有兩種模式，一種是標(biāo)準(zhǔn)模式，另一種就是怪異模式。
一般在頁面頭部聲明了DOCTYPE，都會觸發(fā)標(biāo)準(zhǔn)模式，而如果DOCTYPE缺失則在ie6，ie7，ie8下將會觸發(fā)怪異模式（quirks 模式）。

為西雙版納等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及西雙版納網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站設(shè)計、做網(wǎng)站、西雙版納網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

標(biāo)準(zhǔn)盒模型和怪異盒模型的區(qū)別：
    在標(biāo)準(zhǔn)模式下，一個塊的總寬度= width + margin(左右) + padding(左右) + border(左右)
    在怪異模式下，一個塊的總寬度= width + margin(左右)（即width已經(jīng)包含了padding和border值）

    Css3中box-sizing：屬性讓兩種盒模型相互轉(zhuǎn)變
    box-sizing ： content-box || border-box || inherit;

當(dāng)設(shè)置為box-sizing:content-box時，將采用標(biāo)準(zhǔn)模式解析計算，也是默認(rèn)模式；
當(dāng)設(shè)置為box-sizing:border-box時，將采用怪異模式解析計算；

二、css3多列分欄布局
1.column-count：auto | 整數(shù)；---控制欄數(shù)
2.column-width：value；---每欄的寬度
3.column-gap : value ;---兩欄之間的間距
4.column-rule : 寬度，線型，顏色；---欄與欄的間隔線
類似border，solid | dotted | dashed 實線 | 點線 | 虛線

column-width和column-count這兩個屬性提供了分欄的標(biāo)準(zhǔn)，只寫其中的一個
column-gap和column-rule就處在相鄰兩列之間。
讓某個元素跨欄加到某個元素上：column-span : all / none ; 是否跨欄顯示；

三、flex概念
采用flex布局的元素，稱為flex容器，它的所有子元素自動成為容器成員，稱為容器項目。


容器屬性
1、display:flex 設(shè)置為彈性盒（父元素添加）
2、flex-direction (主軸排列方向)
說明：指定了彈性子元素在父容器中的位置
row 默認(rèn)在一行內(nèi)排列
row-reverse：反轉(zhuǎn)橫向排列（右對齊，從后往前排，最后一項排在最前面。）
column：縱向排列。
column-reverse：反轉(zhuǎn)縱向排列，從下往上排，最后一項排在最上面
3、justify-content(主軸對齊方式)
內(nèi)容對齊（justify-content）屬性應(yīng)用在彈性容器上，把彈性項沿著彈性容器的主軸線（main axis）對齊

  ■ flex-start  默認(rèn)，左對齊
      ■ flex-end  右對齊
      ■ center   居中對齊
      ■ space-between  兩端對齊，中間自動分配
      ■ space-around  自動分配距離

4、align-items（側(cè)軸對齊方式）
flex-start：頂端對齊
flex-end：底對齊
center：垂直居中對齊
baseline：項目內(nèi)文本的底線對齊
stretch 默認(rèn)值 項目的高度自適應(yīng)容器（注：子元素不能設(shè)置高度）
5、flex-wrap
該屬性控制flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。
nowrap：flex容器為單行。該情況下flex子項可能會溢出容器
wrap：flex容器為多行。該情況下flex子項溢出的部分會被放置到新行，子項內(nèi)部會發(fā)生斷行
wrap-reverse：反轉(zhuǎn) wrap 排列。
6、align-content（行與行之間對齊方式）
當(dāng)伸縮容器的側(cè)軸還有多余空間時，本屬性可以用來調(diào)整「伸縮行」在伸縮容器里的對齊方式，這與調(diào)整伸縮項目在主軸上對齊方式的 <‘?justify-content’> 屬性類似。注：本屬性在只有一行的伸縮容器上沒有效果。
■ flex-start沒有行間距
■ flex-end底對齊沒有行間距
■ center居中沒有行間距
■ space-between兩端對齊，中間自動分配
■ space-around自動分配距離
7、align-self
align-self 屬性規(guī)定靈活容器內(nèi)被選中項目的對齊方式。
注意：align-self 屬性可重寫靈活容器的 align-items 屬性。

auto 默認(rèn)值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 "stretch"。
Stretch元素被拉伸以適應(yīng)容器。
Center元素位于容器的中心。
flex-start元素位于容器的開頭。
flex-end 元素位于容器的結(jié)尾。
?8、order
number排序優(yōu)先級，數(shù)字越大越往后排，默認(rèn)為0，支持負(fù)數(shù)。

9、 flex-grow
flex-grow屬性定義項目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。

.item {
flex-grow: <number>;
}
如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據(jù)的剩余空間將比其他項多一倍。
10、 flex-shrink
flex-shrink屬性定義了項目的縮小比例，默認(rèn)為1，即如果空間不足，該項目將縮小。
如果所有項目的flex-shrink屬性都為1，當(dāng)空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。
負(fù)值對該屬性無效。
?11、 flex-basis
flex-basis屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認(rèn)值為auto，即項目的本來大小。

它可以設(shè)為跟width或height屬性一樣的值（比如350px），則項目將占據(jù)固定空間。

四、媒體查詢
媒體查詢
可以讓我們根據(jù)設(shè)備顯示器的特性（如視口寬度、屏幕比例、設(shè)備方向：橫向或縱向）為其設(shè)定CSS樣式，使用媒體查詢，可以在不改變頁面內(nèi)容的情況下，為特定的一些輸出設(shè)備定制顯示效果。

響應(yīng)式網(wǎng)站設(shè)計(Responsive Web design)的理念是：
集中創(chuàng)建頁面的圖片排版大小，可以智能地根據(jù)用戶行為以及使用的設(shè)備環(huán)境（系統(tǒng)平臺、屏幕尺寸、屏幕定向等）進(jìn)行相對應(yīng)的布局。

響應(yīng)式網(wǎng)站布局的依據(jù)是：媒體查詢

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁題目：彈性盒媒體查詢-創(chuàng)新互聯(lián)
本文來源：http://www.rwnh.cn/article4/copdie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、用戶體驗、品牌網(wǎng)站設(shè)計、網(wǎng)站策劃、ChatGPT、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)