成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

float,clear,BFC理解

cod7ce / 2544人閱讀

摘要：通常被用來(lái)在不刪除元素的情況下隱藏或顯示元素。把設(shè)置成不會(huì)保留元素本該顯示的空間，但是還會(huì)保留。唯一的問(wèn)題是，當(dāng)瀏覽器窗口比元素的寬度還要窄時(shí)，瀏覽器會(huì)顯示一個(gè)水平滾動(dòng)條來(lái)容納頁(yè)面。這可以啟用特定瀏覽器實(shí)驗(yàn)中的特性。同時(shí)記住它是支持。

參考網(wǎng)址：學(xué)習(xí)CSS布局
display

"display"屬性：none

另一個(gè)常用的`display`值是 `none` 。一些特殊元素的默認(rèn)` display` 值是它，例如` script` 。

display:none 通常被 JavaScript 用來(lái)在不刪除元素的情況下隱藏或顯示元素。

它和 visibility 屬性不一樣。把 display 設(shè)置成 none 不會(huì)保留元素本該顯示的空間，

但是 visibility: hidden; 還會(huì)保留。

margin

margin: auto;
`

#main {
      width: 600px;
      margin: 0 auto; 
}


    設(shè)置塊級(jí)元素的 width 可以阻止它從左到右撐滿(mǎn)容器。
    然后你就可以設(shè)置左右外邊距為 auto 來(lái)使其水平居中。
    元素會(huì)占據(jù)你所指定的寬度，然后剩余的寬度會(huì)一分為二成為左右外邊距。
    唯一的問(wèn)題是，當(dāng)瀏覽器窗口比元素的寬度還要窄時(shí)，
    瀏覽器會(huì)顯示一個(gè)水平滾動(dòng)條來(lái)容納頁(yè)面。讓我們?cè)賮?lái)改進(jìn)下這個(gè)方案...

`

max-width

max-width

#main {
     max-width: 600px;
     margin: 0 auto; 
   }
   

   在這種情況下使用 max-width 替代 width 可以使瀏覽器更好地處理小窗口的情況。
   這點(diǎn)在移動(dòng)設(shè)備上顯得尤為重要，調(diào)整下瀏覽器窗口大小檢查下吧！
   順便提下， 所有的主流瀏覽器包括IE7+在內(nèi)都支持 max-width ，所以放心大膽的用吧。

box-sizing

box-sizing

經(jīng)過(guò)了一代又一代人們意識(shí)到數(shù)學(xué)不好玩，所以他們新增了一個(gè)叫做 box-sizing 的CSS屬性。
當(dāng)你設(shè)置一個(gè)元素為 box-sizing: border-box; 時(shí)，此元素的內(nèi)邊距和邊框不再會(huì)增加它的寬度。

* {
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
       box-sizing: border-box;
}

既然 box-sizing 是個(gè)很新的屬性，目前你還應(yīng)該像我之前在例子中那樣使用 -webkit- 和 -moz- 前綴。
這可以啟用特定瀏覽器實(shí)驗(yàn)中的特性。同時(shí)記住它是支持IE8+。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/115550.html

相關(guān)文章

  • 【前端Talkking】CSS系列——CSS深入理解之float浮動(dòng)

    摘要：包裹性所謂包裹性，其實(shí)是由包裹和自適應(yīng)兩部分組成。官方對(duì)屬性的解釋是元素盒子的邊不能和前面的浮動(dòng)元素相鄰。清除高度塌陷的問(wèn)題在上面的章節(jié)中，如果子元素設(shè)置浮動(dòng)屬性，則父元素就會(huì)出現(xiàn)高度塌陷的問(wèn)題。 float屬性是CSS中常用的一個(gè)屬性，在實(shí)際工作中使用的非常多，如果使用不當(dāng)就會(huì)出現(xiàn)意料之外的效果。雖然很多人說(shuō)浮動(dòng)會(huì)用就行、浮動(dòng)過(guò)時(shí)了，但是對(duì)于優(yōu)秀的前端開(kāi)發(fā)人員，需要有刨根問(wèn)底的精神，...

    yankeys 評(píng)論0 收藏0

  • 深入清除浮動(dòng)原理

    摘要：如下圖所示可以看到父元素的高度為為了解決這種狀況就要清除浮動(dòng)了。下面詳細(xì)看一下這兩大類(lèi)清除浮動(dòng)的方式及原理。所以，避免穿透啊，清除浮動(dòng)什么的也好理解了。 關(guān)于浮動(dòng) 設(shè)置為浮動(dòng)的元素會(huì)脫離當(dāng)前文檔流，向左或向右移動(dòng)直到邊緣遇到另一個(gè)浮動(dòng)元素或者到達(dá)邊界。普通元素不會(huì)對(duì)齊造成影響。 浮動(dòng)是把雙刃劍，在給我們的布局帶來(lái)便利的同時(shí)有一些缺點(diǎn)需要我們?nèi)ソ鉀Q。例如最常見(jiàn)的父元素塌陷。如下圖所示：...

    freewolf 評(píng)論0 收藏0

  • BFC理解

    摘要：解決高度塌陷的前提就是能識(shí)別并包含到浮動(dòng)元素。那有沒(méi)有一個(gè)更好的高度檢測(cè)方法呢答案是有的，就是我們經(jīng)常用到的。不支持，所以需要通過(guò)專(zhuān)有的屬性，觸發(fā)。 Block formatting context （塊級(jí)格式化上下文） 頁(yè)面文檔由塊block構(gòu)成 每個(gè)block在頁(yè)面上占據(jù)自己的位置 使用新的元素構(gòu)建BFC overflow：hidden | auto | scroll； 只要不為...

    nevermind 評(píng)論0 收藏0

  • 清楚浮動(dòng)/邊界塌陷bfc

    摘要：不會(huì)重疊浮動(dòng)元素可以包含浮動(dòng)我們可以利用的第三條特性來(lái)清浮動(dòng)，這里其實(shí)說(shuō)清浮動(dòng)已經(jīng)不再合適，應(yīng)該說(shuō)包含浮動(dòng)?？偠灾謇砀?dòng)兩種方式利用屬性，清除浮動(dòng)使父容器形成 CSS清浮動(dòng)處理（Clear與BFC）在CSS布局中float屬性經(jīng)常會(huì)被用到，但使用float屬性后會(huì)使其在普通流中脫離父容器，讓人很苦惱 1 浮動(dòng)帶來(lái)布局的便利，卻也帶來(lái)了新問(wèn)題 復(fù)制代碼 1 2 3 4 ...

    remcarpediem 評(píng)論0 收藏0

  • CSS魔法堂：說(shuō)說(shuō)Float那個(gè)被埋沒(méi)的志向

    摘要：時(shí)其寬度始終保持占滿(mǎn)寬度的態(tài)度。清除浮動(dòng)就是為浮動(dòng)影響的范圍劃邊界。那么可歸結(jié)為的父容器包裹所有子元素。注意屬性值不能為空白，否則無(wú)法清除浮動(dòng)。 前言 ?定位系統(tǒng)中第一難理解就是Normal flow，而第二就非Float莫屬了，而Float難理解的原因有倆，1. 一開(kāi)頭我們就用錯(cuò)了；2. 它跟Normal flow靠得太近了。本文嘗試?yán)砬錐loat的特性和行為特征，若有紕漏望各位指正...

    legendmohe 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<