?一、內外邊距學習:
(1)簡單理解:
padding為內邊距。padding不會影響元素的位置,只會調整元素的內容(文字)與邊框之間的間距。
margin為外邊距。margin會影響元素在流式布局中的位置,改變元素與相鄰元素之間的間距
?(2)具體理解:
margin:
- margin可以為正值、負值或百分比。正值表示元素與相鄰元素之間的間距,負值表示元素會覆蓋相鄰元素的部分,百分比則表示相對于父元素的寬度。
- margin的值可以分別指定上、右、下、左四個方向的距離:
margin:10px 60px 50px 20px; /* 上右下左 */ margin: 10px 20px; /* 上下 左右 */
- margin的值不會對元素自身大小產生影響,只會影響元素與相鄰元素之間的距離。
?padding:
- padding可以為正值、負值或百分比。正值表示元素內容與邊框之間的間距,負值則表示元素的內容會超出邊框,百分比則表示相對于元素的寬度。
- padding的值可以分別指定上、右、下、左四個方向的距離,也可以使用簡寫方式指定一到四個方向的距離。
- padding的值會影響元素的尺寸,增加padding會增加元素的大小。?
二、行內元素 vs 塊級元素學習:
一、基礎概念
1. 塊級元素 :
特點:
- 獨占一行,前后會自動換行
- 可以設置寬度(width)、高度(height)、內外邊距(margin/padding)
- 默認寬度是父元素的100%
常見塊級元素標簽:
<div>
?- 通用容器<p>
?- 段落<h1>-<h6>
?- 標題<ul>
,?<ol>
,?<li>
?- 列表<section>
,?<article>
,?<header>
,?<footer>
?- HTML5語義標簽
2. 行內元素 :
特點:
- 不會獨占一行,與其他行內元素排在同一行
- 設置寬度(width)、高度(height)無效
- 只能設置左右邊距(margin-left/right),上下邊距無效
- 默認寬度由內容決定
常見行內元素標簽:
<span>
?- 通用行內容器<a>
?- 鏈接<strong>
,?<em>
?- 強調文本<img>
?- 圖片(特殊,可以設置寬高)<input>
,?<button>
?- 表單元素
3. 常見:div和span的區別
<div>
是塊級元素,用于布局和分組大塊內容<span>
是行內元素,用于對文本的一部分進行樣式設置或操作
二、代碼示例
<!DOCTYPE html>
<html>
<head><style>.block {background-color: lightblue;padding: 10px; /* 內邊距*/margin: 10px; /* 外邊距*/}.inline {background-color: lightcoral;padding: 10px;margin: 10px;}</style>
</head>
<body><div class="block">我是div塊級元素1號</div><div class="block">我是div塊級元素2號</div><span class="inline">我是span行內元素1號</span><span class="inline">我是span行內元素2號</span>
</body>
</html>
?三、運行結果圖:
這里可以看出前面提到的行內元素的特點:margin只能設置左右邊距(margin-left/right),上下邊距無效:
三、實戰案例:
<!DOCTYPE html>
<html><head><style>.card {width: 300px;border: 1px solid #ccc;border-radius: 8px;padding: 15px;margin: 20px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);}.title {font-size: 20px;margin-bottom: 10px;color: #333;}.content {color: #666;line-height: 1.5;}.tags {margin-top: 15px;}.tag {display: inline-block;background-color: #f0f0f0;padding: 3px 8px;border-radius: 4px;margin-right: 5px;font-size: 12px;}.author {font-style: italic; /* 斜體 */color: #888;}</style></head><body><div class="card"><h2 class="title">前端學習指南</h2><p class="content">學習前端開發需要掌握HTML、CSS和JavaScript等基礎知識。HTML用于構建網頁的結構,CSS用于樣式設計,而JavaScript則用于實現交互功能。通過不斷實踐和學習,可以逐步提高前端開發技能。<span class="author">---island</span></p><div class="tags"><span class="tag">HTML</span><span class="tag">CSS</span><span class="tag">JavaScript</span></div></div></body>
</html>
?這里可以看到.tag這里有一個新的display,來學習一下:
1. display屬性基礎
display屬性:可以通過CSS的
display
屬性改變元素的顯示方式display: block
?- 轉為塊級元素display: inline
?- 轉為行內元素display: inline-block
?- 行內塊元素(可設置寬高但不換行
2.對比下三種方式:
3.三種顯示方式對比表
特性 | inline | block | inline-block |
---|---|---|---|
是否換行 | 不換行 | 換行 | 不換行 |
可設置寬高 | 不可以 | 可以 | 可以 |
內外邊距 | 只有左右有效 | 全部有效 | 全部有效 |
默認寬度 | 內容決定 | 父元素100% | 內容決定(可設寬高) |
典型HTML元素 | span, a | div, p | img, button |
?
?