国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css 盒模型 文檔流 幾種清除浮動的方法

gitmilk / 3640人閱讀

摘要：但是不會超出內(nèi)邊距的范圍。漏加了浮動的盒子，不占位置的，它浮起來了，它原來的位置漏給了標(biāo)準(zhǔn)流的盒子。清除浮動清除浮動主要為了解決父級元素因?yàn)樽蛹壐右饍?nèi)部高度為的問題。

盒模型

1、box-sizing: content-box 是普通的默認(rèn)的一種盒子表現(xiàn)模式  
    盒子大小為 width + padding + border ? content-box:此值為其默認(rèn)值，其讓元素維持W3C的標(biāo)準(zhǔn)Box Mode
2、box-sizing:border-box 以盒子邊框?yàn)榻?自己管理里面的元素
    border-box  盒子大小為 width ?  就是說  padding 和 border 是包含到width里面的

盒子陰影

box-shadow:水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色  內(nèi)(inset)/外陰影；

文檔流

普通流（標(biāo)準(zhǔn)流）
浮動
定位

浮動

浮動出現(xiàn):解決文字環(huán)繞的效果
后來發(fā)現(xiàn)浮動可以做很多事
浮動會脫離標(biāo)準(zhǔn)流 不會占有原來的位置
浮動 是找的離他最近的父元素
浮動的對齊方式是頂部對齊
 浮動的元素總是找理它最近的父級元素對齊。但是不會超出內(nèi)邊距的范圍。
浮： ?  加了浮動的元素盒子是浮起來的，漂浮在其他的標(biāo)準(zhǔn)流盒子上面。
漏： ?  加了浮動的盒子，不占位置的，它浮起來了，它原來的位置漏 給了標(biāo)準(zhǔn)流的盒子。
特： ?  特別注意，這是特殊的使用，有很多的不好處，使用要謹(jǐn)慎。
?

?清除浮動

清除浮動主要為了解決父級元素因?yàn)樽蛹壐右饍?nèi)部高度為0 的問題。
我們有時候不方便給父盒子高度 或者不知道父盒子的高度 這個時候就需要清除浮動
? ? 
怎么去清除浮動?
    clear:both 同時清除左右兩側(cè)浮動的影響
1.給父盒子設(shè)置高度
*2.額外標(biāo)簽法 : 添加一個額外的標(biāo)簽  clear:both ? 起到分離上部分和下部分的作用  
        影響了本身html結(jié)構(gòu)
3.給父盒子一個display:table  但是有缺陷  建議 不要使用
*4.overflower:hidden  溢出隱藏
*5. 
?
  .father:after {
        content: ".";/* 這里不建議大家使用"" */
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
      }

?

6. *zoom:1;處理ie6以下的版本兼容問題
?
*7.雙偽元素清除浮動
  .clearfix:before,.clearfix:after { 
          content:".";
          display:table;
        }
        .clearfix:after {
         clear:both;
        }
        .clearfix {
          *zoom:1;
        }

?

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/1831.html

相關(guān)文章

  • CSS規(guī)范 > 8 盒模型 Box Model

    摘要：當(dāng)兩個及以上外邊距折疊，合并后的外邊距寬度是發(fā)生折疊的外邊距中的最大寬度。如果該元素的外邊距同其父元素的上外邊距折疊，則該盒的上邊框邊緣同其父元盒的上邊框邊緣相同。 2017-07-20: 關(guān)于外邊距折疊, 推薦問題: https://segmentfault.com/q/10... 8 盒模型 Box Model URL: http://www.w3.org/TR/CSS2/box...

    suemi 評論0 收藏0

  • 前端面試之CSS總結(jié)(上)

    摘要：重點(diǎn)介紹一下常見的三列布局之圣杯布局和雙飛翼布局。兩種布局方式的不同之處在于如何處理中間主列的位置圣杯布局是利用父容器的左右內(nèi)邊距定位雙飛翼布局是把主列嵌套在后利用主列的左右外邊距定位。 CSS總結(jié) 由于最近在準(zhǔn)備前端方面的面試，所以對自己平常工作中用到的地方做出一些總結(jié)。該篇是CSS部分(上)，有許多地方敘述的并不是十分詳細(xì)，只是大致的描述一下，給自己提供一個知識輪廓。本篇中主要描述...

    琛ｈ。 評論0 收藏0

  • css魔幻屬性跟進(jìn)篇

    摘要：中是這樣定義的屬性指定一個元素應(yīng)沿其容器的左側(cè)或右側(cè)放置，允許文本和內(nèi)聯(lián)元素環(huán)繞它。其同樣適用于設(shè)置屬性為絕對定位或固定定位的內(nèi)聯(lián)元素。至于為什么，可以理解為內(nèi)聯(lián)元素沒有盒模型，其高度由內(nèi)容決定。 白話：即上一篇我腦中飄來飄去的css魔幻屬性自己的文章推出之后，這是自己寫的第四篇CSS相關(guān)的文章，文章絕大部分是自己工作總結(jié)得來，另一部分是平日sf回答的與面試中向面試官交流學(xué)到的，都是一...

    oogh 評論0 收藏0

  • 前端整理——css部分

    摘要：圣杯布局和雙飛翼布局解決問題的方案在前一半是相同的，也就是三欄全部浮動，但左右兩欄加上負(fù)讓其跟中間欄并排，以形成三欄布局。雙飛翼布局，為了中間內(nèi)容不被遮擋，直接在中間內(nèi)部創(chuàng)建子用于放置內(nèi)容，在該子里用和為左右兩欄留出位置。（1）盒模型（普通盒模型、怪異盒模型） 1、元素的content（內(nèi)容）、padding(內(nèi)邊距)、border（邊框）、margin（外邊距）構(gòu)成了CSS盒模型 2、IE...

    chaosx110 評論0 收藏0

  • CSS規(guī)范 > 9 視覺格式化模型 Visual Formatting Model

    摘要：盒的類型會影響其在視覺格式化模型中的表現(xiàn)。浮動元素絕對定位元素根元素都被稱為脫離文檔流其他元素被稱為文檔流內(nèi)。 視覺格式化模型 Visual Formatting Model URL：http://www.w3.org/TR/CSS2/visuren.html Translator: HaoyCn Date: 14th of Aug, 2015 本文并未全部翻譯，譯者在原文基礎(chǔ)上...

    魏憲會 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<