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

資訊專(zhuān)欄INFORMATION COLUMN

浮動(dòng)及浮動(dòng)相關(guān)問(wèn)題(初次)

W_BinaryTree / 2751人閱讀

摘要：浮動(dòng)定義使元素脫離文檔流，按照指定的方向發(fā)生移動(dòng)，遇到父級(jí)的邊界或者相鄰的浮動(dòng)元素就會(huì)停下來(lái)，當(dāng)浮動(dòng)并不是全動(dòng)脫離文檔流。

這僅是我個(gè)人看到的，如果補(bǔ)充，還請(qǐng)大家不要吝嗇當(dāng)個(gè)鍵盤(pán)俠，謝謝！

文檔流

文檔中可顯示的元素在排列時(shí)候的開(kāi)始位置以及他們所占的區(qū)域。

因?yàn)轫?yè)面中的元素分為不同的種類(lèi)，所以他們會(huì)按各自的特點(diǎn)去顯示，在頁(yè)面中所占的區(qū)域不是一樣的。會(huì)按從上到下，從左到右的順序輸出內(nèi)容。

浮動(dòng) float

定義

使元素脫離文檔流，按照指定的方向發(fā)生移動(dòng)，遇到父級(jí)的邊界或者相鄰的浮動(dòng)元素就會(huì)停下來(lái)，當(dāng)浮動(dòng)并不是全動(dòng)脫離文檔流。
值            left、right、none
特征
    1、塊元素可以在一行顯示
    2、按照一個(gè)指定的方向移動(dòng)，遇到父級(jí)的邊界或者相鄰的浮動(dòng)元素就會(huì)停下來(lái)
    3、行內(nèi)元素支持寬高
    4、脫離文檔流
    5、塊元素默認(rèn)寬度會(huì)改變(包裹性)
    6、父級(jí)高度塌陷(破壞性)
          子元素浮動(dòng)后，父元素高度不會(huì)自動(dòng)撐開(kāi)。
    7、換行不會(huì)被解析成空格
     浮動(dòng)后的元素就會(huì)脫離文檔流了，那它就不屬于文檔流里的結(jié)構(gòu)了，所以換行、空格都跟父級(jí)沒(méi)關(guān)系了

特征4、脫離文檔實(shí)例：

html部分

divdemo1


divdemo02

hello

css部分

div{
    float:left;
    width:100px;
    height:100px;
    background:yellowgreen;
}
span{
    float:right;
    width:100px;
    height:100px;
    border:1px solid #333;
}

特征5、塊級(jí)元素默認(rèn)高度會(huì)改變

    
    
hello world

/*css代碼部分*/
    .div{
        height:50px;
        floalt:left;
        border:1px solid #333;
    }

特征6、父元素高度塌陷實(shí)例




    
do you relaize something?



/*css代碼*/
.parent{
    /*float:left;*/
    border:1px solid #333;
}
.children{
    width:100px;
    height:100px;
    float:left;
    border:1px solid #f00;
    background: #ccc
}

7、換行不會(huì)被解析成空格


    
box

    
box

    
box



/*css代碼*/
.parent{
    border: 1px solid #f00;
}
.box{
    width: 100px;
    height: 200px;
    background: green;
    color: #fff;
    float: left;
}
脫離文檔流

脫離文檔流指的是元素不在頁(yè)面中占位置，定位是完全脫離文檔流

實(shí)例：
html代碼


指的是元素不在頁(yè)面中占位置了，但是文檔卻還占著位置。。指的是元素不在頁(yè)面中占位置了，但是文檔卻還占著位置。。。元素不在頁(yè)面中占位置了，但指的是元素不在頁(yè)面中占位置了，但是文檔卻還占著位置。。。是文檔卻還占著位置。。。的是元素不在頁(yè)面中占位置了，但是文檔卻還占著位置。。。指的是元素不在頁(yè)面中占位置了，但是文檔卻還占著位置。。。指的是元素不在頁(yè)面中占位置了，但是文檔卻還占著位置。。。指的是元素不在頁(yè)面中占位置了，但是文檔卻還占著位置。。。指的是元素不在頁(yè)面中占位置了，但是文檔卻還占著位置。。。指的是元素不在頁(yè)面中占位置了，但是文檔卻還占著位置。。。

css代碼

.div1{
    width: 100px;
    height: 50px;
    background: green;
    color: #fff;
    border: 5px solid blue;
    float: left;
    /*margin: 20px;
    padding: 20px;*/
}
span{
    width:100px;
    height:50px;
}
float與inline-block的區(qū)別

對(duì)于這一個(gè)區(qū)別，除了前面脫離文檔流和父元素高度塌陷的差異，還有一個(gè)區(qū)別是：
如果一排元素高度不一至的情況下，想讓他們按順序排列就可以選擇inline-block

實(shí)例：


    
    
        
  • 1
    • 
        
  • 2
    • 
        
  • 3
    • 
        
  • 4
    • 
        
  • 5
    • 
        
  • 6
    • 
    

/*css代碼*/
    ul{
        width: 300px;
        font-size: 0;
    }
    li{
        list-style: none;
        width: 100px;
        height: 150px;
        background: green;
        font-size: 40px;
        text-align: center;
        line-height: 150px;
        color: #fff;
        /*float: left;*/
        /*float: right;*/
        display: inline-block;
    }
清除浮動(dòng)的若干方法：

清除浮動(dòng)的方法

1、clear
2、給父級(jí)添加高度
    有的時(shí)候是不能給父級(jí)添加高度的，所以這個(gè)方法就用不了（父級(jí)沒(méi)有高度的情況下）
3、inline-block
    具胡與上一個(gè)的清除浮動(dòng)一樣的總是，同時(shí)加了以后這個(gè)元素就沒(méi)有辦法居中了
4、overflow:hidden;
    如果子級(jí)有定位的話，并且這個(gè)定位超出了父級(jí)的范圍，那樣的話就看不到了，所以不能加這個(gè)命令
5、空標(biāo)簽
    空標(biāo)簽是沒(méi)有內(nèi)容，但是它的作用是用來(lái)清除浮動(dòng)的，所以不符合行為、樣式、結(jié)構(gòu)相分離的標(biāo)準(zhǔn)
    ie6下標(biāo)簽是有一個(gè)最小高度19px，解決后也會(huì)有2像素的偏差
6、br清除浮動(dòng)
    與上面的問(wèn)題是一樣
7、after偽類(lèi)清除浮動(dòng)
    after    代表選擇到的元素的內(nèi)容的最后面
            after偽類(lèi)的內(nèi)容默認(rèn)是一個(gè)行內(nèi)元素
    content        設(shè)置的內(nèi)容

代碼示例：




    

    
    



/*css代碼*/
.parent{
    border: 1px solid #f00;
    /*height: 100px;*/
    /*display: inline-block;
    margin: 0 auto;*/
    /*overflow: hidden;*/
}
.clearfix:after{
    content:" ";
    display:block;
    clear:both;
}
.box{
    width: 100px;
    height: 100px;
    background: green;
    float: left;
}

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

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

相關(guān)文章

  • 浮動(dòng)及浮動(dòng)相關(guān)問(wèn)題(初次)

    摘要：浮動(dòng)定義使元素脫離文檔流，按照指定的方向發(fā)生移動(dòng)，遇到父級(jí)的邊界或者相鄰的浮動(dòng)元素就會(huì)停下來(lái)，當(dāng)浮動(dòng)并不是全動(dòng)脫離文檔流。 這僅是我個(gè)人看到的，如果補(bǔ)充，還請(qǐng)大家不要吝嗇當(dāng)個(gè)鍵盤(pán)俠，謝謝！ 文檔流 文檔中可顯示的元素在排列時(shí)候的開(kāi)始位置以及他們所占的區(qū)域。 因?yàn)轫?yè)面中的元素分為不同的種類(lèi)，所以他們會(huì)按各自的特點(diǎn)去顯示，在頁(yè)面中所占的區(qū)域不是一樣的。會(huì)按從上到下，從左到右的順序輸出內(nèi)容。...

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

  • CSS入門(mén)指南-4：頁(yè)面布局

    摘要：屬性是中最重要的用于控制布局的屬性。布局的高度多數(shù)情況下，布局中結(jié)構(gòu)化元素乃至任何元素的高度是不必設(shè)定的。更新效果如圖以上措施使布局有了明顯改觀。 這是《CSS設(shè)計(jì)指南》的讀書(shū)筆記，用于加深學(xué)習(xí)效果。 display 屬性 display是 CSS 中最重要的用于控制布局的屬性。每個(gè)元素都有一個(gè)默認(rèn)的 display 值。對(duì)于大多數(shù)元素它們的默認(rèn)值通常是 block 或 inline ...

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

  • CSS入門(mén)指南-4：頁(yè)面布局

    摘要：屬性是中最重要的用于控制布局的屬性。布局的高度多數(shù)情況下，布局中結(jié)構(gòu)化元素乃至任何元素的高度是不必設(shè)定的。更新效果如圖以上措施使布局有了明顯改觀。 這是《CSS設(shè)計(jì)指南》的讀書(shū)筆記，用于加深學(xué)習(xí)效果。 display 屬性 display是 CSS 中最重要的用于控制布局的屬性。每個(gè)元素都有一個(gè)默認(rèn)的 display 值。對(duì)于大多數(shù)元素它們的默認(rèn)值通常是 block 或 inline ...

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

  • 優(yōu)化關(guān)鍵渲染路徑

    摘要：三種渲染流程實(shí)際場(chǎng)景下，大概會(huì)有三種常見(jiàn)的渲染流程注意和步驟是可避免的優(yōu)化瀏覽器會(huì)在和加載完開(kāi)始渲染頁(yè)面。優(yōu)化避免阻塞解析器通過(guò)以上兩種方式引入均會(huì)阻塞，因而會(huì)阻塞出現(xiàn)在腳本后面的標(biāo)記的渲染。 瀏覽器渲染原理 showImg(https://segmentfault.com/img/remote/1460000009159494?w=538&h=507);showImg(https:/...

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

  • CSS知識(shí)點(diǎn)及技巧整理

    摘要：當(dāng)元素在容器中被滾動(dòng)超過(guò)指定的偏移值時(shí)，元素在容器內(nèi)固定在指定位置。詳見(jiàn)浮動(dòng)與清除浮動(dòng)浮動(dòng)相關(guān)知識(shí)屬性的取值元素向左浮動(dòng)。是相對(duì)長(zhǎng)度單位，相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。 這些個(gè)知識(shí)點(diǎn)是我個(gè)人認(rèn)為的，下面我們就來(lái)看看這些個(gè)知識(shí)點(diǎn)。 1.怎么讓一個(gè)不定寬高的 DIV，垂直水平居中? 使用Flex 只需要在父盒子設(shè)置：display: flex; justify-content: cent...

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

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

0條評(píng)論

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