成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

布局總結(jié)-水平居中布局的實(shí)現(xiàn)

starsfun / 2480人閱讀

摘要：布局一左右布局實(shí)現(xiàn)左右布局居中布局的幾個(gè)實(shí)現(xiàn)方案標(biāo)簽結(jié)構(gòu)很簡(jiǎn)單，就是一個(gè)父元素里面套了一個(gè)子元素想要實(shí)現(xiàn)左右布局，只需要把設(shè)置成向左浮動(dòng)，右邊向右浮動(dòng)或者把和設(shè)置成二居中布局結(jié)構(gòu)居中布局的幾個(gè)實(shí)現(xiàn)方案標(biāo)簽結(jié)構(gòu)很簡(jiǎn)單，就是一個(gè)父元素

CSS布局 一、左右布局 1、float實(shí)現(xiàn)左右布局 
                    
                    
                    
                        
                        
                        居中布局的幾個(gè)實(shí)現(xiàn)方案
                    
                    
                        

                        
DEMO

標(biāo)簽結(jié)構(gòu)很簡(jiǎn)單，就是一個(gè)父元素里面套了一個(gè)子元素

想要實(shí)現(xiàn)左右布局，只需要把

設(shè)置成向左浮動(dòng)，右邊向右浮動(dòng)

.left{
    float: left;
}
.right{
    float: right;
}

或者把left和right設(shè)置成inline-block

.left{
    display: inline-block
}
.right{
    display: inline-block
}
二、居中布局 1、html結(jié)構(gòu) 
                    
                    
                    
                        
                        
                        居中布局的幾個(gè)實(shí)現(xiàn)方案
                    
                    
                        

                            
DEMO

標(biāo)簽結(jié)構(gòu)很簡(jiǎn)單，就是一個(gè)父元素里面套了一個(gè)子元素

2.用text-align和inline-block實(shí)現(xiàn)

首先text-align只針對(duì)inline元素有效，因此，可以在父元素設(shè)置text-align:center,然后改變子元素display:block為inline-block.

index01.css的代碼為：

                    .parent{
                        height: 200px;
                        background-color: gray;
                    
                        text-align: center;
                    }
                    .child{
                        background-color: yellowgreen;
                        height: 200px;
                        width: 200px;
                    
                        display: inline-block;
                    }
3.用display:table和margin:0 auto實(shí)現(xiàn)

首先定寬的塊級(jí)元素可以設(shè)置margin:0 auto實(shí)現(xiàn)水平居中

display:table這個(gè)元素的作用就像

元素. 它定義了一個(gè)塊級(jí)盒子.

index02.css的代碼為;

.parent{
    height: 200px;
    background-color: gray;
}

/*display:table
在表現(xiàn)形式上很像是block元素
寬度跟著內(nèi)容走。
*/
.child{
    display: table;
    margin: 0 auto;
    background-color: greenyellow;
    height: 200px;
    width: 200px;
    text-align: center;
    line-height: 200px;
}

4.用position:absolute和left: 50%以及transform: translateX(-50%)實(shí)現(xiàn)

首先對(duì)父元素設(shè)置position: relative

對(duì)子元素設(shè)置絕對(duì)定位，相對(duì)于父元素定位

用left:50%則可以根據(jù)左邊進(jìn)行定位

根據(jù)transform，則可以根據(jù)自身的寬度偏移

index03.css的代碼為：

    .parent{
        height: 200px;
        background-color: gray;
        position: relative;
    }
    .child{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        height: 200px;
        background-color: greenyellow;
    }

5.用flex+justify-content實(shí)現(xiàn)

對(duì)父元素設(shè)置display:flex，則第一級(jí)子元素是flex-item

對(duì)子元素設(shè)置justify-content: center;就可以實(shí)現(xiàn)居中

/////////

也可以對(duì)子元素設(shè)置margin:0 auto實(shí)現(xiàn)居中

index04.css的代碼為：

    .parent{
        height: 200px;
        background-color: gray;
        display: flex;    
        justify-content: center;
    }
    .child{
        height: 200px;
        background-color: greenyellow;
        /*  margin: 0 auto;  */
    }

三、左中右布局

左中右布局參考一的左右布局，可將三個(gè)元素都設(shè)置成float:left
或者將三個(gè)元素都設(shè)置成dispaly：inline-block

四、垂直居中

height和line-height設(shè)置垂直居中

display:flex和align-items: center`

行級(jí)元素設(shè)置vertial-align: middle

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

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

相關(guān)文章

  • 前端-CSS3&H5

    摘要：高度模型淺識(shí)為的簡(jiǎn)寫，簡(jiǎn)稱為塊級(jí)格式化上下文，為瀏覽器渲染某一區(qū)域的機(jī)制，中只有和中還增加了和。并非所有的布局都會(huì)在開(kāi)發(fā)中使用，但是其中也會(huì)涉及一些知識(shí)點(diǎn)。然而在不同的純制作各種圖形純制作各種圖形多圖預(yù)警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開(kāi)始學(xué)習(xí) CSS 的時(shí)候，看到 float 屬性不...

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

  • 布局總結(jié)-水平居中布局的實(shí)現(xiàn)

    摘要：布局一左右布局實(shí)現(xiàn)左右布局居中布局的幾個(gè)實(shí)現(xiàn)方案標(biāo)簽結(jié)構(gòu)很簡(jiǎn)單，就是一個(gè)父元素里面套了一個(gè)子元素想要實(shí)現(xiàn)左右布局，只需要把設(shè)置成向左浮動(dòng)，右邊向右浮動(dòng)或者把和設(shè)置成二居中布局結(jié)構(gòu)居中布局的幾個(gè)實(shí)現(xiàn)方案標(biāo)簽結(jié)構(gòu)很簡(jiǎn)單，就是一個(gè)父元素 CSS布局 一、左右布局 1、float實(shí)現(xiàn)左右布局 ...

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

  • 靜態(tài)頁(yè)面布局總結(jié)（新手）

    摘要：學(xué)習(xí)一個(gè)月了，對(duì)和頁(yè)面的靜態(tài)布局進(jìn)行一次總結(jié)總體來(lái)說(shuō)靜態(tài)頁(yè)面布局分為兩大類，水平布局和垂直布局，只要水平布局和垂直布局都能熟悉了，那么對(duì)于靜態(tài)的頁(yè)面的布局就不會(huì)有太大的問(wèn)題再說(shuō)布局之前先說(shuō)一下元素的顯示模式分類。 學(xué)習(xí)HTML一個(gè)月了，對(duì)HTML和Css頁(yè)面的靜態(tài)布局進(jìn)行一次總結(jié) 總體來(lái)說(shuō)靜態(tài)頁(yè)面布局分為兩大類，水平布局和垂直布局，只要水平布局和垂直布局都能熟悉了， 那么對(duì)于靜態(tài)的頁(yè)面...

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

  • 靜態(tài)頁(yè)面布局總結(jié)（新手）

    摘要：學(xué)習(xí)一個(gè)月了，對(duì)和頁(yè)面的靜態(tài)布局進(jìn)行一次總結(jié)總體來(lái)說(shuō)靜態(tài)頁(yè)面布局分為兩大類，水平布局和垂直布局，只要水平布局和垂直布局都能熟悉了，那么對(duì)于靜態(tài)的頁(yè)面的布局就不會(huì)有太大的問(wèn)題再說(shuō)布局之前先說(shuō)一下元素的顯示模式分類。 學(xué)習(xí)HTML一個(gè)月了，對(duì)HTML和Css頁(yè)面的靜態(tài)布局進(jìn)行一次總結(jié) 總體來(lái)說(shuō)靜態(tài)頁(yè)面布局分為兩大類，水平布局和垂直布局，只要水平布局和垂直布局都能熟悉了， 那么對(duì)于靜態(tài)的頁(yè)面...

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
    <strike id="ocmmc"><input id="ocmmc"></input></strike>
        

































           
               
                                           
                       
                 
            
                     
             
               
                      
               
              
              
              
               
              
           
           
        
       
    
    
     
    
    
    
       
       
      
  
    
    













        <del id="ocmmc"></del>
      • <strike id="ocmmc"></strike>
      • 

<