目錄

前言

一、常用屬性

1.1、字體相關(guān)

1.2、文本相關(guān)

1.3、背景相關(guān)

1.3.1、背景顏色

1.3.2、背景圖片

1.4、圓角邊框

二、常用布局相關(guān)

2.1、display

2.2、盒子模型

2.2.1、基本概念

2.2.2、border 邊框

2.2.3、padding 內(nèi)邊距

2.2.4、margin 外邊距

2.3、彈性布局

2.4、實(shí)際開發(fā)常用小技巧

---

前言

---

這里推薦一個(gè) CSS 屬性網(wǎng)站，里面的樣式很全，忘記了也可以在這里查~

CSS 參考手冊(cè)

一、常用屬性

---

1.1、字體相關(guān)

        .one {/* 字體家族: 默認(rèn)是微軟雅黑 */font-family: "宋體";/* 字體大小 */font-size: 100px;/* 字體粗細(xì) */font-weight: 900;/* 設(shè)置字體傾斜*/font-style: italic;}

例如 hello ，效果如下?

1.2、文本相關(guān)

        /* 文本相關(guān) */.two {font-size: 100px;color: red;/* 文本對(duì)齊: left左對(duì)齊、right右對(duì)齊、center居中對(duì)齊 */text-align: center;/* 文本裝飾：underline下劃線、none去除下劃線(a 標(biāo)簽) */text-decoration: underline;/* 文本縮進(jìn) */text-indent: 20px;/* 行高(行間距) */line-height: 100px;}

例如 world ，效果如下：

1.3、背景相關(guān)

1.3.1、背景顏色

        .three {width: 200px;height: 500px;background-color: green;}

1.3.2、背景圖片

a）通過(guò) background-image 來(lái)設(shè)置一個(gè)背景圖片

        .one {width: 2000px;height: 2000px;background-color: grey;background-image: url(img/logo.png);}

Ps：background: rgba(0, 0, 0, 0.2);? 中前三個(gè)是三原色調(diào)色，最后一個(gè)是半透明程度?

例如一個(gè)小鴨子圖標(biāo)，使用 background-image 設(shè)置背景圖片，默認(rèn)都是 “平鋪” ，就類似于鋪地磚一樣，效果如下：?

b）可以使用 background-repeat 來(lái)禁止平鋪，如下：

        .one {width: 2000px;height: 2000px;background-color: grey;/* 背景圖片 */background-image: url(img/logo.png);/* 禁止平鋪 */background-repeat: no-repeat;}

c）可以 backgroud-position 來(lái)設(shè)置背景圖的位置

        .one {width: 2000px;height: 2000px;background-color: grey;/* 背景圖片 */background-image: url(img/logo.png);/* 禁止平鋪 */background-repeat: no-repeat;/* 設(shè)置位置 */background-position: center center;}

d）設(shè)置背景圖的大小

        .one {width: 2000px;height: 2000px;background-color: grey;/* 背景圖片 */background-image: url(img/logo.png);/* 禁止平鋪 */background-repeat: no-repeat;/* 設(shè)置位置 */background-position: center center;/* contain 表示保證圖片原有比例的情況下填滿容器，cover 表示一定填滿容器（忽略比例）
，當(dāng)然也可以自己手動(dòng)指定寬高 *//* background-size: contain; */background-size: 2000px 2000px;}

1.4、圓角邊框

a）通過(guò) border-radius 可以設(shè)置圓角矩形（值為內(nèi)切圓半徑）

        .one {width: 300px;height: 300px;background-color: greenyellow;border-radius: 30px;}

b）如果是一個(gè)正方形，并且 border-radius 的值剛好是邊長(zhǎng)的一般，此時(shí)就得到了正圓形（頭像一般都是這么設(shè)置的）.

        .one {width: 300px;height: 300px;background-color: greenyellow;border-radius: 150px;}

二、常用布局相關(guān)

---

2.1、display

• 塊級(jí)元素： display: block;? ?
• 行級(jí)元素：display: inline;
• 隱藏元素：display: none;

每個(gè) html 元素都會(huì)有默認(rèn)的 display 屬性，例如 h1 ~ h6、p、div、ul、ol、li、table...... 默認(rèn)都是 block 塊級(jí)元素.? 而? a 、span、img 默認(rèn)都是 inline 行級(jí)元素.

區(qū)別有很多，主要是以下兩個(gè)方面：

1. 塊級(jí)元素默認(rèn)獨(dú)占一行，行內(nèi)元素默認(rèn)不獨(dú)占一行
2. 塊級(jí)元素可以設(shè)置尺寸（width、height），行內(nèi)元素則不能.

Ps：因此在實(shí)際的開發(fā)中，我們經(jīng)常會(huì)把行內(nèi)元素（比如 span），通過(guò) display: block 改成塊級(jí)元素.

2.2、盒子模型

2.2.1、基本概念

一個(gè) HTML 元素，就是一個(gè)矩形的盒子，組成如下：

Ps：這些屬性只有塊級(jí)元素設(shè)置才生效

• margin：外邊距.? 可以想象成每個(gè)房子（盒子）之間的距離.
• border：邊框.? 可以想象成房子的墻壁.
• padding：內(nèi)邊距. 可以想象成墻壁和內(nèi)部家具（content）的距離.

2.2.2、border 邊框

a）border：邊框.? 可以想象成房子的墻壁.

    <style>.one {width: 400px;height: 500px;background-color: grey;/* red邊框顏色、20px邊框粗細(xì)、solid邊框?yàn)閷?shí)線 */border: red 20px solid;}</style>

b）邊框也可以分開設(shè)置

        .one {width: 400px;height: 500px;background-color: grey;/* red邊框顏色、20px邊框粗細(xì)、solid邊框?yàn)閷?shí)線 *//* border: red 20px solid; *//* 邊框也可以分開設(shè)置 */border-left: red 20px solid;border-right: green 20px dotted;border-top: blue 20px dashed;border-bottom: orange 20px solid;}

邊框使用注意事項(xiàng)：

設(shè)置了邊框粗細(xì)以后，雖然給 div 設(shè)置的尺寸例如是 500*400，但實(shí)際上可能卻變成了 540* 340，這是因?yàn)檫吙虬言亟o撐大了！

在實(shí)際的開發(fā)中，一般不希望見到這種情況，因此可以使用 box-sizing:border-box?屬性來(lái)避免此情況.

一般會(huì)對(duì)所有元素都進(jìn)行如下設(shè)置：

        * {box-sizing: border-box;}

2.2.3、padding 內(nèi)邊距

a）內(nèi)邊距，就是元素和邊框的距離，可以想象成墻壁和內(nèi)部家具的距離.

        .one {width: 400px;height: 500px;background-color: grey;border: red 20px solid;padding: 30px;}

b）也可以設(shè)置給四個(gè)方向分別設(shè)置

        .one {width: 400px;height: 500px;background-color: grey;border: red 20px solid;/* padding: 30px; *//* 可以分別給四個(gè)方向設(shè)置 *//* padding-left: 20px; *//* 給上下設(shè)置 30px，左右設(shè)置 20px *//* padding: 30px 20px; *//* 給四個(gè)方向分別設(shè)置，順序是 上右下左 順時(shí)針順序設(shè)置 */padding: 10px 20px 30px 40px;}

2.2.4、margin 外邊距

外邊距：可以想象成每個(gè)房子（盒子）之間的距離，用法和 padding 基本一樣

這里講一個(gè)特殊用法：把 margin 左右方向設(shè)置為 auto ，可以實(shí)現(xiàn)元素水平居中的效果（前提是塊級(jí)元素，并且有設(shè)置 width），但是垂直方向設(shè)置為 auto，則不能垂直居中.

        .one {width: 400px;height: 500px;background-color: grey;margin: 100px auto;}

2.3、彈性布局

前面講到，塊級(jí)元素默認(rèn)是獨(dú)占一行的（垂直方向排列的），有時(shí)又想讓塊級(jí)元素能夠水平方向排列，就可以使用彈性布局了.

Ps：行內(nèi)元素雖然也是水平排列，但是不能設(shè)置尺寸.

這里我們只需要知道最基礎(chǔ)的三個(gè)屬性即可.

1.開啟彈性布局：display: flex ，某個(gè)元素一旦開始了彈性布局，此時(shí)內(nèi)部的子元素（子元素里的子元素不受影響），就會(huì)按照水平方向排列.

2.水平方向排列規(guī)則：通過(guò) justify-content 屬性進(jìn)行設(shè)置.?

例如有以下元素

    <div class="one"><div class="two">0</div><div class="two">2</div><div class="two">3</div><div class="two">4</div><div class="two">5</div></div><style>.two {width: 100px;height: 100px;background-color: greenyellow;border: red 3px solid;}</style>

justify-content: center居中排列：

justify-content: left靠左：

justify-content: right靠右：

justify-content: space-around 分散排列（不占據(jù)兩邊）：

justify-content: space-between（占據(jù)兩邊）：

justify-content: space-evenly（全部均分，包括左右）：

Ps：一般最常用的就是 space-around

3. align-items：設(shè)置垂直方向排列，這個(gè)一般就用 center 就可以.

        .one {display: flex;justify-content: space-around;align-items: center;}

2.4、實(shí)際開發(fā)常用小技巧

Ps：如果全局全局屬性是 Vue-cli 的工程，那么就在 App.vue 中的 style 添加即可

a）一般在開始寫項(xiàng)目的 css 樣式時(shí)，會(huì)先進(jìn)行以下操作，防止一些干擾.

* {/* 防止邊框?qū)⒃負(fù)未?*/box-sizing: border-box;/* 去除瀏覽器默認(rèn)樣式 */padding: 0;margin: 0;
}

b）為了讓背景圖片能鋪滿整個(gè)屏幕，需要給 body 和 html 標(biāo)簽設(shè)置自適應(yīng)高度（隨著瀏覽器的縮放而縮放）

html {height: 100%;
}body {height: 100%;
}

height: 100% 就表示高度和父元素一樣高.

解釋：由于 body 的父元素時(shí) html，而 html 元素的父元素是瀏覽器窗口，這里設(shè)置 100%，就是讓 html 元素和瀏覽器一樣高，再讓 body 和 html 一樣搞，此時(shí) body 就和瀏覽器窗口一樣高了.

c）版心高度設(shè)置：我們?cè)谧鐾陮?dǎo)航欄以后，接下來(lái)版心的高度該如何設(shè)置呢？在 CSS 3 中新出了一個(gè)語(yǔ)法? ? height: calc(100% - 50px);? ? 通過(guò)他就可以實(shí)現(xiàn).?

1. 第一個(gè)參數(shù)：寫100% 就表示父元素的高度.
2. 第二個(gè)參數(shù)：50px 就是指導(dǎo)航欄的高度（根據(jù)實(shí)際情況而定）.

?注意：減號(hào)兩側(cè)必須要加空格.