CSS float 相關

tags: HTML, CSS

沒有版面設置

就會像是本文字全塞進去版面，完整地從左邊打字到右邊比較不好閱讀。
所以這邊就會需要用到Display的登場

關於 "display" 屬性

display 是設計 CSS 版面配置中最重要的屬性，每個 HTML 元素都有一個預設的 display 值，不同的元素屬性會有不同的預設值。大多數的預設值是block以及inline。

1.block

像<div>,<header>,<footer>,<section>

2.inline

像<a>,<span>

3.none

通常會搭配 JavaScript 一起使用例如使用 滑鼠游標滑過的時候才會SHOW出來之類的功能這個時候沒有SHOW出來的時間就是這個屬性發揮功能。

4.其他

例如 list-item 和 table

其他可以參閱這裡: https://developer.mozilla.org/en-US/docs/Web/CSS/display

補充說明

就像我之前說過的，每個元素都有一個預設的 display 屬性，不過你可以隨時隨地地覆蓋這個屬性值

5.inline-block(比較舊知道就好，現在用比較多Flexbox)

跟display-inline很像可是你可以設定width以及height的屬性

.box{
    float: left;
    width: 200px;
    height: 100px;
    margin: 1em;
}
.after-box{
    clear: left;
}

margin: auto;(水平置中)

#main {
  width: 600px;
  margin: 0 auto; 
}

設定區塊元素的 width 屬性，可以避免該元素從左到右撐滿容器，然後你可以設定左右外邊距（margin-left 與 margin-right）為 auto 來使其水平居中。

max-width

在這個屬性的使用之後可以更好的隨著版面大小的改變去處理當瀏覽器視窗小於元素寬度的情況。

第一個圖沒有使用max-width

第二張有

關於 Box Model（區塊模型）

兩個寬度一樣的程式碼跑出來的樣貌卻不太一樣，因為margin跟padding的關係，讓邊界被撐開了。

.simple {
  width: 500px;
  margin: 20px auto;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border-width: 10px;
}

關於 box-sizing 屬性

當你設定一個元素樣式為 box-sizing: border-box;，這個元素的內距和邊框將不會增加元素本身的寬度。

.simple {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

這邊可以看到寬度確實是一樣的

關於 position 屬性

  • static

static 是預設值。任何套用 position: static; 的元素「不會被特別定位」在頁面上特定位置，而是照著瀏覽器預設的配置自動排版在頁面上，所有其他的屬性值都代表該元素會被定位在頁面上。

.static {
  position: static;
}
  • relative

relative是讓第二行程式碼的屬性沿著第一行去做相對的位置

.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

fixed

固定定位（position: fixed）的元素會相對於瀏覽器視窗來定位，這意味著即便頁面捲動，它還是會固定在相同的位置。且利用top 、 right 、 bottom 和 left 屬性來定位。

簡單來說被 fix 住的內容會被固定在頁面上就算滾動也不會跑掉。

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

absolute

通常跟relative一起使用，是絕對位置，當網頁往下拉時，元素也會跟著改變位置，其元素的位置由 top、left、right、bottom 所決定。

.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}

關於 float 屬性

這個屬性的功能是使文章包裹著圖片，大多數拿來使用排版

img {
  float: right;
  margin: 0 0 1em 1em;
}

clear屬性

clear 屬性規定元素的哪一側不允許其他浮動元素。

  • none
  • 元素不會向下移動清除之前的浮動
  • left
  • 元素被向下移動用於清除之前的左浮動
  • right
  • 元素被向下移動用於清除之前的右浮動
  • both
  • 元素被向下移動用於清除之前的左右浮動

clearfix 這個功能可以調整讓外框包裹的元素自動符合內容的高度(待補充)

.clearfix{
    overflow: auto;
    
}

百分百寬度

這樣做相對的百分比的時候就可以讓大小很固定比較不容易跑版因為會照比例走

nav {
    folat: left;
    width: 25%;

}
section{ 
    margin-left: 25%;
}

媒體查詢(meadia queries)

讓格式也可以很好的呈現在手機上面

可以設定條件讓版面小於一定程度的時候display可以改變呈現方式，更可以適用於更多的行動裝置上面

@media screen and (min-width:600px){
    nav{
    float: left;
    width: 25%;
    }
    section{
    margin-left: 25%;
    }
}
@media screen and (max-width:599px) {
    nav li{
    display: inline;
    }
}

column

多欄文字版面配置

.three column {
    padding: 1em;
    -moz-colum-count: 3;
    -moz-colum-gap: 1em;
    -webkit-colum-count: 3;
    -webkit-column-gap: 1em;
    column-count: 3;
    column-gap: 1em;
    
}

flexbox(還沒講)

Select a repo