div 與 後代選擇器
div:
它本身是沒有語意的,單純拿來排版用的標籤,因為是排版用所以會有區塊元素的特性。
後代選擇器:
我們拿 a 連結來解釋,先寫一段 CSS 效果套用上去,此時所有 HTML 上的 a 連結效果都會一樣,但又想在把某區塊的 a 連結做不同的效果,這時候就需要用後代選擇器,來達成不同的 CSS 效果,以下程式的 style1 跟 style2 它們的 a 連結就不一樣顏色。
例如:
style1 的 a 要設定紅色
CSS 寫法: .style1 a { color: red; }
style2 的 a 要設定粉色
CSS 寫法: .style1 a { color: pink; }
HTML:
// 設定 style1 跟 style2 兩個不一樣的 CSS,p 段落另外設定 content css 效果,都有使用到後代選擇器
<div class="style1">
<h2>標題</h2>
<a href="#">red</a>
<a href="#">red</a>
<a href="#">red</a>
<p class="content">這是段落</p>
<p>這是段落</p>
</div>
<div class="style2">
<a href="#">pink</a>
<a href="#">pink</a>
<a href="#">pink</a>
</div>
CSS:
.style1 h2 {
font-size: 30px;
}
.style1 a {
color: red;
}
.style1 .content {
font-weight: bold;
}
.style2 a {
color: pink;
}
呈現畫面:
margin
margin 就是使一個區塊產生外邊界距離,意思是在邊界向外推擠一個距離,能推擠上右下左四個方向,在排版上會蠻常使用。
使用方式:
上右下左: margin: 距離;
上: margin-top: 距離;
右: margin-right: 距離;
下: margin-bottom: 距離;
左: margin-left: 距離;
HTML:
<div class="box">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius debitis dolor libero excepturi atque odit laboriosam voluptatum mollitia rem assumenda ipsa pariatur praesentium, id molestias eveniet aspernatur sed expedita voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex exercitationem sequi mollitia nostrum ullam unde, aspernatur pariatur sed ducimus deleniti.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus, laudantium!</p>
</div>
CSS:
.box {
font-size: 30px;
border: 5px solid blue;
width: 500px;
margin-left: 30px; // box 向左推 30px
}
.box p {
margin-bottom: 30px; // p 段落向下推 30px
}
畫面:
padding
padding 就是在一個區塊內產生留白距離,例如我們想在區塊內部左邊推 30px 留白,而一個區塊內有多個區塊的話,就必須在內部每個區塊寫上 margin-left 向左推,可是這樣就會重複寫 margin-left ,此時就可以直接寫一個 padding-left 向內部左邊推擠 30px,來解決重複寫 margin-left 的問題。
使用方式:
上右下左: padding: 距離;
上: padding-top: 距離;
右: padding-right: 距離;
下: padding-bottom: 距離;
左: padding-left: 距離;
以下程式碼 padding 是寫向內推四個方向。
HTML:
<div class="box">
<h2>大標題</h2>
<ul>
<li>列表</li>
<li>列表</li>
</ul>
<a href="#">連結</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius debitis dolor libero excepturi atque odit laboriosam voluptatum mollitia rem assumenda ipsa pariatur praesentium, id molestias eveniet aspernatur sed expedita voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex exercitationem sequi mollitia nostrum ullam unde, aspernatur pariatur sed ducimus deleniti.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus, laudantium!</p>
</div>
CSS:
.box {
font-size: 30px;
border: 5px solid blue;
width: 500px;
margin-left: 30px;
padding: 30px; // 在 box 向內四個方向推 30px
}
.box p {
margin-bottom: 30px;
}
畫面呈現: