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

資訊專欄INFORMATION COLUMN

CSS常見布局與居中

April / 2810人閱讀

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

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

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

1.左右布局

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

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


  
left

  
right

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

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

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

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

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


  
left

  
right


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

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

通過全部左浮（或右浮）實現(xiàn)：


  
left

  
center

  
right


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

同理，第一個元素左浮，第三個元素右浮；同時設(shè)置三個元素為內(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;
}

通過絕對定位：


  
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;

如果想讓一個元素水平居中，首先確定你已經(jīng)給元素設(shè)定了一個寬度（否則將溢滿整個屏幕）。
可以通過設(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è)置上下的padding來實現(xiàn)居中:

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




Written by：EdenSheng
Email：singlesaulwork@gmail.com

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

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

相關(guān)文章

  • 前端-CSS3&H5

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

    xiaolinbang 評論0 收藏0

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

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

    includecmath 評論0 收藏0

  • CSS常見布局解決方案

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

    Big_fat_cat 評論0 收藏0

發(fā)表評論

0條評論

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