CSS居中

劍指天涯心有夢發表於2018-06-06
CSS

引入css的四種方式:

  1. 內聯style屬性
  2. style標籤
  3. 外部檔案 css link
  4. @import url(./a.css);

實現並排效果

style="float: left;" 但是這樣可能會出現BUG,在浮動元素的父標籤寫上class="clearfix"

css內寫上

.clearfix::after{
    content: ``;
    display: block;
    clear: both;
}
複製程式碼

div高度

塊級元素的高度由其內部文件流元素的高度總和決定

文件流：文件內元素的流動方向。內聯元素從左往右流動，如果遇到阻礙(寬度不夠)，則換行繼續流動（如果一個英文單詞很長那麼它不會換行，使用word-break: break-all可使其換行）。塊級元素每一個元素都佔據一行，從上往下流動。如下圖所示：

CSS居中
脫離文件流：

  1. 相對於當前頁面定位position: fixed;但是會出現BUG，解決方法width: 100%然後出現另一個BUG，解決方法:增加一個div。
  2. position: absolute然後在其祖先元素加position: relative;相對於ralative的元素定位。

最大寬度

max-width:當頁面縮小時，會自動適應頁面，比直接設定寬度好用。

居中

  1. 內聯元素
  • 在父元素寫text-algin: center;即可可實現內聯元素水平居中。
  • 將內聯元素行高設定line-height: ;與父元素高度相同即可實現內聯元素垂直居中。
  1. 塊級元素
  • 設定塊級元素margin: 0 auto;即可實現塊級元素水平居中。
  • 使用position可實現塊級元素水平垂直居中。

html程式碼

<body>
    <div class="parent">parent
    <div class="child">child</div>
    </div>
</body>
複製程式碼

css程式碼

.parent{
    height: 200px;
    width: 200px;
    border: 1px solid red;
    position: relative;
}
div.child{
    height: 50px;
    width: 50px;
    background: red;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
複製程式碼

CSS居中
3. flex居中

  • 在父元素上寫

      display: flex;
  justify-content: center;
  align-items: center;
複製程式碼

    可實現子元素水平垂直居中

相關文章