[第六週] CSS Part3 - Box Model 盒模型


什麼是盒模型

  • 每個 html 的元素都是一個 Box Model, 主要裡包含了 Margin, Border, Padding, Contant,合在一起就是我們看到的網頁內容。

    圖片來源

  • 基本的 box model:

.box {
  width: 350px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

Box Model 排版跑掉怎麼辦

box-sizing 的功能是用來調整區塊的內距與邊框計算方式,避免因為設定 padding 、 border 後,整個 div區塊大小都變了。
box-sizing:border-box;

display 分三種

  1. block,一個元素一行,可調整任何東西, div、p、h1 的 display 預設都是 block。
  2. inline,元素都在同一行,無法調整寬高及邊距, span、a 的 display 預設都是 inline。調整 padding、margin 時只有跟左右的元素距離會動到,上下元素間不變。
  3. inline-block,對外像 inline,可併排在同一行; 對內像 block,可調整任何屬性

BEM 命名法

BEM 的名稱源於該方法學的三個組成部分英文字首,分别為:
Block 區塊
Element 元素
Modifier 修飾符
block__elemen--modifier

#box model #box sizing #css display #block #inline-block






Related Posts

[ JavaScript  12 ]  ES6 新增特性

[ JavaScript 12 ] ES6 新增特性

從模組化來看 npm

從模組化來看 npm

[ 筆記 ] CSS - FlexBox

[ 筆記 ] CSS - FlexBox



Comments











Sponsored