---
# System prepended metadata

title: Web 排版 概念 整理
tags: [Web]

---

---
title: Web 排版 概念 整理 
tags: Web
description: 協助釐清Web排版的概念
---

# Web 排版 概念整理

<!-- Put the link to this slide here so people can follow -->
slide: https://hackmd.io/p/template-Talk-slide

---

## HTML Block and Inline Elements 

### inline元素 愛排隊
```

<a><abbr><acronym><b><bdo><big>
<br><button><cite><code><dfn><em>
<i><img><input><kbd><label><map>
<object><output><q><samp><script>
<select><small><span><strong><sub>
<sup><textarea><time><tt><var>
```
![](https://i.imgur.com/cgbElCD.png)

https://codepen.io/xx78826/pen/mdLjZBJ


### block元素 山大王
```
<address><article><aside><blockquote>
<canvas><dd><div><dl><dt><fieldset><figcaption>
<figure><footer><form><h1>-<h6><header>
<hr><li><main><nav><noscript><ol><p><pre>
<section><table><tfoot><ul><video>`
```

![](https://i.imgur.com/5qQPDkF.png)

https://codepen.io/xx78826/pen/WNJKqoR

部分來自 w3school
部分來自 金魚都能懂的CSS

### 排序置中的方法

1.float: left;
https://codepen.io/xx78826/pen/zYjLgKg
2.margin: auto;
https://codepen.io/xx78826/pen/yLjqmgZ
3.display: flex;
  align-items: center;
  justify-content: center;
https://codepen.io/xx78826/pen/YzLjmVN

### box模式

![](https://i.imgur.com/h3xrlcl.png)

If the padding property has four values:

padding: 25px 50px 75px 100px;
         上   右    下   左
top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px

### 改變margin顏色
https://codepen.io/xx78826/pen/BaxPXPP



---

## Who am I?

- Front-end developer
- VSCode :heart: 
- I use tabs. :cat: 

---
