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

資訊專欄INFORMATION COLUMN

CSS常見布局與居中

April / 2840人閱讀

摘要：常用于控制頁面布局的定位機(jī)制普通流相對(duì)定位絕對(duì)定位和固定定位。左右布局最常用的就是通過浮動(dòng)左浮或右浮來實(shí)現(xiàn)浮動(dòng)。可以通過設(shè)置左右的外邊距為值來居中包括圖片。

這里，就CSS左右布局，左中右布局，水平與垂直居中，進(jìn)行討論。

CSS常用于控制頁面布局的定位機(jī)制：
普通流、相對(duì)定位、絕對(duì)定位和固定定位。還可以使用float屬性來讓元素浮動(dòng)。

1.左右布局

最常用的就是通過浮動(dòng)（左浮或右?。﹣韺?shí)現(xiàn)浮動(dòng)。
float屬性允許你將普通流中的元素在它的包含元素內(nèi)盡可能的向左或向右排列。
你應(yīng)該設(shè)置margin屬性來制定浮動(dòng)元素之間的間距。

不同元素的高度和寬度不同，為防止浮動(dòng)元素的后一元素自動(dòng)上浮，可以為父元素賦予clearfix類來清除浮動(dòng)解決這一問題。


  
left

  
right

同時(shí)在CSS中關(guān)于偽類作出聲明：

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

設(shè)置左浮動(dòng)（或右浮動(dòng)），將兩個(gè)子元素左右并排實(shí)現(xiàn)布局：

.descendant1,
.descendant1 {
  float: left;
  margin-left: 30px;
}

還可以通過絕對(duì)定位,通過元素脫離文檔流來實(shí)現(xiàn)。


  
left

  
right


.parent {
  position: relative;
}
.descendant1 {
  position: absolute;
  left: 0;
  top: 0;
}
.descendant2 {
  position: absolute;
  left: 60px;
  top: 0;
}
2.左中右布局

我們類比左右布局，在此基礎(chǔ)上實(shí)現(xiàn)由兩個(gè)元素變?yōu)槿齻€(gè)元素的布局。

通過全部左浮（或右?。?shí)現(xiàn)：


  
left

  
center

  
right


.descendant1,
.descendant2,
.descendant3 {
  float: left;
  margin-left: 20px;
}

同理，第一個(gè)元素左浮，第三個(gè)元素右?。煌瑫r(shí)設(shè)置三個(gè)元素為內(nèi)聯(lián)元素：

.descendant1 {
  float: left;
  margin-left: 20px;
  display: inline-block;
}
.descendant2 {
  margin-left:20px;
  display: inline-block;
}
.descendant3 {
  float: right;
  margin-right: 260px;
  display: inline-block;
}

通過絕對(duì)定位：


  
left

  
center

  
right


.parent {
  position: relative;
}
.descendant1 {
  position: absolute;
  left: 0;
  top: 0;
}
.descendant2 {
  position: absolute;
  left: 60px;
  top: 0;
}
.descendant3 {
  position: absolute;
  left: 120px;
  top: 0;
}
3.水平居中

文字居中：

text-align: center;

如果想讓一個(gè)元素水平居中，首先確定你已經(jīng)給元素設(shè)定了一個(gè)寬度（否則將溢滿整個(gè)屏幕）。
可以通過設(shè)置左右的外邊距為auto值來居中（包括圖片）。


  
You can go to everywhere.
    
If you like.
  


p.text {
  max-width: 300px;
  text-align: center;
  margin: 0 auto;
}
4.垂直居中

在單行文本或按鈕、小圖中的文字很使用的方法，即設(shè)置行高與元素高度一致即可。


    button

p.text {
  height: 60px;
  line-height: 60px;
}

也可以根據(jù)實(shí)際需要尺寸，為所在元素設(shè)置上下的padding來實(shí)現(xiàn)居中:

p.text {
  padding: 15px 0;
  line-height: 60px;
}




Written by：EdenSheng
Email：[email protected]

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

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

相關(guān)文章

  • 前端-CSS3&H5

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

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

  • CSS布局十八般武藝都在這里了

    摘要：清單一些說明注意文檔的書寫順序，先寫兩側(cè)欄，再寫主面板，更換后則側(cè)欄會(huì)被擠到下一列圣杯布局和雙飛翼布局都會(huì)用到?？梢酝ㄟ^設(shè)置的屬性或使用雙飛翼布局避免問題。雙飛翼布局不用設(shè)置相對(duì)布局，以及對(duì)應(yīng)的和值。 本文首發(fā)于知乎專欄：前端指南 CSS布局 布局是CSS中一個(gè)重要部分，本文總結(jié)了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實(shí)現(xiàn)方式（包括傳統(tǒng)的...

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

  • CSS常見布局解決方案

    摘要：到此，我們了解常見的布局解決方案，這些只是參考，一樣的布局實(shí)現(xiàn)方式多種多樣。主要就使用從很久很久以前起，我們就拋棄了布局頁面，但是異常強(qiáng)大等屬性目前兼容性較差傲嬌的程序員應(yīng)該放棄太低版本的瀏覽器轉(zhuǎn)自常見布局解決方案 水平居中布局 1.margin + 定寬 Demo .child { width: 100px; margin: 0 auto; } ...

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

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

0條評(píng)論

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