零基礎入門前端CSS知識整理

成	語言	描述
結構	HTML	網頁元素和內容
表現	CSS	網頁元素頁面樣式）
行為	JavaScript	網頁交互

CSS，層疊樣式表（Cascading Style Sheet），給網頁中的HTML標簽設置樣式

1 CSS樣式引入方式

1.1 外部樣式

CSS寫在一個單獨的.css文件中，通過link標簽在網頁中引入

<link rel="stylesheet" href="文件路徑">

1.2 內部樣式

CSS寫在網頁的head標簽中，用style標簽包裹

<style>
    /* 寫在style標簽中的樣式 */
</style>

1.3 行內樣式

CSS寫在標簽的style屬性中

<標簽名 style="行內樣式寫在這"></標簽名>

三種CSS樣式引入方式的區別

引入方式	書寫位置	作用范圍	使用場景
外部樣式	CSS寫在單獨的css文件中，通過link標簽引入	多個頁面	項目中
內部樣式	CSS寫在head頭部style標簽中	當前頁面	案例演示中
行內樣式	CSS寫在標簽的style屬性中	當前標簽	配合js使用

2 基礎選擇器

選擇器，就是選取（查找）需要設置樣式元素的方式

選擇器 {
    屬性名: 屬性值;
}

屬性名和屬性值合稱為css屬性

2.1 元素選擇器

通過元素名稱，選?。ú檎遥┫嗤?，然后對相同元素設置CSS樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>我愛中國</p>
    <p>我愛人民</p>
    <div>我愛家鄉</div>
</body>
</html>

小結：

1、無論嵌套多少層，只要元素名稱相同都會被找到

2.2 類選擇器

通過類名稱，找到頁面中所有帶這個類名稱的元素，然后對其設置CSS樣式

類選擇器，也有人叫class選擇器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .color-style {
            color: red;
        }
    </style>
</head>
<body>
    <p class="color-style">我愛中國</p>
    <p>我愛人民</p>
    <div class="color-style">我愛家鄉</div>
</body>
</html>

小結：

1、所有元素都有class屬性，class屬性的屬性值叫類名

2、類名由數字、字母、下劃線、中劃線組成，不能以數字、中劃線開頭

3、一個元素可以有多個類名，類名之間用空格隔開

2.3 id選擇器

通過元素id屬性的屬性值，找到頁面中帶這個id屬性值的元素，然后對其設置CSS樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #one {
            color: red;
        }
    </style>
</head>
<body>
    <p id="one">我愛中國</p>
    <p id="two">我愛人民</p>
    <div>我愛家鄉</div>
</body>
</html>

小結：

1、所有元素都有id屬性

2、id屬性值在一個頁面中是唯一的

3、一個元素只能有一個id屬性值

2.4 通配符選擇器

查找頁面中所有的元素，然后對其設置CSS樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        * {
            color: red;
        }
    </style>
</head>
<body>
    <p id="one">我愛中國</p>
    <p id="two">我愛人民</p>
    <div>我愛家鄉</div>
</body>
</html>

小結：

1、通常用于網頁重置樣式，不常用

2.5 后代選擇器

根據選擇器查找符合條件的元素，再根據后代選擇器查找符合條件的元素，然后對其設置CSS樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #one p {
            color: red;
        }
    </style>
</head>
<body>
    <div id="one">
        <p>我愛中國</p>
        <p>我愛人民</p>
        <div>我愛家鄉</div>
        <div>
            <p>我愛中國</p>
            <p>我愛人民</p>
        </div>
    </div>
    <div id="two">
        <p>我愛中國</p>
        <p>我愛人民</p>
        <div>我愛家鄉</div>
        <div>
            <p>我愛中國</p>
            <p>我愛人民</p>
        </div>
    </div>
</body>
</html>

2.6 群組選擇器

根據多個選擇器各自查找符合條件的元素，然后對其設置CSS樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p,h3 {
            color: red;
        }
    </style>
</head>
<body>
    <p>我愛中國</p>
    <h3>我愛人民</h3>
    <div>我愛家鄉</div>
</body>
</html>

3 字體樣式

字體樣式，針對文字本身樣式

字體相關的CSS屬性

屬性	說明
font-family	字體類型
font-size	字體大小
font-weight	字體粗細
font-style	字體風格
color	字體顏色

3.1 字體類型

語法：

font-family: 字體1,字體2,字體3...;

說明：

1、font-family屬性可是設置多個屬性值，用英文逗號隔開，生效順序是從左到右。瀏覽器默認字體類型一般是"宋體"

2、字體類型只有一個英文單詞，則不需要加上引號；字體類型是多個英文單詞或中文的，則需要加上雙引號

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            font-family: Arial;
        }
        h3 {
            font-family: monospace;
        }
        div {
            font-family: "新宋體";
        }
    </style>
</head>
<body>
    <p>我愛中國</p>
    <h3>我愛人民</h3>
    <div>我愛家鄉</div>
</body>
</html>

3.2 字體大小

語法：

font-size: 數字 + px

說明：

1、px是像素單位，單位需要設置，否則無效

2、谷歌瀏覽器默認文字大小是16px

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            font-size: 18px;
        }
        div {
            font-size: 36px;
        }
    </style>
</head>
<body>
    <p>我愛中國</p>
    <div>我愛家鄉</div>
</body>
</html>

3.3 字體粗細

語法：

font-weight: normal/bold/100~900

說明：

屬性值	說明
normal	正常（默認值）
bold	較粗
100~900	取100~900九種數值

實際開發一般會設置bold，不設置默認是normal

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            font-weight: normal;
        }
        div {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>我愛中國</p>
    <div>我愛家鄉</div>
</body>
</html>

3.4 字體風格

語法：

font-style: 取值

說明：

屬性值	說明
normal	正常（默認值）
italic	斜體
oblique	斜體

不是所有字體都有italic屬性值，如果沒有italic的，則用oblique

font連寫

語法：

font: style weight size family;

說明：

1、可以省略前兩項，省略了相當于設置了默認值

不常用，作為了解

3.5 字體顏色

語法：

color: 顏色值

說明：

color屬性取值常用有兩種，一種是關鍵字（比如red、green、blue），另外一種是16進制RGB值（#000000，#FFFFFF）

問題一：給同一個元素設置了相同的屬性樣式，哪個生效？

答：樣式會層疊（覆蓋），寫在最后面的會生效。

問題二：html里面有注釋，css有沒有注釋，如何寫？

<style>
    /* 采用元素選擇器給p元素設置css樣式 */
    p {
        color: #000000;  /* p元素字體顏色為黑色 */
    }
</style>

4 文本樣式

文本樣式，針對段落的排版效果

文本相關CSS屬性

屬性	說明
text-indent	首行縮進
text-align	水平對齊
text-decoration	文本修繕
text-transform	大小寫轉換
line-height	行高
letter-spacing	字母間距
word-spacing	詞間距

4.1 首行縮進

語法：

text-indent: 像素值

說明：

縮進大小和字體大小是有關的，縮進1個字的空間等同于1個字的字體大小。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    p {
        font-size: 14px;
        text-indent: 28px;
    }
</style>
</head>
<body>
    <p>舜發于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能。</p>
</body>
</html>

4.2 水平對齊

語法：

text-align: 取值

說明：

text-align屬性取值

屬性值	說明
left	左對齊（默認值）
center	居中對齊
right	右對齊

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    .one {
        text-align: left;
    }
    .two {
        text-align: center;
    }
    .three {
        text-align: right;
    }
</style>
</head>
<body>
    <p class="one">生于憂患死于安樂</p>
    <p class="two">生于憂患死于安樂</p>
    <p class="three">生于憂患死于安樂</p>
</body>
</html>

4.3 文本修飾

語法：

text-decoration: 取值

說明：

text-decoration屬性值

屬性值	說明
none	去除所有的劃線效果（默認值）
underline	下劃線
line-throught	中劃線
overline	頂劃線

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    .one {
        text-decoration: none;
    }
    .two {
        text-decoration: underline;
    }
    .three {
        text-decoration: line-through;
    }
    .four {
        text-decoration: overline;
    }
</style>
</head>
<body>
    <p class="one">生于憂患死于安樂</p>
    <p class="two">生于憂患死于安樂</p>
    <p class="three">生于憂患死于安樂</p>
    <p class="four">生于憂患死于安樂</p>
</body>
</html>

4.4 大小寫轉換

語法：

text-transform: 取值

說明：

text-transform屬性取值

屬性值	說明
none	無轉換（默認值）
uppercase	轉換為大寫
lowercase	轉換為小寫
capitalize	單詞首字母大寫

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    .one {
        text-transform: none;
    }
    .two {
        text-transform: uppercase;
    }
    .three {
        text-transform: lowercase;
    }
    .four {
        text-transform: capitalize;
    }
</style>
</head>
<body>
    <p class="one">Hello World</p>
    <p class="two">Hello World</p>
    <p class="three">Hello World</p>
    <p class="four">hello world</p>
</body>
</html>

4.5 行高

語法：

line-height: 取值;

說明：

1、取值可以是一個固定的數值（比如24px），也可以是一個百分數（比如150%）

line-height: 150%;

2、使用font-size屬性和line-height屬性的組合，可以讓行高與字體大小之間保持一定的比例

font-size: 16px;
line-height: 1.5

3、使用line-height屬性的繼承值。如果父元素的line-height屬性有值，那么子元素及后代元素會繼承父元素的行高

body {
    line-height: 1.5;
}
p {
    font-size: 16px;
}

行高的設置要大于字體大小的設置，才會顯得好看

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        p {
            font-size: 16px;
            line-height: 24px;
        }
    </style>
</head>
<body>
    <p>舜發于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能</p>
</body>
</html>

4.6 間距

字間距

語法：

letter-spacing: 像素值

說明：

letter-spacing屬性用來設置兩個字之間的距離，一個英文字母或漢字都是當做一個字來處理

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        p {
            letter-spacing: 10px;
        }
    </style>
</head>
    <p>are you ok.你好嗎？</p>
<body>
</body>
</html>

詞間距

語法：

word-spacing: 像素值;

說明：

word-spacing屬性用來設置英文單詞之間的距離

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        p {
            word-spacing: 10px;
        }
    </style>
</head>
    <p>are you ok.你好嗎？</p>
<body>
</body>
</html>

5 邊框樣式

元素基本可以定義邊框，邊框樣式由邊框寬度、邊框外觀和邊框顏色三個屬性組成。

屬性	說明
border-width	邊框的寬度
border-style	邊框的外觀
border-color	邊框的顏色

5.1 邊框的寬度

語法：

border-width: 像素值;

說明：

邊框border-width屬性值是一個像素值

5.2 邊框的外觀

語法：

border-style: 取值;

說明：

border-style取值有三個

屬性值	說明
none	無樣式
dashed	虛線
solid	實線

5.3 邊框的顏色

語法：

border-color: 顏色關鍵字/16進制RGB值

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            border-width: 1px;
            border-style: solid;
            border-color: red;
        }
    </style>
</head>
    <div>hello,world</div>
<body>
</body>
</html>

5.4 邊框樣式簡寫

語法：

border: border-width border-style border-color;

案例：

div {
    border: 1px solid red;
}

5.5 邊框局部樣式

元素都是盒子模型，都是有四條邊的，分別是上、下、左、右。所以又可以為元素某一邊邊設置邊框樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            width: 300px;
            height: 200px;
            border-top: 1px dashed darkred;
            border-bottom: 2px solid green;
            border-left: 3px solid grey;
            border-right: 4px dashed lightseagreen;
        }
    </style>
</head>
    <div></div>
<body>
</body>
</html>

6 列表樣式

6.1 列表項符號

定義列表項符號

在HTML中，無序列表和有序列表是通過標簽ul、ol的type屬性來定義的

<ol type="a">
    <li>my</li>
    <li>your</li>
</ol>
<ul type="disc">
    <li>my</li>
    <li>your</li>
</ul>

接觸了css后，得改成list-style-type屬性來定義。HTML專心負責結構，CSS專心負責樣式。

語法：

list-style-type: 取值;

說明：

ol元素的list-style-type屬性值

屬性值	說明
decimal	阿拉伯數字：1、2、3…（默認值）
lower-roman	小寫羅馬數字：i、ii、iii…
upper-roman	大寫羅馬數字：I、II、III…
lower-alpha	小寫英文字母：a、b、c…
upper-alpha	大寫英文字母：A、B、C…

ul元素的list-style-type屬性值

屬性值	說明
disc	實心圓●（默認值）
circle	空心圓○
square	正方形■

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        ol {
            list-style-type: lower-alpha;
        }
        ul {
            list-style-type: square;
        }
    </style>
</head>
<body>
    <ol>
        <li>my</li>
        <li>your</li>
    </ol>
    <ul>
        <li>my</li>
        <li>your</li>
    </ul>
</body>
</html>

去除列表項符號

隨著技術和審美不斷的提高，實際開發中都是直接去除列表項符號

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        ol,ul {
            list-style-type: none;
        }
    </style>
</head>
<body>
    <ol>
        <li>my</li>
        <li>your</li>
    </ol>
    <ul>
        <li>my</li>
        <li>your</li>
    </ul>
</body>
</html>

有序列表或無序列表設置了list-style-type: none后，樣式都一樣了。

6.2 列表項圖片

語法：

list-style-image: url(圖片路徑);

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        ul {
            list-style-image: url("small.png");
        }
    </style>
</head>
<body>
    <ul>
        <li>my</li>
        <li>your</li>
    </ul>
</body>
</html>

list-style-image不能控制圖片大小，實際開發中用background來替代

7 表格樣式

7.1 表格標題位置

語法：

caption-side: 取值;

說明：

caption-side屬性取值

屬性值	說明
top	標題在頂部（默認值）
bottom	標題在底部

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        table,tr,th,td {
            border: 1px solid gray;
        }
        table {
            caption-side: bottom;
        }
    </style>
</head>
<body>
    <table>
        <caption>學生成績</caption>
        <tr>
            <th>姓名</th>
            <th>數學</th>
        </tr>
        <tr>
            <td>曹操</td>
            <td>85</td>
        </tr>
        <tr>
            <td>劉備</td>
            <td>75</td>
        </tr>
    </table>
</body>
</html>

7.2 表格邊框合并

語法：

border-collapse: 取值;

說明：

border-collapse屬性取值

屬性值	說明
separate	邊框分開，有空隙（默認值）
collapse	邊框合并，無空隙

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        table,tr,th,td {
            border: 1px solid gray;
        }
        table {
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table>
        <caption>學生成績</caption>
        <tr>
            <th>姓名</th>
            <th>數學</th>
        </tr>
        <tr>
            <td>曹操</td>
            <td>85</td>
        </tr>
        <tr>
            <td>劉備</td>
            <td>75</td>
        </tr>
    </table>
</body>
</html>

7.3 表格邊框間距

語法：

border-spacing: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        table,tr,th,td {
            border: 1px solid gray;
        }
        table {
            border-spacing: 10px;
        }
    </style>
</head>
<body>
    <table>
        <caption>學生成績</caption>
        <tr>
            <th>姓名</th>
            <th>數學</th>
        </tr>
        <tr>
            <td>曹操</td>
            <td>85</td>
        </tr>
        <tr>
            <td>劉備</td>
            <td>75</td>
        </tr>
    </table>
</body>
</html>

8 圖片樣式

8.1 圖片大小

語法：

width: 像素值;
height: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        img {
            width: 40px;
            height: 40px;
        }
    </style>
</head>
<body>
    <img src="small.png" alt="">
</body>
</html>

8.2 圖片邊框

語法:

border: 1px solid red;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        img {
            width: 40px;
            height: 40px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <img src="small.png" alt="">
</body>
</html>

8.3 圖片對齊

水平對齊

語法：

text-align: 取值;

說明：

text-align屬性取值

屬性值	說明
left	左對齊（默認值）
center	居中對齊
right	右對齊

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        .i1 {
            text-align: left;
        }
        .i2 {
            text-align: center;
        }
        .i3 {
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="i1">
        <img src="small.png" alt="">
    </div>
    <div class="i2">
        <img src="small.png" alt="">
    </div>
    <div class="i3">
        <img src="small.png" alt="">
    </div>
</body>
</html>

圖片的水平對齊屬性設置是在圖片標簽的父標簽上實現的

垂直對齊

語法：

vertical-align: 取值;

說明：

vertical-align屬性取值

屬性值	說明
top	頂部對齊
middle	中部對齊
baseline	基線對齊
bottom	底部對齊

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        .i1 {
            vertical-align: top;
        }
        .i2 {
            vertical-align: middle;
        }
        .i3 {
            vertical-align: baseline;
        }
        .i4 {
            vertical-align: bottom;
        }
    </style>
</head>
<body>
    <div>
        <span>hello,world</span>
        <img class="i1" src="small.png" alt="">
        <span>hello,world</span>
        <hr>
    </div>
    <div>
        <span>hello,world</span>
        <img class="i2" src="small.png" alt="">
        <span>hello,world</span>
        <hr>
    </div>
    <div>
        <span>hello,world</span>
        <img class="i3" src="small.png" alt="">
        <span>hello,world</span>
        <hr>
    </div>
    <div>
        <span>hello,world</span>
        <img class="i4" src="small.png" alt="">
        <span>hello,world</span>
        <hr>
    </div>
</body>
</html>

8.4 文字環繞

語法：

float: 取值;

說明：

float屬性取值

屬性值	說明
left	元素向左浮動
right	元素向右浮動

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        img {
            float: left;
        }
    </style>
</head>
<body>
    <img src="small.png" alt="">
    <p>舜發于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能。</p>
</body>
</html>

9 背景樣式

9.1 背景顏色

語法：

background-color: 顏色值;

說明：

顏色值有兩種表示方式，一種是顏色關鍵字，另外一種是16進制RGB值

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            width: 200px;
            height: 100px;
            /* 背景顏色 */
            background-color: burlywood;
        }
    </style>
</head>
<body>
    <div>hello,world</div>
</body>
</html>

9.2 背景圖片

引入背景圖片

語法:

background-image: url(圖片路徑)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            background-image: url("small.png");
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

背景圖片重復

語法：

background-repeat: 取值;

說明：

background-repeat屬性取值

屬性值	說明
repeat	在水平方向和垂直方向上同時平鋪（默認值）
repeat-x	只在水平方向（x軸）上平鋪
repeat-y	只在垂直方向（y軸）上平鋪
no-repeat	不平鋪

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            background-image: url("small.png");
            background-repeat: repeat-x;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

背景圖片位置

語法：

background-position: 水平距離 垂直距離

通過像素值定圖片位置

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            border: 1px solid red;
            background-image: url("small.png");
            background-repeat: no-repeat;
            background-position: 10px 30px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

通過關鍵字定位圖片位置

水平方向左left、中center、右right

垂直方向上top、中center、下bottom

通過水平方向、垂直方向組合出9種方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            border: 1px solid red;
            background-image: url("small.png");
            background-repeat: no-repeat;
            background-position: center center;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

背景圖片固定

語法：

background-attachment: 取值;

說明：

background-attachment屬性取值

屬性值	說明
scroll	隨元素一起滾動（默認值）
fixed	固定不動

10 超鏈接樣式

語法：

a {}
a:link {}
a:visited {}
a:hover{}
a:active{}

說明：

偽類	說明
a:link	a元素未訪問時的樣式
a:visited	a元素訪問后的樣式
a:hover	鼠標經過a元素時的樣式
a:active	鼠標點擊時的樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        a {
            text-decoration: none;
        }
        a:hover {
            color: red;
        }
    </style>
</head>
<body>
<a href="#">百度</a>
</body>
</html>

實際開發，一般設置a、a:hover樣式就可以了

11 盒子模型

每一個元素都是由內容區、內邊距、邊框、外邊距組成

屬性	說明
content	內容區，可以是文本或圖片
padding	內邊距，用于定義內容與邊框之間的距離
border	邊框，用于定義元素的邊框
margin	外邊距，用于定義當前元素與其他元素之間的距離

11.1 內容區

語法：

width: 像素值;
height: 像素值;
overflow: 取值;

說明：

overflow屬性值

屬性值	說明
visible	默認值。內容不會被修剪，會呈現在元素框之外。
hidden	內容會被修剪，并且其余內容是不可見的。
scroll	內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
auto	如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
inherit	規定應該從父元素繼承 overflow 屬性的值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        img {
            width: 30px;
            height: 30px;
        }
        p {
            width: 50px;
            height: 50px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<img src="small.png" alt="">
<p>舜發于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能。</p>
</body>
</html>

如果要給行內元素設置寬高，則需要給元素設置display: inline-block屬性

11.2 內邊距

語法：

padding-top: 像素值;
padding-right: 像素值;
padding-bottom: 像素值;
padding-left: 像素值;

padding: 上下左右像素值;
padding: 上下像素值 左右像素值;
padding: 上像素值 右像素值 下像素值 左像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        p {
            border: 1px solid red;
            padding: 10px;
        }
    </style>
</head>
<body>
<p>舜發于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能。</p>
</body>
</html>

11.3 邊框

邊框知識參考2.6

11.4 外邊距

語法：

margin-top: 像素值;
margin-right: 像素值;
margin-bottom: 像素值;
margin-left: 像素值;

margin: 上下左右像素值;
margin: 上下像素值 左右像素值;
margin: 上像素值 右像素值 下像素值 左像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        p {
            border: 1px solid red;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
<p>舜發于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能。</p>
<p>舜發于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能。</p>
</body>
</html>

12 浮動布局

正常文檔流就是我們沒有使用浮動或者定位去改變的默認情況，按照從上到下，從左到右順序的元素布局情況。

12.1 定義浮動

語法：

float: 取值

說明：

屬性值	說明
left	元素向左浮動
right	元素向右浮動

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f {
            background-color: beige;
            padding: 10px;
        }
        #s1 {
            background-color: gray;
            float: left;
        }
        #s2 {
            background-color: aqua;
            float: left;
        }
    </style>
</head>
<body>
    <div id="f">
        <div id="s1">box1</div>
        <div id="s2">box2</div>
    </div>
</body>
</html>

12.2 清除浮動

語法：

clear: 取值;

說明：

clear屬性值

屬性值	說明
left	清除左浮動
right	清除右浮動
both	同時清除左浮動和右浮動

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f {
            background-color: beige;
            padding: 10px;
        }
        #s1 {
            background-color: gray;
            float: left;
        }
        #s2 {
            background-color: aqua;
            float: left;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div id="f">
        <div id="s1">box1</div>
        <div id="s2">box2</div>
        <div class="clear"></div>
    </div>
</body>
</html>

13 定位布局

13.1 固定定位

語法：

position: fixed;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #s1 {
            position: fixed;
            top: 20px;
            left: 100px;
            color: red;
        }
    </style>
</head>
<body>
    <div id="f">
        <div id="s1">回到頂部</div>
        <div id="s2">
            <p>內容區</p>
            ......
        </div>
    </div>
</body>
</html>

13.2 相對定位

相對定位，指的是該元素的位置是相對于它的原始位置計算而來的

語法：

position: relative;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f div {
            width: 100px;
            height: 50px;
            background-color: burlywood;
            margin: 10px;
        }
        .s2 {
            position: relative;
            top: 5px;
            left: 30px;
        }
    </style>
</head>
<body>
    <div id="f">
        <div class="s1">1</div>
        <div class="s2">2</div>
        <div class="s3">3</div>
    </div>
</body>
</html>

13.3 絕對定位

把元素定位到任意你想要的位置，完全脫離文檔流

語法：

position: absolute;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f div {
            width: 100px;
            height: 50px;
            background-color: burlywood;
            margin: 10px;
        }
        .s2 {
            position: absolute;
            top: 200px;
            left: 200px;
        }
    </style>
</head>
<body>
    <div id="f">
        <div class="s1">1</div>
        <div class="s2">2</div>
        <div class="s3">3</div>
    </div>
</body>
</html>

13.4 靜態定位

用法：

position: static;

說明：

元素position屬性的默認值是static

言

乎上出現了一個問題：為什么網上的文章越來越少采用首行縮進了？這個問題，恰好與我現在的工作有些關系。

我們的行為，是受外部條件制約的，時間長了，就慢慢形成習慣習俗了。現在網絡文章不首行縮進，根本原因也是如此。

在知乎的答案中，很多答案說首行縮進的產生是印刷品或紙張為了方便排版和節用紙，使用首行縮進方式進行排版，方便讀者閱讀。在互聯網上，節約紙張的需求從根本上就不存在了,以段落劃分，是更自然的行為。清晰地段落劃分已足夠滿足讀者的閱讀需求。

相關答主從紙張排版上分析紙本上為什么需要首行縮進，分析的很到位。

在數字時代，換行區分段落實際上是有很深的技術根源。從技術角度，首行不縮進的顯示要比首行縮進顯示技術實現要容易太多了。

在web技術剛誕生的時候，完全沒有提供豐富的排版功能，只能簡單的顯示文本。網頁排版的CSS技術、圖片音視頻等功能，都是在技術進步中逐步增加的。即使技術發展到了現在，對網頁內容進行美觀排版，依然不是一件容易的事情。

網絡上的文章，大多都是用戶通過富文本編輯器創作出來的。首行縮進在富文本編輯器中要實現完美，有極大的難度。以頭條文章創作的這個編輯器而言，首行縮進功能已經被深深藏進了隱藏菜單里面。

從技術上實現自動首行縮進，難度很大，不是每一個技術人員都能順利實現的。手動一行行進行縮進，這也讓創作者感覺過于麻煩了。

出于技術上的難點，用戶可以接觸到的絕大部分富文本編輯器，都沒有提供方便的首行縮進功能。在這樣的技術條件下，使用者都逐漸習慣了沒有首行縮進的文章。

等完全數字化一代成長起來，或許會困惑：為什么之前的書本上會有首行縮進。

在線咨詢

上一篇：HTML5源碼庫用JS制作逼真花瓣飄落前端特效源碼
下一篇：css reset 標簽屬性默認值

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商