前端學習——CSS

? ? ? ? 前面我們已經學習過來HTML。但是對于前端網頁來說，HTML只是網頁的骨架。而只是使用HTML的網頁是十分簡陋的，一般沒辦法應用于實際應用。因此我們還要學習CSS對網頁進行美化。

? ? ? ? 相關代碼已經上傳至gitee：前端學習代碼: 前端學習，喜歡請支持，謝謝。

CSS的介紹

? ? ? ? 什么是CSS

? ? ? ? 基本語法規范

????????引入方式

? ? ? ? 內部樣式表

? ? ? ? 行內樣式表

? ? ? ? 外部樣式表

? ? ? ? CSS選擇器標簽

? ? ? ? 選擇器功能

? ? ? ? CSS2標準支持的選擇器

? ? ? ?基礎選擇器

????????標簽選擇器

????????id選擇器

????????通配符選擇器

????????類選擇器

CSS 基礎選擇器總結

? ? ? ? 復合選擇器

? ? ? ? 后代選擇器

? ? ? ? 子選擇器

? ? ? ? 并集選擇器

? ? ? ? 偽類選擇器

CSS 復合選擇器總結

????????CSS屬性

? ? ? ? 字體屬性

? ? ? ? 設置字體? ? ?

? ? ? ? 大小

? ? ? ? 粗細?

? ? ? ? 文字樣式

? ? ? ? 文本屬性???

? ? ? ? 文本顏色

????????認識 RGB

????????設置文本顏色

????????color 屬性值的寫法:

? ? ? ? 文本對齊

? ? ? ? 文本裝飾

? ? ? ? 文本縮進

? ? ? ? 行高

? ? ? ? 背景屬性

? ? ? ? 背景顏色

? ? ? ? 背景圖片

? ? ? ? 背景平鋪

? ? ? ? 背景位置

? ? ? ? 背景尺寸

? ? ? ? 圓角矩形

? ? ? ? 基本用法

? ? ? ? 生成圓形

? ? ? ? 生成圓形矩形

? ? ? ? 展開寫法

元素顯示模式

? ? ? ? 塊級元素

? ? ? ? 行內元素

????????行內元素和塊級元素的區別

????????改變顯示模式????????

盒模型

? ? ? ? 邊框

? ? ? ? 基礎屬性

? ? ? ? 內邊距

? ? ? ? 基礎寫法

? ? ? ? 復合寫法

? ? ? ? 外邊距

? ? ? ? 基礎寫法

? ? ? ? 復合寫法

????????塊極元素居中

????????去除瀏覽器默認樣式

彈性布局????????

? ? ? ? 初體驗

? ? ? ? flex布局基本概念

? ? ? ? 常用屬性

????????justify-content

? ? ? ? align-items

Chrome 調試工具 -- 查看 CSS 屬性

? ? ? ? 打開瀏覽器

? ? ? ? 標簽頁的含義

????????elements 標簽頁使用????????

CSS的介紹

? ? ? ? 什么是CSS

? ? ? ? CSS是層疊樣式表 (Cascading Style Sheets)，能夠對網頁中元素位置的排版進行像素級精確控制, 實現美化頁面的效果. 能夠做到頁面的樣式和結構分離

? ? ? ? 基本語法規范

????????選擇器 + {一條/N條聲明}

????????選擇器決定針對誰修改 (找誰)

????????聲明決定修改啥. (干啥)

????????聲明的屬性是鍵值對. 使用 ; 區分鍵值對, 使用 : 區分鍵和值.

/* CSS代碼  */p{/* 設置字體顏色 */color: RED;/* 設置字體大小 */font-size: 40px;}

? ? ? ? 注意:

????????CSS 要寫到 style 標簽中(后面還會介紹其他寫法)

????????style 標簽可以放到頁面任意位置. 一般放到 head 標簽內.

????????CSS 使用 /* */ 作為注釋. (使用 ctrl + / 快速切換) .

????????添加前：

????????添加后：

????????引入方式

? ? ? ? 內部樣式表

????????寫在 style 標簽中. 嵌入到 html 內部.

????????理論上來說 style 放到 html 的哪里都行. 但是一般都是放到 head 標簽中.

????????優點: 這樣做能夠讓樣式和頁面結構分離.

????????缺點: 分離的還不夠徹底. 尤其是 css 內容多的時候

? ? ? ? 行內樣式表

????????通過 style 屬性, 來指定某個標簽的樣式.

????????只適合于寫簡單樣式. 只針對某個標簽生效.

????????缺點: 不能寫太復雜的樣式.

????????這種寫法優先級較高, 會覆蓋其他的樣式.

<style>div{color: blue;}
</style>
<div style="color:green">想要生活過的去, 頭上總得帶點綠</div>
</head>

? ? ? ? 外部樣式表

????????實際開發中最常用的方式.

????????1. 創建一個 css 文件.

????????2. 使用 link 標簽引入 css

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

????????

????????注意: 不要忘記 link 標簽調用 CSS, 否則不生效.

????????優點: 樣式和結構徹底分離了.

????????缺點: 受到瀏覽器緩存影響, 修改之后不一定立刻生效.

????????關于緩存:

????????這是計算機中一種常見的提升性能的技術手段.

????????網頁依賴的資源(圖片/CSS/JS等)通常是從服務器上獲取的. 如果頻繁訪問該網站, 那么這些外部資源就沒必要反復從服務器獲取. 就可以使用緩存先存起來(就是存在本地磁盤上了). 從而提高訪問效率.

????????可以通過 ctrl + F5 強制刷新頁面, 強制瀏覽器重新獲取 css 文件

? ? ? ? 下面舉例來說明：

? ? ? ? HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="../demo.css"><!-- rel="stylesheet"引入的文件是樣式表 --><!--type="text/css"目錄：text/css"  --><!--文件名：href="demo.css"  -->
</head>
<body><p>我愛你，世界！</p></body>
</html>

? ? ? ? CSS

p
{color: red;font-size: 80px;}

? ? ? ? 效果：

? ? ? ? CSS選擇器標簽

? ? ? ? 選擇器功能

????????選中頁面中指定的標簽元素.

????????要先選中元素, 才能設置元素的屬性.

????????就好比 SC2, War3 這樣的游戲, 需要先選中單位, 再指揮該單位行動.

? ? ? ? CSS2標準支持的選擇器

????????1. 基礎選擇器: 單個選擇器構成的

????????標簽選擇器

????????類選擇器

????????id 選擇器

????????通配符選擇器

????????2. 復合選擇器: 把多種基礎選擇器綜合運用起來.

????????后代選擇器

????????子選擇器

????????并集選擇器

????????偽類選擇器

? ? ? ? 可參考文檔：CSS 選擇器參考手冊

? ? ? ?基礎選擇器

????????標簽選擇器

????????特點:

????????能快速為同一類型的標簽都選擇出來.

????????但是不能差異化選擇

<style>
p {
color: red;
}
div {
color: green;
}
</style>
<p>咬人貓</p>
<p>咬人貓</p>
<p>咬人貓</p>
<div>阿葉君</div>
<div>阿葉君</div>
<div>阿葉君</div>

????????id選擇器

????????和類選擇器類似.

????????CSS 中使用 # 開頭表示 id 選擇器

????????id 選擇器的值和 html 中某個元素的 id 值相同

????????html 的元素 id 不必帶 #

????????id 是唯一的, 不能被多個標簽使用 (是和類選擇器最大的區別)

#fe
{color: blue;font-size: 30px;
}
#server
{color: green;font-size: 30px;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./demo1.css">
</head>
<body><p id="fe">前端開發</p><p id="server"> 后端開發</p>
</body>
</html>

? ? ? ? 效果：

????????

????????通配符選擇器

????????使用 * 的定義, 選取所有的標簽
????????實際應用中多用于針對頁面中所有元素進行默認樣式的刪除，主要用來刪除邊距

? ? ? ? 效果圖：

????????類選擇器

????????特點:

????????差異化表示不同的標簽

????????可以讓多個標簽的都使用同一個標簽.

<style>
.blue 
{color: blue;
}
</style>
<div class="blue">咬人貓</div>
<div>咬人貓</div

????????語法細節:

????????類名用 . 開頭的

????????下方的標簽使用 class 屬性來調用.

????????一個類可以被多個標簽使用, 一個標簽也能使用多個類(多個類名要使用空格分割, 這種做法可以讓代碼更好復用)

????????如果是長的類名, 可以使用 - 分割.

????????不要使用純數字, 或者中文, 以及標簽名來命名類名

????????代碼示例: 使用多個類名

????????注意: 一個標簽可以同時使用多個類名

????????這樣做可以把相同的屬性提取出來, 達到簡化代碼的效果

<style>
.box {
width: 200px;
height: 150px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
</style>
<div class="box red"></div>
<div class="box green"></div>
<div class="box red"></div>

CSS 基礎選擇器總結

選擇器名稱	作用	語法	特點與說明
通配選擇器	選擇頁面上的所有元素。	`*`	1. 權重最低 (`0,0,0,0`)。 2. 常用于重置所有元素的默認樣式（如?`margin`,?`padding`）。 3. 效率較低，應謹慎使用。
元素選擇器	選擇指定的HTML標簽元素。	`元素名` 如?`div`,?`p`,?`h1`	1. 權重為 (`0,0,0,1`)。 2. 用于設置同一類標簽的基礎樣式。
類選擇器	選擇所有帶有指定class屬性的元素。	`.類名` 如?`.header`,?`.active`	1. 權重為 (`0,0,1,0`)。 2.?最常用、最靈活的選擇器。 3. 一個元素可以有多個類名（如?`class="btn btn-primary"`），可實現樣式復用和組合。
ID選擇器	選擇帶有指定id屬性的唯一元素。	`#id名` 如?`#main`,?`#submit-btn`	1. 權重較高 (`0,1,0,0`)。 2. 由于ID在頁面中應該是唯一的，所以該選擇器理論上只針對一個元素。 3. 特異性高，不利于復用，多用于唯一元素的特殊樣式。
屬性選擇器	選擇帶有指定屬性的元素。	`[attr]` 或?`[attr=value]`	1. 權重等同于類選擇器 (`0,0,1,0`)。 2. 功能強大，可以根據屬性值的不同匹配方式進行選擇（如存在、等于、包含、開頭/結尾匹配等）。 3. 常用于選擇輸入框類型 (`type`

? ? ? ? 復合選擇器

? ? ? ? 后代選擇器

????????又叫包含選擇器. 選擇某個父元素中的某個子元素.

元素1 元素2 {樣式聲明}

????????元素 1 和元素 2 要使用空格分割

????????元素 1 是父級, 元素 2 是子級, 只選元素 2 , 不影響元素 1

<style>ol li{color: aqua;list-style: none;margin-left: -40px;}ol a{color: aqua;text-decoration: none;}</style>

? ? ? ? 子選擇器

????????和后代選擇器類似, 但是只能選擇子標簽.

元素1>元素2 { 樣式聲明 }

????????使用大于號分割

????????只選親兒子, 不選孫子元素

<div class="two">
<a href="#">鏈接1</a>
<p><a href="#">鏈接2</a></p>
</div

????????后代選擇器的寫法, 會把鏈接1 和 2 都選中

.two a {
color: red;
}

????????子選擇器的寫法, 只選鏈接 1

.two>a {
color: red;
}

? ? ? ? 并集選擇器

????????用于選擇多組標簽. (集體聲明)

元素1, 元素2 { 樣式聲明 }

????????通過逗號分割等多個元素.

????????表示同時選中元素 1 和元素 2

????????任何基礎選擇器都可以使用并集選擇器.

????????并集選擇器建議豎著寫. 每個選擇器占一行. (最后一個選擇器不能加逗號)

<div>蘋果</div><h3>香蕉</h3><ul><li>鴨梨</li><li>橙子</li>
</ul>

?/* 把蘋果和香蕉顏色改成紅色*/
div, h3 {
color: red;
}
/*把鴨梨和橙子也都一起改成紅色*/
div,
h3,
ul>li {
color: red;
}?

? ? ? ? 偽類選擇器

? ? ? ? 定義元素狀態

? ? ? ? （1）鏈接偽類選擇器

a:link 選擇未被訪問過的鏈接
a:visited 選擇已經被訪問過的鏈接
a:hover 選擇鼠標指針懸停上的鏈接
a:active 選擇活動鏈接(鼠標按下了但是未彈起)

????????如何讓一個已經被訪問過的鏈接恢復成未訪問的狀態?清空瀏覽器歷史記錄即可. ctrl + shift + delete

????????注意事項

????????按照 LVHA 的順序書寫, 例如把 active 拿到前面去, 就會導致 active 失效. 記憶規則 "綠化"瀏覽器的 a 標簽都有默認樣式, 一般實際開發都需要單獨制定樣式.

????????實際開發主要給鏈接做一個樣式, 然后給 hover 做一個樣式即可. link, visited, active 用的不多.

????????（2）force 偽類選擇器

????????選取獲取焦點的 input 表單元素.

<div class="three"><input type="text"><input type="text"><input type="text"><input type="text">
</div>
.three>input:focus 
{color: red;
}

????????此時被選中的表單的字體就會變成紅色.

CSS 復合選擇器總結

選擇器名稱	作用	語法	特點與說明
后代選擇器	選擇位于指定元素內部的所有后代元素（不限層級）。	`祖先后代` 如?`.box p`	1. 使用空格分隔。 2. 選擇所有后代，包括子、孫、曾孫等。 3. 是最常用的復合選擇器之一。
子選擇器	選擇作為指定元素直接子元素的元素（僅一代）。	`父 > 子` 如?`ul > li`	1. 使用大于號?`>`?分隔。 2. 只選擇直接子元素，范圍比后代選擇器更精確、更嚴格。 3. 有助于減少不必要的樣式應用，提升性能。
相鄰兄弟選擇器	選擇緊接在另一個元素之后的第一個兄弟元素。	`前一個 + 下一個` 如?`h2 + p`	1. 使用加號?`+`?分隔。 2. 它們必須擁有相同的父元素。 3. 選擇的是“下一個”元素，且必須是緊鄰的。
通用兄弟選擇器	選擇在另一個元素之后的所有指定兄弟元素。	`兄 ~ 弟` 如?`h2 ~ p`	1. 使用波浪號?`~`?分隔。 2. 它們必須擁有相同的父元素。 3. 選擇的是“之后”的所有指定兄弟元素，不要求緊鄰。
交集選擇器	選擇同時滿足多個條件的元素。	`選擇器A選擇器B` 如?`p.special`	1.?直接連續書寫，中間無空格。 2. 選擇的元素必須同時匹配所有條件。 3. 常用于為特定類的特定元素添加樣式（如既是?`p`?標簽又有?`.special`?類）。
并組選擇器	同時選擇多組元素，為它們應用相同的樣式。	`選擇器A, 選擇器B` 如?`h1, h2, .title`	1. 使用逗號?`,`?分隔。 2. 可以將不同的選擇器分組，實現代碼復用，減少重復代碼。 3. 任何形式的選擇器都可以作為并組列表的一部分。

????????CSS屬性

? ? ? ? 參考資料：CSS 參考手冊

? ? ? ? 字體屬性

? ? ? ? 設置字體? ? ?

body {
font-family: '微軟雅黑';
font-family: 'Microsoft YaHei';
}

? ? ? ? 字體可以使用中文，不過推薦英文

????????多個字體之間使用逗號分隔. (從左到右查找字體, 如果都找不到, 會使用默認字體. )

????????如果字體名有空格, 使用引號包裹.

????????建議使用常見字體, 否則兼容性不好.

<style>
.font-family .one {font-family: 'Microsoft YaHei';
}
.font-family .two {font-family: '宋體';
}
</style>
<div class="font-family"><div class="one">這是微軟雅黑</div><div class="two">這是宋體</div>
</div>
</style>

? ? ? ? 大小

p {
font-size: 20px;
}

????????不同的瀏覽器默認字號不一樣, 最好給一個明確值. (chrome 默認是 16px)可以給 body 標簽使用 font-size

????????要注意單位 px 不要忘記.

????????標題標簽需要單獨指定大小

????????注意: 實際上它設置的是字體中字符框的高度；實際的字符字形可能比這些框高或矮

<style>
.font-size .one {font-size: 40px;
}
.font-size .two {font-size: 20px;
}
</style>
<div class="font-size"><div class="one">大大大</div><div class="two">小小小</div>
</div>

? ? ? ? 粗細?

p {
font-weight: bold;
font-weight: 700;
}

????????可以使用數字表示粗細.????????

????????700 == bold, 400 是不變粗, == normal

????????取值范圍是 100 -> 900

? ? ? ? 文字樣式

/* 設置傾斜 */
font-style: italic;
/* 取消傾斜 */
font-style: normal;

????????很少把某個文字變傾斜.

????????但是經常要把 em / i 改成不傾斜.

<style>
.font-style em {font-style: normal;
}
.font-style div {font-style: italic;
}
</style>
<div class="font-style"><em>放假啦</em><div class="one">聽說要加班</div>
</div>

? ? ? ? 文本屬性
???

? ? ? ? 文本顏色

????????認識 RGB

????????我們的顯示器是由很多很多的 "像素" 構成的. 每個像素視為一個點, 這個點就能反映出一個具體的顏色.

????????我們使用 R (red), G (green), B (blue) 的方式表示顏色(色光三原色). 三種顏色按照不同的比例搭配, 就能混合出各種五彩斑斕的效果.

????????計算機中針對 R, G, B 三個分量, 分別使用一個字節表示(8個比特位, 表示的范圍是 0-255, 十六進制表示為 00-FF).

????????數值越大, 表示該分量的顏色就越濃. 255, 255, 255 就表示白色; 0, 0, 0 就表示黑色

????????設置文本顏色

color: red;
color: #ff0000;
color: rgb(255, 0, 0);

????????color 屬性值的寫法:

????????預定義的顏色值(直接是單詞)

????????[最常用] 十六進制形式RGB 方式

????????十六進制形式表示顏色, 如果兩兩相同, 就可以用一個來表示.

????????#ff00ff => #f0f

<style>
.color {
color: red;
/* color: rgb(255, 0, 0); */
/* color: #ff0000; */
}
</style>
<div class="color">這是一段話</div>

? ? ? ? 文本對齊

????????控制文字水平方向的對齊.

不光能控制文本對齊, 也能控制圖片等元素居中或者靠右

text-align: [值];

????????center: 居中對齊

????????left: 左對齊

????????right: 右對齊

<style>
.text-align .one {
text-align: left;
}
.text-align .two {
text-align: right;
}
.text-align .three {
text-align: center;
}
</style>
<div class="text-align"><div class="one">左對齊</div><div class="two">右對齊</div><div class="three">居中對齊</div>
</div>

? ? ? ? 文本裝飾

text-decoration: [值];

????????常用取值:

????????underline 下劃線. [常用]

????????none 啥都沒有. 可以給 a 標簽去掉下劃線. overline 上劃線. [不常用]????????

????????line-through 刪除線 [不常用]

<style>
.text-decorate .one {
text-decoration: none;
}
.text-decorate .two {
text-decoration: underline;
}
.text-decorate .three {
text-decoration: overline;
}
.text-decorate .four {
text-decoration: line-through;
}
</style>
<div class="text-decorate"><div class="one">啥都沒有</div><div class="two">下劃線</div><div class="three">上劃線</div><div class="four">刪除線</div>
</div>

? ? ? ? 文本縮進

????????控制段落的首行縮進 (其他行不影響)

text-indent: [值];

????????單位可以使用 px 或者 em.

????????使用 em 作為單位更好. 1 個 em 就是當前元素的文字大小.

????????縮進可以是負的, 表示往左縮進. (會導致文字就冒出去了)

<style>
.text-indent .one {
text-indent: 2em;
}
.text-indent .two {
text-indent: -2em;
}
</style>
<div class="text-indent"><div class="one">正常縮進</div><div class="two">反向縮進</div>
</div>

? ? ? ??

? ? ? ? 行高

????????行高指的是上下文本行之間的基線距離.

????????HTML 中展示文字涉及到這幾個基準線:

????????頂線

????????中線

????????基線 (相當于英語四線格的倒數第二條線)底線

????????內容區：底線和頂線包裹的區域，即下圖深灰色背景區域

????????其實基線之間的距離 = 頂線間距離 = 底線間距離 = 中線間距離

line-height: [值];

????????注意1: 行高 = 上邊距 + 下邊距 + 字體大小

????????上下邊距是相等的, 此處字體大小是 16px, 行高 40px, 上下邊距就分別是 12px

????????注意2: 行高也可以取 normal 等值.

????????這個取決于瀏覽器的實現. chrome 上 normal 為 21 px

????????注意3: 行高等與元素高度, 就可以實現文字居中對齊.
????????

<style>
.line-height .two {
height: 100px;
line-height: 100px;
}
</style>
<div class="line-height"><div class="two">文本垂直居中</div>
</div>

? ? ? ? 背景屬性

? ? ? ? 背景顏色

background-color: [指定顏色]

????????默認是 transparent (透明) 的. 可以通過設置顏色的方式修改

<style>
body {
background-color: #f3f3f3;
}
.bgc .one {
background-color: red;
}
.bgc .two {
background-color: #0f0;
}
.bgc .three {
/* 背景透明 */
background-color: transparent;
}
</style>
<div class="bgc"><div class="one">紅色背景</div><div class="two">綠色背景</div><div class="three">透明背景</div>
</div>

? ? ? ? 背景圖片

background-image: url(...);

????????比 image 更方便控制位置(圖片在盒子中的位置)注意:

????????1. url 不要遺漏.

????????2. url 可以是絕對路徑, 也可以是相對路徑

????????3. url 上可以加引號, 也可以不加.

<style>
.bgi .one {
background-image: url(rose.jpg);
height: 300px;
}
</style>
<div class="bgi">
<div class="one">背景圖片</div>
</div>

? ? ? ? 背景平鋪

background-repeat: [平鋪方式]

????????重要取值:

????????repeat: 平鋪

????????no-repeat: 不平鋪

????????repeat-x: 水平平鋪

????????repeat-y: 垂直平鋪

????????默認是 repeat.

????????背景顏色和背景圖片可以同時存在. 背景圖片在背景顏色的上方

<style>
.bgr .one 
{background-image: url(rose.jpg);height: 300px;background-repeat: no-repeat;
}
.bgr .two 
{background-image: url(rose.jpg);height: 300px;background-repeat: repeat-x;
}
.bgr .three 
{background-image: url(rose.jpg);height: 300px;background-repeat: repeat-y;
}
</style>
<div class="bgr"><div class="one">不平鋪</div><div class="two">水平平鋪</div><div class="three">垂直平鋪</div>
</div>

? ? ? ? 背景位置

background-position: x y;

????????修改圖片的位置.

????????參數有三種風格:

????????1. 方位名詞: (top, left, right, bottom)

????????2. 精確單位: 坐標或者百分比(以左上角為原點)

????????3. 混合單位: 同時包含方位名詞和精確單位

<style>
.bgp .one 
{background-image: url(rose.jpg);height: 500px;background-repeat: no-repeat;background-color: purple;background-position: center;
}
</style>
<div class="bgp"><div class="one">背景居中</div>
</div>

? ? ? ? 注意：

????????如果參數的兩個值都是方位名詞, 則前后順序無關. (top left 和 left top 等效)

????????如果只指定了一個方位名詞, 則第二個默認居中. (left 則意味著水平居中, top 意味著垂直居中. )如果參數是精確值, 則的的第一個肯定是 x , 第二個肯定是 y. (100 200 意味著 x 為 100, y 為 200)如果參數是精確值, 且只給了一個數值, 則該數值一定是 x 坐標, 另一個默認垂直居中.

????????如果參數是混合單位, 則第一個值一定為 x, 第二個值為 y 坐標. (100 center 表示橫坐標為 100, 垂直居中)

????????關于坐標系:

計算機中的平面坐標系, 一般是左手坐標系(和高中數學上常用的右手系不一樣. y軸是往下指的).

? ? ? ? 如下圖所示

? ? ? ? 背景尺寸

background-size: length|percentage|cover|contain;

????????可以填具體的數值: 如 40px 60px 表示寬度為 40px, 高度為 60px

????????也可以填百分比: 按照父元素的尺寸設置.

????????cover: 把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。

????????把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域.

<style>
.bgs .one {
width: 500px;
height: 300px;
background-image: url(rose.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
</style>
<div class="bgs">
<div class="one">背景尺寸</div>
</div>

????????注意體會 contain 和 cover 的區別. 當元素為矩形(不是正方形) 時, 區別是很明顯的.
? ? ? ? contain

? ? ? ? cover

????????

? ? ? ? 圓角矩形

????????通過 border-radius 使邊框帶圓角效果
?

? ? ? ? 基本用法

border-radius: length;

????????length 是內切圓的半徑. 數值越大, 弧線越強烈
?

div {
width: 200px;
height: 100px;
border: 2px solid green;
border-radius: 10px;
}

? ? ? ? 生成圓形

????????讓 border-radius 的值為正方形寬度的一半即可

div {
width: 200px;
height: 200px;
border: 2px solid green;
border-radius: 100px;
/* 或者用 50% 表示寬度的一半 */
border-radius: 50%;
}

? ? ? ? 生成圓形矩形

????????讓 border-radius 的值為矩形高度的一半即可

div {
width: 200px;
height: 100px;
border: 2px solid green;
border-radius: 50px;
}

? ? ? ? 展開寫法

????????border-radius 是一個復合寫法. 實際上可以針對四個角分別設置.
????????等價于

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
border-radius: 10px 20px 30px 40px;

? ? ? ? 等價于

border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;

元素顯示模式

????????在 CSS 中, HTML 的標簽的顯示模式有很多.此處只重點介紹兩個:

????????塊級元素

????????行內元素

? ? ? ? 塊級元素

????????常見的元素:

h1 - h6
p
div
ul
ol
li
...

????????特點:

????????獨占一行

????????高度, 寬度, 內外邊距, 行高都可以控制.

????????寬度默認是父級元素寬度的 100% (和父元素一樣寬)是一個容器(盒子), 里面可以放行內和塊級元素.

<style>.demo1 .parent {width: 500px;height: 500px;background-color: green;}.demo1 .child {/* 不寫 width, 默認和父元素一樣寬 *//* 不寫 height, 默認為 0 (看不到了) */height: 200px;background-color: red;}
</style>
<div class="demo1"><div class="parent"><div class="child">child1</div><div class="child">child2</div></div>
</div>

????????注意:

????????文字類的元素內不能使用塊級元素

????????p 標簽主要用于存放文字, 內部不能放塊級元素, 尤其是 div

<body><p><div>蛤蛤</div></p>
</body>

? ? ? ? 行內元素

????????常見的元素:
?

a
strong
b
em
i
del
s
ins
u
span
...

????????特點:

????????不獨占一行, 一行可以顯示多個

????????設置高度, 寬度, 行高無效

????????左右外邊距有效(上下無效). 內邊距有效.默認寬度就是本身的內容

????????行內元素只能容納文本和其他行內元素, 不能放塊級元素

<style>.demo2 span {width: 200px;height: 200px;background-color: red;}
</style>
<div class="demo2"><span>child1</span><span>child2</span><span>child3</span>
</div>

注意:

????????a 標簽中不能再放 a 標簽 (雖然 chrome 不報錯, 但是最好不要這么做).

????????a 標簽里可以放塊級元素, 但是更建議先把 a 轉換成塊級元素

????????行內元素和塊級元素的區別

????????塊級元素獨占一行, 行內元素不獨占一行

????????塊級元素可以設置寬高, 行內元素不能設置寬高.

????????塊級元素四個方向都能設置內外邊距, 行內元素垂直方向不能設置

????????改變顯示模式
????????

????????使用 display 屬性可以修改元素的顯示模式.

????????可以把 div 等變成行內元素, 也可以把 a , span 等變成塊級元素.

????????display: block 改成塊級元素 [常用]

????????display: inline 改成行內元素 [很少用]

????????display: inline-block 改成行內塊元素

盒模型

????????每一個 HTML 元素就相當于是一個矩形的 "盒子"這個盒子由這幾個部分構成：

????????邊框 border

????????內容 content

????????內邊距 padding

????????外邊距 margin

? ? ? ? 邊框

? ? ? ? 基礎屬性

????????粗細: border-width

????????樣式: border-style, 默認沒邊框. solid 實線邊框 dashed 虛線邊框 dotted 點線邊框

????????顏色: border-color

<div>test</div>

div {
width: 500px;
height: 250px;
border-width: 10px;
border-style: solid;
border-color: green;
}

????????支持簡寫, 沒有順序要求

border: 1px solid red;

????????可以改四個方向的任意邊框.

border-top/bottom/left/right

????????以下的代碼只給上邊框設為紅色, 其余為藍色.利用到的層疊性, 就近原則的生效.

border: 1px solid blue;
border-top: red;

????????邊框會撐大盒子

????????可以看到, width, height 是 500*250, 而最終整個盒子大小是 520 * 270. 邊框10個像素相當于擴大了大小.

????????通過 box-sizing 屬性可以修改瀏覽器的行為, 使邊框不再撐大盒子.

/*    * 為通配符選擇器.    */
* {
box-sizing: border-box;
}

? ? ? ? 內邊距

????????padding 設置內容和邊框之間的距離.

? ? ? ? 基礎寫法

????????默認內容是頂著邊框來放置的. 用 padding 來控制這個距離可以給四個方向都加上邊距

????????padding-top

????????padding-bottom

????????padding-left

????????padding-right

<div>test
</div>

div {
height: 200px;
width: 300px;
}

? ? ? ? 加上padding后

div {
height: 200px;
width: 300px;
padding-top: 5px;
padding-left: 10px;
}

????????注意:

????????整個盒子的大小從原來的 300 * 200 => 310 * 205. 說明內邊距也會影響到盒子大小(撐大盒

子).

????????使用 box-sizing: border-box 屬性也可以使內邊距不再撐大盒子. (和上面 border 類似)

? ? ? ? 復合寫法

????????可以把多個方向的 padding 合并到一起. [四種情況都要記住, 都很常見]

padding: 5px; 表示四個方向都是 5px
padding: 5px 10px; 表示上下內邊距 5px, 左右內邊距為 10px
padding: 5px 10px 20px; 表示上邊距 5px, 左右內邊距為 10px, 下內邊距為 20px
padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (順時針)

? ? ? ? 外邊距

? ? ? ? 基礎寫法

????????控制盒子和盒子之間的距離.可以給四個方向都加上邊距

????????margin-top

????????margin-bottom

????????margin-left

????????margin-right

<div class="first">蛤蛤</div>
<div>呵呵</div>

div {
background-color: red;
width: 200px;
height: 200px;
}
.first {
margin-bottom: 20px;
}

????????

? ? ? ? 復合寫法

? ? ? ? 規則同padding

margin: 10px; // 四個方向都設置
margin: 10px 20px; // 上下為 10, 左右 20
margin: 10px 20px 30px; // 上 10, 左右 20, 下 30
margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40

????????塊極元素居中

????????前提:

????????指定寬度(如果不指定寬度, 默認和父元素一致)

????????把水平 margin 設為 auto

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

????????注意:

????????水平居中的方式和 text-align 不一樣.

????????margin: auto 是給塊級元素用得到.

????????text-align: center 是讓行內元素或者行內塊元素居中的.

????????另外, 對于垂直居中, 不能使用 "上下 margin 為 auto " 的方式.

????????去除瀏覽器默認樣式

????????瀏覽器會給元素加上一些默認的樣式, 尤其是內外邊距. 不同瀏覽器的默認樣式存在差別.為了保證代碼在不同的瀏覽器上都能按照統一的樣式顯示, 往往我們會去除瀏覽器默認樣式.使用通配符選擇器即可完成這件事情.

* {
marign: 0;
padding: 0;
}

彈性布局
????????

? ? ? ? 初體驗

????????創建一個 div, 內部包含三個 span

<div><span>1</span><span>2</span><span>3</span>
</div>
<style>
div {width: 100%;height: 150px;background-color: red;
}
div>span {background-color: green;width: 100px;
}
</style>

? ? ? ? 效果為：

????????當我們給 div 加上 display:flex 之后, 效果為

????????此時看到, span 有了高度, 不再是 "行內元素了"

????????再給 div 加上 justify-content: space-around; 此時效果為

????????此時可以看到這些 span 已經能夠水平隔開了.

????????把 justify-content: space-around; 改為 justify-content: flex-end; 可以看到此時三個元素在右側顯示了

? ? ? ? flex布局基本概念

????????flex 是 flexible box 的縮寫. 意思為 "彈性盒子".

????????任何一個 html 元素, 都可以指定為 display:flex 完成彈性布局.

????????flex 布局的本質是給父盒子添加 display:flex 屬性, 來控制子盒子的位置和排列方式.

????????基礎概念:

????????被設置為 display:flex 屬性的元素, 稱為 flex container

????????它的所有子元素立刻稱為了該容器的成員, 稱為 flex item

????????flex item 可以縱向排列, 也可以橫向排列, 稱為 flex direction(主軸)

????????

????????注意:

????????當父元素設置為 display: flex 之后, 子元素的 float, clear, vertical-align 都會失效.

? ? ? ? 常用屬性

????????justify-content

????????
????????設置主軸上的子元素排列方式.

????????使用之前一定要確定好主軸是哪個方向

? ? ? ? 示例：

<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<style>
div {
width: 100%;
height: 150px;
background-color: red;
display: flex;
}
div span {
width: 100px;
height: 100px;
background-color: green;
}
</style>

????????未指定 justify-content 時, 默認按照從左到右的方向布局.

????????設置 justify-content: flex-end , 此時元素都排列到右側了.

????????設置 jutify-content: center , 此時元素居中排列

????????設置 justify-content: space-around;平分了剩余空間.

? ? ? ? align-items

????????設置側軸上的元素排列方式

????????在上面的代碼中, 我們是讓元素按照主軸的方向排列, 同理我們也可以指定元素按照側軸方向排列

????????取值和 justify-content 差不多.理解 stretch(拉伸):

????????這個是 align-content 的默認值. 意思是如果子元素沒有被顯式指定高度, 那么就會填充滿父元素的高度.

<div><span>1</span><span>2</span><span>3</span>
</div>
<style>
div {
width: 500px;
height: 500px;
background-color: green;
display: flex;
justify-content: space-around;
}
div span {
width: 150px;
background-color: red;
}
</style>

可以使用 align-items 實現垂直居中

<div><span>1</span><span>2</span><span>3</span>
</div>
<style>
div {
width: 500px;
height: 500px;
background-color: green;
display: flex;
justify-content: space-around;
align-items: center;
}
div span {
width: 150px;
height: 100px;
background-color: red;
}
</style>

????????