css佈局方法

樑廣銘發表於2018-06-12
CSS

1、左右佈局

這就要說到一個屬性float，使用float: left;就可以讓浮動元素 會脫離正常的文件佈局流，並吸附到其父容器的左邊。在正常佈局中位於該浮動元素之下的內容，此時會圍繞著浮動元素，填滿其右側的空間。但是，子類使用float來使元素並排，那麼父類就需要使用clearfix來防止子元素下方的標籤浮動上來貼和。

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

這樣所有元素就會緊貼左邊浮動，如果想要左右浮動，就可以把最右邊的元素設定為float: right;這樣就可以實現左右佈局。

2、左中右佈局

左中右佈局，父元素有三個子元素，首先先把三個子元素浮動並排起來如左右佈局一樣，然後給後兩個元素都設定一個margin左邊距，父元素設定水平居中;就可以實現左中右佈局

<ol>
    <li id="portfolio1">所有</li>
    <li id="portfolio2">框架</li>
    <li id="portfolio3">原生 JS&amp;CSS</li>
</ol>
li{
    float: left;
    margin-left: 40px;
}
ol {
    margin: 0 auto;
    display: inline-block;
    vertical-align: top;
}

3、水平居中

  • 對於行內元素(inline)：text-align: center;
  • 對於塊級元素(block)：設定寬度且 marigin-left 和 margin-right 是設成 auto
  • 對於多個塊級元素：對父元素設定 text-align: center;，對子元素設定 display: inline-block;；或者使用 flex 佈局

4、垂直居中

  • 對於行內元素(inline)設定上下 pandding 相等；或者設定 line-height 和 height 相等
  • 對於塊級元素(block)，父元素需使用相對定位：子元素使用絕對佈局 top: 50%;，再用負的 margin-top 把子元素往上拉一半的高度

5、其他小技巧

  • box-shadow可以給塊設定陰影，看起來更立體，谷歌搜尋css shadow generator可以自己調整樣式。
  • transition: all 0.3s;動畫屬性，可以給所有變化加入過渡動畫和過渡時間。
  • cursor: pointer;滑鼠懸停時I型可以變成手指點選形狀
  • border: 1px solid red; border邊框可以用來除錯標籤的所佔位置。
  • 當設定display: inline-block; 需要加上vertical-align: top; 來去除底層多出的空間。
  • background-image: url(../img/girl.jpg); 設定背景圖片background-position: center center;可以使背景圖片垂直水平居中， background-size: cover;使背景圖片可以按比例縮放。
  • 谷歌搜尋css linear-gradient generator可以設定一個元素的漸變色，來使一個元素包含多種顏色。

相關文章