css: Box Model
CSS的Box Model重點包含margin外邊界，border編框，和padding內邊界。
目錄:
- 1. margin 外邊界
- 2. border 邊框
- 3. padding 內邊界
- 語法練習: margin, border, padding
- html + css 顯示範例
- 4. 進階排版細節
- 5. Reset與Normalize
- 相關連結
1. margin 外邊界
外邊界-上.右.下.左.語法
p {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
外邊界語法簡寫
p {
margin: 10px 10px 10px 10px; /*上下左右外邊界皆10px*/
margin: 10px; /*數值若相同，可只寫一個*/
margin: 50px 30px 50px 30px; /*上下50px,右左30px*/
margin: 50px 30px; /*上下相同,右左相同*/
}
2. border 邊框
p {
border-width: 1px; /*邊框寬度*/
border-color: red; /*邊框顏色*/
border-style: solid; /*邊框樣式: 實線*/
border-style: dotted; /*邊框樣式: 點狀*/
border-style: dashed; /*邊框樣式: 虛線*/
border: 1px red solid; /*寬度.顏色.樣式簡寫成一行*/
}
3. padding 內邊界
p {
padding: 20px;
}
語法練習: margin, border, padding
html
<h1>Box Model</h1>
<article>
<h2>重點</h2>
<p id="title">領導者的特質</p>
<p id="zh">「我最常做的事情是，學會給予夥伴所需要的空間，並且信任我的團隊。」</p>
<p id="en">Put them first. It’s a people-first mindset that unlocks sales success. Some people think of “sharks” as ruthless predators, but that’s not how I do business. I know how to innovate, disrupt the marketplace, orchestrate a killer investment deal, and grow a business. But my people-first perspective is at the heart of everything I do. I intentionally seek win-win relationships and solutions.
</p>
</article>
<footer>
<p>© 版權所有，翻譯不究</p>
</footer>
css:
p#en {
color: rgba(30,30,20,50);
background-color: yellow;
font-family: 'Courier New', Courier, monospace;
width: 400px;
margin-top: 50px;
margin-left: 130px;
margin-bottom: 50px;
border: 2px brown dashed; /*寬度.顏色.樣式簡寫*/
padding: 20px; /*內邊界*/
}
html + css 顯示範例
文章
領導者的特質
「我最常做的事情是，學會給予夥伴所需要的空間，並且信任我的團隊。」
Put them first. It’s a people-first mindset that unlocks sales success. Some people think of “sharks” as ruthless predators, but that’s not how I do business. I know how to innovate, disrupt the marketplace, orchestrate a killer investment deal, and grow a business. But my people-first perspective is at the heart of everything I do. I intentionally seek win-win relationships and solutions.
4. 進階排版細節
4.1 內邊界padding和box-sizing
排版時，內邊界padding的排版位置會受到外邊界border和邊框寬度border-width影響。
解決此問題，可使用在需要排成同大小的文字框內的css加上
box-sizing: border-box;
(讓兩個文字框的寬度相同，變成包含邊框寬度的含稅價)
.p1 {
width: 400px;
border: 20px brown dotted; /*以上三行簡寫*/
padding: 20px;
box-sizing: border-box;
}
.p2 {
width: 400px;
/*width: 480px; /*寬度要改成400+80,黃色部份才會一樣寬*/
box-sizing: border-box; /*包含box邊框的寬度*/
}
4.2 邊框曲度 border-radius
4.2.1 圓角
p {
border-radius: 15px;
}
Put them first. It’s a people-first mindset that unlocks sales success. Some people think of “sharks” as ruthless predators, but that’s not how I do business. I know how to innovate, disrupt the marketplace, orchestrate a killer investment deal, and grow a business. But my people-first perspective is at the heart of everything I do. I intentionally seek win-win relationships and solutions.
Put them first. It’s a people-first mindset that unlocks sales success. Some people think of “sharks” as ruthless predators, but that’s not how I do business. I know how to innovate, disrupt the marketplace, orchestrate a killer investment deal, and grow a business. But my people-first perspective is at the heart of everything I do. I intentionally seek win-win relationships and solutions.
4.2.2 圓
用css畫圖：
當border-radius超過長與高的一半，圖案會變成圓。
.p {
width: 100px;
height: 100px;
background-color: pink;
border-radius: 90px;
}
.p {
width: 200px;
height: 200px;
background-color: lightgreen;
border-radius: 100px;
}
4.3 block區塊 與 inline
並不是所有元素都能調寬度和高度。來比較一下block與inline：
4.3.1 block 元素
block會把其他元素擠到下一行。
<div> div 會占滿整個區塊，除非設定 width 寬度 </div>
4.3.2 inline 元素
inline不會把其他元素擠到下一行，而且無法設定width和height。
html
<a href="#" class="link1">首頁</a>
css
.link1 {
background-color: yellow;
}
inline設定寬度
加上display: block;，可將inline變成具有block元素的屬性去調寬度與高度。
.link2 {
background-color: yellow;
display: block; /*重要，加上後可設定寬度高度邊界*/
}
inline維持一排的型態
加上display: inline-block;
.link3 {
background-color: yellow;
display: inline-block; /*維持一排的型態，可設定高度*/
height: 10px;
padding: 10px;
}
5. Reset與Normalize
reset: 歸零
normalize: 不歸零