[ CSS 03 ] 盒模型(box model)與定位(position)


Posted by tzutzu858 on 2020-07-27

設計時加了 border 和 margin,他是內容物往外長,但是設計師跟你說要 200px * 100px,自己還要加加減減扣掉 border 和 margin,非常麻煩,所以可以利用 box-sizing

box-sizing: content-box; 內容物寬高
box-sizing: border-box; 意思是把 border 和 margin 都會考慮進來

補充 : MDN (The box model)


display 的三種形式:block、inline 與 inline-block

display屬性基本上可分為兩種顯示模式,一種是行內元素(inline),另一種為區塊元素(block)

常見區塊元素標籤:div、ul li、p、h1
常見行內元素標籤:span、a、imput、img

  • block : 元素寬度預設會撐到最大,使其占滿整個容器,多個元素會換行來呈現,並不會並排,div, h1, p...調什麼都可以
  • inline 行內元素 : 預設代表 span, a 。調寬高沒用,元素的寬高是根據內容決定,上下邊距沒用,只有左右會變
  • inline-block : button, input, select
    對外像 inline 可併排,對內像 block 可調各種屬性

px : 像素,圖像的基本單位是像素px(沒有比像素更精細的單位了)
em : 以母元素的基礎字體大小作為倍數的單位
母元素 12px
1em = 12px
2em = 24px
....

rem : 以根元素的基礎字體大小作為倍數的單位


定位(position)

static : 不會被特別定位在頁面上特定位置,而是照著瀏覽器預設的配置自動排版在頁面上。

relative :在一個設定為 position: relative 的元素內設定 top 、 right 、 bottom 和 left 屬性,會使其元素「相對地」調整其原本該出現的所在位置,而不管這些「相對定位」過的元素如何在頁面上移動位置或增加了多少空間,都不會影響到原本其他元素所在的位置。

fixed : viewport,相對於瀏覽器做定位,即便頁面捲動,它還是會固定在相同的位置。和 relative 一樣,會使用 top 、 right 、 bottom 和 left 屬性來定位。

absolute : 某個參考點做定位,往上找不是 static 做定位

.box {
  position: relative;
}

.box {
  position: absolute;
  top: 10px;
  right: 10pz;
}

決定圖層順序 z-index

z-index: 2; 數字越大越前面

sticky

沒有到特定位置時是 static,滾到最上面時就變成 fixed 狀態


補充好用工具 :


補充文章 :
圖解 Flexbox 基本屬性

Flexbox

justify-content 屬性定義了瀏覽器之間,如何分配順著彈性容器主軸(或者網格行軸)的元素之間及其周圍的空間。

  • flex-start: 元素和容器的左端對齊。
  • flex-end: 元素和容器的右端對齊。
  • center: 元素在容器裏居中。
  • space-between: 均勻排列每個元素,首個元素放置於起點,末尾元素放置於終點。
  • space-around: 元素周圍保持相等的距離。

align-items

  • flex-start: 元素與容器的頂部對齊。
  • flex-end: 元素與容器的底部對齊。
  • center: 元素縱向居中。
  • baseline: 元素在容器的基線位置顯示。
  • stretch: 元素被拉伸以填滿整個容器。

flex-direction

  • row: 元素擺放的方向和文字方向一致。
  • row-reverse: 元素擺放的方向和文字的方向相反。
  • column: 元素從上放到下。
  • column-reverse: 元素從下放到上。

注意 :

  1. 當調轉列或行的方向後(例如 : flex-direction:row-reverse),flex-start 和 flex-end 對應的方向也被調轉了。
  2. 當 flex 以直列爲方向時(例如 : flex-direction:column;),justify-content 控制縱向對齊,align-items 控制橫向對齊。

使用 order 來調正特定元素的位置

#pond {
  display: flex;
}

.yellow {
order:2;
}

box-sizing

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


排版補充 :
white-space: pre-line; : white-space 屬性決定如何處理元素內的空白字元
word-break; break-word : word-break 有屬性可以選擇讓文字要不要溢出內容框










Related Posts

CS50 HTTP (Hypertext Transfer Protocol)

CS50 HTTP (Hypertext Transfer Protocol)

MPLAB X IDE 黑色主題

MPLAB X IDE 黑色主題

ActionResult

ActionResult


Comments