###### tags: `六角筆記王` `前端筆記` `HTML` `CSS`
# 排版教學
## 容器div

div:特別拿來排版用的，網頁排版都是有關容器的設計

## 清除樣式CSS Reset

兩種清除方法:

1.[css reset](https://meyerweb.com/eric/tools/css/reset/) :全部清乾淨

2.[css normalize](https://necolas.github.io/normalize.css/) :保留最基本的樣式css

## 顯示模式display

### 區塊元素 display: block

特性：
- 盡可能佔滿整個版面
- 可以去改寬高，沒寫的話會依照父元素
- 新區塊元素會另起一行呈現

哪幾個標籤是區塊元素： `h1`. `p` . `div`. `ul` .`li` ，他們的預設都為 display:block

### 行內元素 display: inline

特性：
- 比較常用在段落裡面，不想讓他另起一行時
- 如果在一行字裡面只想改某幾個字的樣式要使用 `span`
- 沒辦法設定寬高，解決方法：把它css改成`display:block` ，反之區塊也能變成行內元素

實用方法：為了讓a標籤比較好點，會把它設計成display:block，變成一顆按鈕

哪幾個標籤是區塊元素：`a`. `span(沒有意思，單純用來排版)`. `imput` . `img`

### 行內區塊元素inline-block

特性：

- 以inline的方式呈現，但同時擁有block的屬性
- 可設定元素的寬高/margin/padding
- 可水平排列

### 讓子層併排 display:flex

flex特性：

- 預設會並排
- 會依比例做伸縮，會依照父層去調整，裡面的子層寫超過父層也沒用
- 子層預設會等高(依照程度最長)，但也可以客製化個別高度

## 產生外邊界距離margin

區塊往外推空格，產生外邊界

margin: 10px; /*上下左右推移10px*/
margin-top: 10px; /*上推10px空白*/
margin-bottom: 10px; /*下推10px空白*/
margin-left: 10px; /*左推10px空白*/
margin-right:10px; /*右推10px空白*/

區塊小技巧：不要特別去寫高度，讓內文自動調整高度

## 產生內邊界距離padding

區塊往內文推空格，產生內邊界

## 快速產生無限區塊

1.設定父層的mt.mr.ml

2.設定子層的mb

3.以後再增加子層就不用調

<div class="box">
  <div class="box2">1</div>
  <div class="box2">2</div>
  <div class="box2">3</div>
  <div class="box2">3</div>
  <div class="box2">3</div>
  <div class="box2">3</div>
</div>

.box{
    width: 300px;
    padding-top: 30px;
    padding-left: 20px;
    padding-right: 20px;
    border: 1px solid red;
}
.box2{
    border: 1px solid green ;
    margin-bottom: 30px;
    text-align: center;
}


## (盒模型)Box Model

padding、border也會納入高度

margin不會影響

## 置中

### 區塊水平置中margin 0 auto

依照父元素做伸縮，如果是最外層就會依照body

### 文字水平調整text-align

區塊內的文字段落的位置

可以搭配斷行br，讓字排版更美

text-align: left;/*預設*/
text-align: center;/*常用*/
text-align: right;/*靠右*/

## 減少算的麻煩box-sizing

當你寫好寬高32px，區塊總寬高就是32px，剩下的往內推

.box{
	width: 32px;
	height: 32px;
	box-sizing: border-box;/*代表這個div是用box-sizing*/
}