CSS 放置的位置有三
- inline CSS
- internal CSS
- external CSS
內嵌CSS - 利用HTML的標籤屬性(Tag attribute)
<img src="img.png" alt="drawing">
利用CSS重設寬度為:200px,💡加入屬性style，如下;
⭕
<img src="img.png" alt="drawing" style="width: 200px;">
❌
<img src="img.png" alt="drawing" width="200px">
html attribue的寫法是 用=分開 鍵和值(雙引號)。
css style 的寫法是用:分開 鍵和值(沒有雙引號)。
internal
文字對齊
原始碼(css_align_internal.html)
<html>
<head>
<style>
h1 {text-align: center;}
p {text-align: center;}
div {text-align: center;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<div>This is a div.</div>
</body>
</html>external
原始碼(css_align_external.html)
<html>
<head>
<link rel="stylesheet" type="text/css" href="css_align_external.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<div>This is a div.</div>
</body>
</html>衝突
- 優先選擇
- 有!important的 inline style(設定在tag中的style) > 有!important的external css > inline style > css後寫的 > css先寫的
常見混淆
- inline,block,inline-block
- 100% vs 100vh
- 100vh 是實際裝置的可見範圍,100%指的是占用
parent多少百分比。 - 📌vh 要注意,在flex中的子項目中,如果有包含這個,會影響flex的縮放控制。
- 100vh 是實際裝置的可見範圍,100%指的是占用
- rem vs em
- rem是ROOT element em的幾倍
實驗
<section>
<style>
.wrapper {
width:100px;
height:50px;
border:solid 1px red;
}
.box-1{
margin-top:20%; /*結果是20px✔️不是以親代高度來計算,而是寬度*/
margin-left:20%; /*結果是20px ，符合直覺*/
width:20%; /*結果是20px ，符合直覺*/
height:20%; /*結果是10px ✔️，符合直覺*/
border:solid 1px green;
}
</style>
<div class="wrapper">
<div class="box-1">
box-1
</div>
</div>
</section>
.box-1中的20% 是親代寬度(100px)的20%,而不是高度(50px)，也就是說margin-top = 100px*20%而不是 不是 50px*20%💣margin-top:20%;/結果是20px✔️不是以親代高度來計算,而是寬度/margin-left:20%;/結果是20px ，符合直覺/width:20%;/結果是20px ，符合直覺/height:20%;/結果是10px ✔️，符合直覺/