覆蓋

選擇器的特異度(Specificity)

122 優先順序更高，會 覆蓋 022

<button class="btn">普通按鈕</button>
<button class="btn primary">主要按鈕</button>

<style>
  .btn {
    display: inline-block;
    padding: 0.36em 0.8em;
    margin-right: 0.5em;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    border-radius: 0.3em;
    border: none;
    background: #e6e6e6;
    color: #333;
  }
  .btn.primary {
    color: #fff;
    background: #218de6;
  }
</style>
 

繼承

某些屬性會自動繼承其父元素的計算值，除非顯式指定一個值

This is a test of inherit

<p>This is a <em>test</em> of <strong> inherit </strong></p>
<style>
  body {
    font-size: 20px;
  }
  p {
    color: blue;
  }
  em {
    color: red;
  }
</style>
 

顯式繼承

inherit 關鍵字

* {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}
.some-widget {
  box-sizing: content-box;
}

初始值

初始值

• CSS 中， 每個屬性都有一個初始值
  • background-color 的初始值為 transparent
  • margin-left 的初始值為 0
• 可以使用 initial 關鍵字顯式重置為初始值
  • background-color: initial

CSS 求值過程

得到 DOM 樹 樣式規則後開始計算

佈局(Layout)

佈局(Layout)是什麼？

• 確定內容的大小和位置的演算法
• 依據元素、容器、兄弟節點和
  內容等資訊來計算

佈局相關技術

• 常規流

  • 行級
  • 塊級
  • 表格佈局
  • FlexBox
  • Grid 佈局

• 浮動

• 絕對定位

width

• 指定 content box 寬度
• 取值為長度、百分數、auto
• auto 由瀏覽器根據其它屬性確定
• 百分數相對於容器的 content box 寬度

height

• 指定 content box 高度
• 取值為長度、百分數、auto
• auto 取值由內容計算得來
• 百分數相對於容器的 content box 高度,
• 容器有指定的高度時，百分數才生效

padding

• 指定元素四個方向的內邊距
• 百分數相對於容器寬度

/* 應用於所有邊 */
padding: 1em;

/* 上邊下邊 | 左邊右邊 */
padding: 5% 10%;

/* 上邊 | 左邊右邊 | 下邊 */
padding: 1em 2em 2em;

/* 上邊 | 右邊 | 下邊 | 左邊 */
padding: 5px 1em 0 2em;

border

• 指定容器邊框樣式、粗細和顏色
• 三種屬性
  • border-width
  • border-style
  • border-color
• 四個方向
• border-top
• border-right
• border-bottom
• border-left

border: 1px solid #ccc;

border-left: 1px solid #ccc;
border-right: 2px dotted red;

border-width: 1px 2px 3px 4px;
border-style: solid;
border-color: green blue;

border-left-width: 3px;
border-top-color: #f00;

margin

• 指定元素四個方向的外邊距
• 取值可以是長度、百分數、auto
• 百分數相對於容器寬度

<div></div>
<style>
  div {
    width: 200px;
    height: 200px;
    background: coral;
    margin-left: auto;
    margin-right: auto;
  }
</style>

margin collapse

<div class="a"></div>
<div class="b"></div>
<style>
  .a {
    background: lightblue;
    height: 100px;
    margin-bottom: 100px;
  }
  .b {
    background: coral;
    height: 100px;
    margin-top: 100px;
  }
</style>

box-sizing; border-box

This is the behavior of width and height as specified by CSS2.1. The specified width and height (and respective min/max properties) apply to the width and height respectively of the content box of the element.

Length and percentages values for width and height (and respective min/max properties) on this element determine the border box of the element.

<p class="a">
  This is the behavior of width and height as specified by CSS2.1. The specified
  width and height (and respective min/max properties) apply to the width and
  height respectively of the content box of the element.
</p>
<p class="b">
  Length and percentages values for width and height (and respective min/max
  properties) on this element determine the border box of the element.
</p>
<style>
  html {
  font-size: 24px;
  }
   .a {
  width: 100%;
  padding: 1em;
  border: 3px solid #CCC;
  }
   .b {
  box- S izing: border-box;
  width :100%;
  padding: 1em;
  border: 3px solid #CCC ;
  }
</style>

overflow

visible：預設，溢位顯示
hidden：溢位部分隱藏
scroll：滾動條
auto:自動

塊級 vs.行級

display 屬性

常規流 Normal Flow

• 根元素、浮動和絕對定位的元素會脫離常規流
• 其它元素都在常規流之內(in-flow)
• 常規流中的盒子，在某種排版上下文中參與佈局

行級排版上下文

• Inline Formatting Context (IFC)
• 只包含行級盒子的容器會建立一個 IFC
• IFC 內的排版規則
  • 盒子在一行內水平擺放
  • 一行放不下時，換行顯示
  • text-align 決定一行內盒子的水平對齊
  • vertical-align 決定一個盒子在行內的垂直對齊
  • 避開浮動(float)元素*

<div>
  This is a paragraph of text with Long word Honorificabilitudinitatibus. Here
  is an image <br/>
  <img src="https://assets.codepen.io/59477/cat.png" alt="cat" />
  And <em> Inline Block</em>
</div>
<style>
  div {
    color: white;
    width: 14em;
    //overflow-wrap: break-word;
    background: #411;
  }
  em {
    display: inline-block;
    width: 3em;
    background: #33c;
  }
</style>

塊級排版上下文

• Block Formatting Context (BFC)
• 某些容器會建立一個 BFC
  • 根元素
  • 浮動、絕對定位、inline-block
  • Flex 子項和 Grid 子項
  • overflow 值不是 visible 的塊盒
  • display: flow-root;

BFC 內的排版規則

• 盒子從上到下襬放
• 垂直 margin 合併
• BFC 內盒字的 margin 不會與外面的合併
• BFC 不會和浮動元素重疊

<span>
  This is a text and
  <div>block</div>
  and other text.
</span>
<style>
  span {
    line-height: 3;
    border: 2px solid red;
    background: coral;
  }
  div {
    line-height: 1.5;
    background: lime;
  }
</style>

Flex 排版上下文

• 一種新的排版上下文
• 它可以控制子級盒子的:
  • 擺放的流向(→←↑↓)
  • 擺放順序
  • 盒子寬度和高度
  • 水平和垂直方向的對齊
  • 是否允許折行

<div class="container">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</div> 
<style>
.container { 
display: flex;|
border: 2px solid #966;
}
.a, .b, .c {
text-align: center;
padding: 1em;
}
.a {
background: #fcc;
}
.b {
background: #cfc;
}
.c {
background: #ccf;
}

flex-direction

/* The direction text is laid out in a line */
flex-direction: row;

/* Like <row>, but reversed */
flex-direction: row-reverse;

/* The direction in which lines of text are stacked */
flex-direction: column;

/* Like <column>, but reversed */
flex-direction: column-reverse;

justify-content

align-items

align-self

order

Flexibility

• 可以設定子項的彈性:當容器有剩餘空間時，會伸展;容器空間不夠時，會收縮。
• flex-grow 有剩餘空間時的伸展能力
• flex-shrink 容器空間不足時收縮的能力 預設 1 可被壓縮
• flex-basis 沒有伸展或收縮時的基礎長度

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>
<style>
  .container {
    display: flex;
  }
  .a,
  .b,
  .c {
    width: 100px;
  }
  .a {
    flex-grow: 2;
  }
  .b {
    flex-grow: 1;
  }
</style>

flex

Grid 佈局

• display: grid 使元素生成一個塊級的 Grid 容器
• 使用 grid-template 相關屬性將容器劃分為網格
• auto 可佔用所有
• 1fr 剩餘的分份

grid-line 網格線

grid-area: auto / auto / auto / auto;

grid-area 網格區域：grid-row-start 會被設為第一個值，grid-column-start 為第二個值， grid-row-end 為第三個值，grid-column-end 為第四個值

float 浮動

float:left/right;

position 位置