跟著禹神學前端——CSS 基礎 (2)

李商隐的猫發表於2024-10-31

1. CSS 長度單位

px：畫素
em：相對元素 font-size 的倍數
rem：相對根字型大小的倍數，html 標籤就是根。
%：相對父元素計算的百分比。

CSS中設定長度，必須加單位，否則樣式無效。

2. 元素的顯示模式

塊元素（block）

又稱：塊級元素

特點：

在頁面中獨佔一行，不會與任何元素共用一行，是從上到下排列的。

預設寬度：撐滿父元素。

預設高度：由內容撐開。

可以透過 CSS 設定寬高。

舉例：<html>、 <body>、 <div>、<h1>、<h6>、<hr>、<p>、<pre>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>、<table>、<tbody>、<thead>、<tfoot>、<tr>、<caption>、form、<option>

行內元素（inline）

又稱：內聯元素

特點：

在頁面中不獨佔一行，一行中不能容納下的行內元素，會在下一行繼續從左到右排列。

預設寬度：由內容撐開。

預設高度：由內容撐開。

無法透過 CSS 設定寬高。

舉例：<span>、 <br>、<em>、<strong>、<sup>、<sub>、<del>、<ins>、<a>、label>

行內塊元素（inline-block）

又稱：內聯塊元素

特點：

在頁面中不獨佔一行，一行中不能容納下的行內元素，會在下一行繼續從左到右排列。

預設寬度：由內容撐開。

預設高度：由內容撐開。

可以透過 CSS 設定寬高。

舉例：<img>、<td>、<th>、<input>、<textarea>、<select>、<button>、<ifame>

注意：元素早期只分為：行內元素、塊級元素，區分條件也只有一條：是否獨佔一行。如果按照這種分類方式，行內塊元素應該算作行內元素。

3. 修改元素顯示模式

透過 CSS 中的 display 屬性可以修改元素的顯示模式，常用值如下：

值	描述
`none`	元素會被隱藏
`block`	元素將作為塊級元素顯示
`inline`	元素將作為內聯元素顯示
`inline-block`	元素將作為行內塊元素顯示

4. 盒子模型的組成

CSS 會把所有的 HTML 元素都看成一個盒子，所有的樣式也都是基於這個盒子。

margin（外邊距）：盒子與外界的距離。
border（邊框）：盒子的邊框。
padding（內邊框）：緊貼內容的補白區域。
content（內容）：元素中的文字或後代元素都是他的內容。

圖示如下：

盒子的大小 = content + 左右 padding + 左右 border 。

注意：外邊距 margin 不會影響盒子的大小，但會影響盒子的位置。

div{
    width: 400px;
    height: 400px;
    /* 內邊距 */
    padding: 20px;
    /* 邊框 */
    border: 10px solid black;
    /* 外邊距 */
    margin: 50px;
    background-color: gray;
}

5. 盒子內容區（content）

CSS 屬性名	功能	屬性值
`width`	設定內容區域的寬度	長度
`max-width`	設定內容區域的最大寬度	長度
`min-width`	設定內容區域的最小寬度	長度
`height`	設定內容區域的高度	長度
`max-height`	設定內容區域的最大高度	長度
`min-height`	設定內容區域的最小高度	長度

max-width、min-width 一般不與 width 一起使用。

max-height、min-height 一般不與 height 一起使用。

6. 關於預設寬度

所謂的預設寬度，就是不設定 width 屬性時，元素所呈現出來的寬度。

總寬度 = 父的 content - 自身的左右 margin 。

內容區的寬度 = 父的 content - 自身的左右 margin - 自身的左右 border - 自身的左右 padding 。

7. 盒子的內邊距（padding）

CSS屬性名	功能	屬性值
`padding-top`	上內邊距	長度
`padding-right`	右內邊距	長度
`padding-bottom`	下內邊距	長度
`padding-left`	左內邊距	長度
`padding`	複合屬性	長度，可以設定 1~4 個值

padding 複合屬性的使用規則：

padding：10px; : 四個方向內邊距都是 10px。
padding：10px 20px; : 上下10px，左右 20px。（上下、左右）
padding：10px 20px 30px; : 上10px，左右20px，下30px 。（上、左右、下）
padding：10px 20px 30px 40px; : 上 10px，右20px，左30px，左40px。（上，右，下，左）

注意點：

padding 的值不能為負數。

行內元素的左右內邊距是沒問題的，上下內邊距不能完美的設定。

塊級元素、行內塊元素，四個方向內邊距都可以完美設定。

8. 盒子的邊框（border）

CSS屬性名	功能	屬性值
`border-style`	邊框線風格複合了四個方向的邊框風格	`none`：預設值 `solid`：實線 `dashed`：虛線 `dotted`：點線 `double`：雙實線 ......
`border-width`	邊框線寬度複合了四個方向的邊框寬度	長度，預設 3px
`border-color`	邊框線顏色複合了四個方向的邊框顏色	顏色，預設黑色
`border`	複合屬性	值沒有順序和數量要求
`border-left` `border-left-style` `border-left-width` `border-left-color` `border-right` `border-right-style` `border-right-width` `border-right-color` `border-top` `border-top-style` `border-top-width` `border-top-color` `border-bottom` `border-bottom-style` `border-bottom-width` `border-bottom-color`	分辨設定各個方向的邊框	值沒有順序和數量要求

邊框相關屬性一共 20 個

border-style、border-width、border-color 其實也是複合屬性

9. 盒子外邊距（margin）

CSS屬性	功能	屬性值
`margin-left`	左外邊距	CSS 中的長度值
`margin-right`	右外邊距	CSS 中的長度值
`margin-top`	上外邊距	CSS 中的長度值
`margin-bottom`	下外邊距	CSS 中的長度值
`margin`	複合屬性，可以寫 1~4 個值，規律同 padding（順時針）	CSS 中的長度值

margin 注意事項：

子元素的 margin，是參考父元素的 content計算的。（因為是父親的 content 中的裝的內容）。
上 margin、左 margin：影響自己的位置，下 margin、右 margin：影響後面兄弟元素的位置。
塊級元素、行內塊元素，均可以完美的設定四個方向的 margin；但行內元素，左右 margin 可以完美設定，上下 margin 設定無效。
margin 的值也可以是 auto，如果給一個塊級元素設定左右 margin 都為 auto，該塊級元素會在父元素中水平居中。
margin 的值可以是負數。

10. margin塌陷問題

什麼是 margin 塌陷？

第一個子元素的上 margin 會作用在父元素上，最後一個子元素的下margin會作用在父元素上。

如何解決 margin 塌陷？

方案一：給父元素設定不為 0 的 padding。
方案二：給父元素設定寬度不為 0 的 border。
方案三：給父元素設定 css 樣式 overflow: hidden

11. margin 合併問題

什麼是 margin 合併？

上面兄弟元素的下外邊距和下面兄弟元素的上外邊距會合並，取一個最大的值，而不是相加。

如何解決 margin 合併？

無需解決，佈局的時候上下的兄弟元素，只給一個設定上下外邊距就可以了。

12. 處理內容溢位

CSS 屬性名	功能	屬性值
`overflow`	溢位內容的處理方式	`visible`：顯示，預設值 `hidden`：隱藏 `scroll`：顯示捲軸，不論內容是否溢位 `auto`：自動顯示捲軸，內容不溢位不顯示
`overflow-x`	水平方向溢位內容的處理方式	同 overflow
`overflow-y`	垂直方向溢位內容的處理方式	同 overflow

注意：

overflow-x、overflow-y 不能一個 hidden，一個 visible，是實驗性屬性，不建議使用。

overflow 常用的值是hidden、auto ，除了能處理溢位的顯示方式，還可以解決很多疑難雜症。

13. 隱藏元素的方式

方式一：visibility 屬性

visibility 屬性預設值是show，如果設定為 hidden，元素會隱藏。

元素看不見了，還佔有原來的位置（元素的大小依然保持）。

方式二：display 屬性

設定 display：none，就可以讓元素隱藏。

徹底的隱藏，不但看不見，也不佔用任何位置，沒有大小寬高。

14. 樣式的繼承

有些樣式會繼承，元素如果本身設定了某個樣式，就使用本身設定的樣式，但如果本身沒有設定某個樣式，會從父元素開始一級一級繼承（優先繼承離得近的祖先元素）。

會繼承的 CSS 屬性：

字型屬性、文字屬性（除了 vertical-align）、文字顏色等。

不會繼承的 CSS 屬性：

邊框、背景、內邊距、外邊距、寬高、溢位方式等。

一個規律：能繼承的屬性，都是不影響佈局的，簡單說：都是和盒子模型沒關係的。

15. 元素的預設樣式

元素一般都有一些預設的樣式，例如：

<a> 元素：下劃線、字型顏色、滑鼠小手。
<h1> ~ <h6> 元素：文字加粗、文字大小、上下外邊距。
p 元素：上下外邊距。
ul、<ol> 元素：左內邊距。
body 元素： 8px 外邊距（4個方向）。
......

優先順序：元素的預設樣式 > 繼承的樣式，所以如果要重置元素的預設樣式，選擇器一定要直接選擇到該元素。

16. 佈局小技巧

行內元素、行內塊元素，可以被父元素當做文字處理。

可以像處理文字對齊一樣，去處理：行內、行內塊在父元素中的對齊。

例如：text-aligin、line-height、text-indent 等。
如何讓子元素，在父元素中 水平居中：
- 若子元素為塊元素，給子元素加上：margin：0 auto;。
- 若子元素為行內元素，行內塊元素，給父元素加上：text-align：center;。
如何讓子元素，在父元素中 垂直居中：
- 若子元素為塊元素，給子元素加上：margin-top，值為: （父元素 content - 子元素盒子總高）/ 2 。
- 若子元素為行內元素、行內塊元素：
  - 讓父元素的 height = line-height，每個子元素都加上：vertical-align: middle;。
  - 若想絕對垂直居中，父元素 font-size 設定為 0。

練習一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test2</title>
    <style>
        #d1{
            width: 400px;
            height: 400px;
            background-color: gray;
            overflow: hidden;
        }
        #d2{
            width: 200px;
            height: 100px;
            background-color: orange;
            margin: 0 auto;
            margin-top: 150px;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div id = "d1">
        <div id  = "d2">inner</div>
    </div>
</body>
</html>

練習二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test3</title>
    <style>
        #d1{
            width: 400px;
            height: 400px;
            background-color: gray;
            text-align: center;
            line-height: 400px;
        }
        span{
            font-size: 20px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div id = "d1">
        <span>中華民族</span>
    </div>
</body>
</html>

練習三：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test4</title>
    <style>
        #d1{
            width: 400px;
            height: 400px;
            background-color: gray;
            text-align: center;
            line-height: 400px;
            font-size: 0px;
        }
        img{
            width: 100px;
            height: 100px;
            vertical-align: middle;
        }
        span{
            font-size: 30px;
            background-color: orange;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div id = "d1">
        <span>謝謝老闆！</span>
        <img src="./image/謝謝老闆.jpg" alt="">
    </div>
</body>
</html>

17. 元素之間的空白問題

產生的原因:

行內元素、行內塊元素、彼此之間的換行會被瀏覽器解析為一個空白字元。

解決方案：

	1. 去掉換行和空格（不推薦）。
	1. 給父元素設定 `font-size: 0`，在給需要顯示文字的元素，單獨設定字型大小（推薦）。

18. 行內塊的幽靈空白問題

產出原因：

行內塊元素與文字的基線對齊，而文字的基線與文字最低端之間是有一定距離的。

解決方案：

方案一：給行內塊設定 vertical，值不為 baseline 即可，設定為 middle、bottom、top均可。
方案二：若父元素中只有一張圖片，設定圖片為 display：block;。
方案三：給父元素設定 font-size: 0。如果改行內塊內部還有文字，則需單獨設定 font-size。

程式碼示例一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test5</title>
    <style>
        #d1{
            width: 800px;
            background-color: gray;
        }
        img{
            width: 400px; 
            /* vertical-align: middle; */
        }
    </style>
</head>
<body>
    <div id = "d1">
        <img src="./image/火影絆師.jpg" alt="">
    </div>
</body>
</html>

程式碼示例二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test5</title>
    <style>
        #d1{
            width: 800px;
            background-color: gray;
        }
        img{
            width: 400px; 
            /* vertical-align: middle; */
            display: block;
        }
    </style>
</head>
<body>
    <div id = "d1">
        <img src="./image/火影絆師.jpg" alt="">
    </div>
</body>
</html>

程式碼示例三：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test5</title>
    <style>
        #d1{
            width: 800px;
            background-color: gray;
            font-size: 0;
        }
        img{
            width: 400px; 
            /* vertical-align: middle; */
            /* display: block; */
        }
    </style>
</head>
<body>
    <div id = "d1">
        <img src="./image/火影絆師.jpg" alt="">
    </div>
</body>
</html>

19. 浮動

19.1 浮動的簡介

在最初，浮動是用來實現文字環繞圖片效果的，現在浮動是主流的頁面佈局方式之一。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test6</title>
    <style>
        div{
            width: 600px;
            height: 300px;
            background-color: skyblue;
        }
        img{
            width: 300px; 
            float: left;
            margin-right: 1em;
        }
        .test::first-letter{
            font-size: 80px;
            float: left;
        }
    </style>
</head>
<body>
    <div >
        <img src="./image/火影絆師.jpg" alt="">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quibusdam accusamus rerum sit obcaecati pariatur fuga cum iste. In consequuntur nisi ipsam explicabo numquam aliquid soluta doloremque voluptas architecto aperiam perferendis sequi consectetur sunt harum ut vitae quaerat sit repellat maiores, quisquam laborum.
    </div>
    <hr/>
    <div class="test">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto, itaque labore, ut dolorem blanditiis praesentium iste minima incidunt debitis laborum corrupti cum dolorum explicabo placeat eligendi reiciendis odit culpa quidem ea maiores sit optio fugit? Sint, maxime voluptatem voluptates, atque dignissimos esse deleniti dolorum aliquid adipisci cupiditate perspiciatis asperiores eligendi! Repellendus vero voluptatum earum eveniet in temporibus blanditiis, sunt quam ullam dolores molestias.
    </div>
</body>
</html>

19.2 元素浮動後的特點

脫離文件流
不管浮動前是什麼元素，浮動後：預設寬與高都是被內容撐開(儘可能小)，而且可以設定寬高。
不會獨佔一行，可以與其他元素共用一行。
不會 margin 合併，也不會 margin 塌陷，能完美的設定四個方向的 margin 和 padding。
不會像行內塊一樣被當做文字處理（沒有行內快的空白問題）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test6</title>
    <style>
        .outer {
            width: 600px;
            height: 300px;
            background-color: gray;
            padding: 10px;
        }
        .box {
            font-size: 20px;   
            padding: 10px;     
        }
        .box1 {
            background-color: orange;
        }
        .box2 {
            background-color: green;
            float: left;
        }
        .box3 {
            background-color: plum;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">盒子1</div>
        <div class="box box2">盒子2</div>
        <div class="box box3">盒子3</div>
    </div>
</body>
</html>

盒子2 浮動前：

2D 效果圖：

3D 效果圖：

盒子 2 浮動後：

2d 效果圖：

3D 效果圖：

19.3 浮動後會有哪些影響

對兄弟元素的影響：後面的兄弟元素，會佔據浮動元素之前的位置，在浮動元素的下面；對前面的兄弟無影響。
對父元素的影響：不能撐起父元素的高度，導致父元素高度塌陷；但是父元素的寬度依然舒服浮動的元素。

19.4 解決浮動產生的影響

解決方案：

方案一：給父元素指定高度。
方案二：給父元素也設定浮動，帶來其他影響。
方案三：給父元素設定：overflow: hidden。
方案四：在所有浮動元素的最後面，新增一個塊級元素，並給該塊級元素設定 clear: both。
方案五：給浮動元素的父元素，設定偽元素，透過偽元素清除浮動，原理與方案四相同，（推薦使用）

.parent::after {
		content: "";
  	display: block;
    clean: both;
}

佈局中的一個原則：設定浮動的時候，兄弟元素要麼全都浮動，要麼全都不浮動。

19.5 佈局練習

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test9</title>
    <style>
        .leftfix {
            float: left;
        }
        .rightfix {
            float: right;
        }
        .clearfix::after {
            content: '';
  	        display: block;
            clear: both;
        }
        .all {
            width: 960px;
            margin: 0 auto;
            text-align: center;
        }
        .header {
            line-height: 80px; 
        }
        .logo {
            width: 200px;
            height: 80px;
            background-color: gainsboro;
            float: left;
        }
        .banner1 {
            width: 540px;
            height: 80px;
            background-color: gainsboro;
            margin: 0 10px;
            float: left;
        }
        .banner2 {
            width: 200px;
            height: 80px;
            background-color: gainsboro;
            float: left;
        }
        .menu {
            height: 30px;
            width: 960px;
            line-height: 30px;
            text-align: center;
            margin: 10px 0;
            background-color: gainsboro;
        }
        .left-bottom {
            margin: 10px 0;

        }
        .item1,.item2 {
            width: 368px;
            height: 198px;
            line-height: 198px;
            border: 1px solid black;
            margin-right: 10px;
        }
        .item3,.item4,.item5,.item6 {
            width: 178px;
            height: 198px;
            border: 1px solid black;
            line-height: 198px;
            margin-right: 10px;
        }
        .item7,.item8,.item9 {
            width: 198px;
            height: 128px;
            border: 1px solid black;
            margin-bottom: 10px;
            line-height: 128px;
        }
        .footer {
            height: 60px;
            background-color:gainsboro;
            line-height: 60px;
        }
    </style>
</head>
<body>
    <div class="all">
        <div class = "header clearfix">
            <div class = "logo leftfix">logo</div>
            <div class = "banner1 leftfix">banner1</div>
            <div class = "banner2 leftfix">banner2</div>
        </div>
        <div class="menu">
            選單
        </div>
        <div class="clearfix">
            <!-- 左側內容區 -->
            <div class="left leftfix">
                <div class="left-top clearfix">
                    <div class="item1 leftfix">欄目一</div>
                    <div class="item2 leftfix">欄目二</div>
                </div>
                <div class="left-bottom clearfix">
                    <div class="item3 leftfix">欄目三</div>
                    <div class="item4 leftfix">欄目四</div>
                    <div class="item5 leftfix">欄目五</div>
                    <div class="item6 leftfix">欄目六</div>
                </div>
            </div>
            <!-- 右側內容區 -->
            <div class="right rightfix">
                <div class="item7 ">欄目七</div>
                <div class="item8 ">欄目八</div>
                <div class="item9 ">欄目九</div>
            </div>
        </div>
        <div class="footer">頁尾</div>
    </div>
</body>
</html>

跟著禹神學前端——CSS 基礎 (1)
2024-10-31
前端CSS
前端基礎_CSS
2019-03-02
前端CSS
前端基礎學習1 | Web、Html、CSS
2024-03-05
前端WebHTMLCSS
css基礎2
2024-09-29
CSS
跟著老貓來搞GO，基礎進階
2021-11-08
Go
《大前端基礎元件》系列 CSS基礎架構
2020-04-06
前端元件CSS架構
前端基礎面試題@CSS篇
2018-05-14
前端面試題CSS
前端入門3-CSS基礎
2018-10-30
前端CSS
前端-html和css基礎知識
2021-10-19
前端HTMLCSS
零基礎學前端之CSS文字與字型綜合案例
2023-02-02
前端CSS
【機器學習基礎】神經網路/深度學習基礎
2021-11-05
機器學習神經網路深度學習
Css基礎學習—索引
2008-09-12
CSS索引
CSS基礎2--屬性
2018-08-09
CSS
2.CSS入門基礎
2020-10-11
CSS
python之前端HTML/CSS基礎知識學習筆記
2017-06-06
Python前端HTMLCSS筆記
python之前端HTML/CSS基礎知識學習筆記
2017-11-12
Python前端HTMLCSS筆記
前端基礎知識複習之CSS
2018-03-15
前端CSS
跟著 React 官方文件學 Hooks
2019-05-14
ReactHook
跟著菜鳥學python
2020-11-13
Python
跟著Zepto學dom操作（一）
2017-11-04
0基礎學如何學web前端？
2021-07-04
Web前端
CSS 基礎學習筆記
2018-11-06
CSS筆記
CSS2基礎（part-1）
2024-08-20
CSS
前端面試基礎手冊（HTML+CSS）
2018-07-29
前端面試HTMLCSS
前端開發基礎知識整理–css篇
2018-03-09
前端CSS
直譯器模式（Interpreter）2——跟著cc學設計系列
2014-01-15
模式
零基礎學前端難嗎?前端好學嗎?
2021-08-23
前端
【跟著大佬學JavaScript】之節流
2022-07-07
JavaScript
跟著廖雪峰學python 005
2023-02-19
Python
前端進階：跟著開源專案學習外掛化架構
2020-06-23
前端架構
css與javascript重難點，學前端，基礎不好一切白費！
2019-10-31
CSSJavaScript前端
量子力學基礎-2
2021-10-31
php學習基礎（2）
2017-07-18
PHP
前端基礎知識之html和css全解
2020-05-31
前端HTMLCSS
前端菜鳥筆記 Day-3 CSS基礎
2019-02-16
前端筆記CSS
前端基礎問題：CSS居中的幾種方式
2021-05-08
前端CSS
CSS——CSS基礎(1)
2022-07-07
CSS
CSS新聞標題後面跟著new圖示
2018-07-16
CSS

跟著禹神學前端——CSS 基礎 (2)

1. CSS 長度單位

2. 元素的顯示模式

3. 修改元素顯示模式

4. 盒子模型的組成

5. 盒子內容區（content）

6. 關於預設寬度

7. 盒子的內邊距（padding）

8. 盒子的邊框（border）

9. 盒子外邊距（margin）

10. margin塌陷問題

11. margin 合併問題

12. 處理內容溢位

13. 隱藏元素的方式

14. 樣式的繼承

15. 元素的預設樣式

16. 佈局小技巧

17. 元素之間的空白問題

18. 行內塊的幽靈空白問題

19. 浮動

19.1 浮動的簡介

19.2 元素浮動後的特點

19.3 浮動後會有哪些影響

19.4 解決浮動產生的影響

相關文章