css--DIV+CSS布局、常用属性、盒模型、自定义字体、标签的分类及相互转换
目錄
一、DIV+CSS布局
1.1 布局時(shí)常用的屬性
1.2 布局 - 上中下結(jié)構(gòu)
1.3 布局 - 上中下 - 左右
1.4? 圣杯布局和雙飛翼布局
二、字體屬性
2.1 字體顏色
2.2 字體大小
2.3 字體加粗
2.4 字體樣式
2.5 字體類型
三、背景屬性
3.1 背景顏色
3.2 背景圖片
3.3 背景圖片是否平鋪
3.4 背景圖片大小
3.5 背景定位
3.6 背景是否固定
四、文本屬性
4.1 文本水平對齊方式
4.2 文本裝飾
4.3 文本大小寫轉(zhuǎn)換
4.4 控制文本縮進(jìn)
4.5 文本對齊方式
五、列表屬性
5.1 設(shè)置所有列表屬性
5.2 設(shè)置項(xiàng)目符號類型
5.3 設(shè)置項(xiàng)目符號為圖片
5.4 設(shè)置項(xiàng)目符號的位置
六、表格屬性?
6.1 表格邊框
6.2 折疊邊框
6.3 表格寬度和高度
6.4 表格文字對齊
6.5 表格填充
6.6 表格顏色
6.7 邊框之間的距離以及背景屬性
七、其他屬性
7.1 overflow屬性
7.2 字符間距、行高、元素透明度
八、盒模型
8.1 初識盒模型
8.2 content 內(nèi)容區(qū)域
8.3 padding 內(nèi)邊距
8.4 border 邊框?qū)傩?/p>
8.5 margin 外邊距屬性
8.6 怪異（IE）盒模型
8.7 彈性盒模型
九、自定義字體
9.1 字體圖標(biāo)
十、標(biāo)簽的分類及相互轉(zhuǎn)換
10.1 行級標(biāo)簽
10.2 塊級標(biāo)簽
10.3 行內(nèi)塊級標(biāo)簽
10.4 標(biāo)簽之間的相互轉(zhuǎn)換
一、DIV+CSS布局
?優(yōu)點(diǎn)：
- 符合W3C標(biāo)準(zhǔn)
- 使頁面載入得更快
- 保持視覺的一致性
- 修改設(shè)計(jì)時(shí)更有效率
- 搜索引擎友好
1.1 布局時(shí)常用的屬性
| 屬性 | 描述 |
| width | 寬度 |
| height | 高度 |
| background-color | 背景顏色 |
| float | 浮動(dòng)（div不再獨(dú)占一行，左右擺放） |
1.2 布局 - 上中下結(jié)構(gòu)
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.header {height: 100px;background-color: #fcc;}.content {height: 400px;background-color: #ff9;}.footer {height: 100px;background-color: #ccf;}</style></head><body><div class="header"></div><div class="content"></div><div class="footer"></div></body> </html>1.3 布局 - 上中下 - 左右
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.header {width: 100%;height: 100px;background-color: red;}.nav {width: 100%;height: 50px;background-color: pink;}.content {width: 100%;height: 400px;background-color: gray;}.left {float: left;width: 30%;height: 400px;background-color: yellow;}.center {float: left;width: 40%;height: 400px;background-color: turquoise;}.right {float: left;width: 30%;height: 400px;background-color: violet;}.footer {width: 100%;height: 100px;background-color: blue;}</style> </head><body><div class="container"><div class="header"></div><div class="nav"></div><div class="content"><div class="left"></div><div class="center"></div><div class="right"></div></div><div class="footer"></div></div> </body></html>1.4? 圣杯布局和雙飛翼布局
作用：解決的問題是相同的，兩邊定寬、中間自適應(yīng)的三欄布局，其中中間欄要放在文檔流前面以優(yōu)先渲染，一般用于PC端
圣杯布局：
優(yōu)點(diǎn)：無需添加dom節(jié)點(diǎn)
缺點(diǎn)：正常情況下是沒有問題的，但是特殊情況下就會暴露此方案的弊端，如果將瀏覽器無線放大時(shí)，「圣杯」將會「破碎」掉
<div class="box"><div class="center"></div><div class="left"></div><div class="right"></div></div> .box {padding: 0 200px;height: 300px;}.center {width: 100%;height: 300px;background-color: orange;float: left;}.left {width: 200px;height: 300px;background-color: #f40;float: left;position: relative;left: -200px;margin-left: -100%;}.right {width: 200px;height: 300px;background-color: skyblue;position: relative;right: -200px;margin-left: -200px;float: left;}雙飛翼布局：
<div class="box"><div class="center"><div class="box">middle</div></div><div class="left">left</div><div class="right">right</div> </div> .center {width: 100%;float: left;}.box {height: 300px;background-color: orange;margin: 0 200px;}.left {width: 200px;height: 300px;background-color: #f40;float: left;left: -200px;margin-left: -100%;}.right {width: 200px;height: 300px;background-color: skyblue;right: -200px;margin-left: -200px;float: left;}二、字體屬性
、
CSS 字體屬性定義字體， 加粗， 大小， 文字樣式?
2.1 字體顏色
-
color：設(shè)置文本的顏色
關(guān)于字體顏色通常有四種表現(xiàn)形式，下面分別介紹一下：
a.關(guān)鍵詞：例如：red、blue、skyblue等
b.十六進(jìn)制：例如：#000、#f40、#ccc等
c.rgb：例如rgb(0,0,0)、rgb(255,255,255）等
d.rgba：例如：rgb(0,0,0,.5)、rgb(255,255,255,.7）等；其中rgba中a指的是透明度，取值范圍為：0~1，0為完全透明、1為不透明
2.2 字體大小
- font-size
屬性值：
| 屬性值 | 描述 |
| smaller | 把 font-size 設(shè)置為比父元素更小的尺寸 |
| larger | 把 font-size 設(shè)置為比父元素更大的尺寸 |
| length | 把 font-size 設(shè)置為一個(gè)固定的值，例如：font-size:18px; |
| % | 把 font-size 設(shè)置為基于父元素的一個(gè)百分比值，例如：font-size:200%; |
| inherit | 規(guī)定應(yīng)該從父元素繼承字體尺 |
2.3 字體加粗
- font-weight
2.4 字體樣式
- font-style
| normal | 默認(rèn)值。瀏覽器顯示一個(gè)標(biāo)準(zhǔn)的字體樣式 |
| italic | 瀏覽器會顯示一個(gè)斜體的字體樣式 |
| oblique | 瀏覽器會顯示一個(gè)傾斜的字體樣式 |
| inherit | 規(guī)定應(yīng)該從父元素繼承字體樣式 |
2.5 字體類型
- font-family：指定一個(gè)元素的字體
三、背景屬性
背景屬性主要有以下幾個(gè)：
| 屬性 | 描述 |
| background-color | 設(shè)置背景顏色 |
| background-image | 設(shè)置背景圖片 |
| background-attachment | 設(shè)置背景圖片是隨內(nèi)容滾動(dòng)還是固定 |
| background-position | 設(shè)置背景圖片顯示位置 |
| background-repeat | 設(shè)置背景圖片如何填充 |
| background-size | 設(shè)置背景圖片大小 |
| background | 復(fù)合屬性 |
簡寫：background
3.1 背景顏色
- background-color
| color | 指定背景顏色 |
| transparent | 指定背景顏色應(yīng)該是透明的。這是默認(rèn) |
| inherit | 指定背景顏色，應(yīng)該從父元素繼承 |
3.2 背景圖片
- background-image
元素的背景是元素的總大小，包括填充和邊界（但不包括邊距）。
默認(rèn)情況下，background-image放置在元素的左上角，并重復(fù)垂直和水平方向。
屬性值：
| url('URL') | 圖像的URL |
| none | 無圖像背景會顯示。這是默認(rèn) |
| linear-gradient() | 創(chuàng)建一個(gè)線性漸變的 "圖像"(從上到下) |
| radial-gradient() | 用徑向漸變創(chuàng)建 "圖像"。 (center to edges) |
| repeating-linear-gradient() | 創(chuàng)建重復(fù)的線性漸變 "圖像"。 |
| repeating-radial-gradient() | 創(chuàng)建重復(fù)的徑向漸變 "圖像" |
| inherit | 指定背景圖像應(yīng)該從父元素繼承 |
3.3 背景圖片是否平鋪
-
background-repeat
默認(rèn)情況下，重復(fù)background-image的垂直和水平方向
background-position屬性設(shè)置背景圖像位置。如果指定的位置是沒有任何背景，圖像總是放在元素的左上角
屬性值：
| repeat | 背景圖像將向垂直和水平方向重復(fù)。這是默認(rèn) |
| repeat-x | 只有水平位置會重復(fù)背景圖像 |
| repeat-y | 只有垂直位置會重復(fù)背景圖像 |
| no-repeat | background-image不會重復(fù) |
| inherit | 指定background-repea屬性設(shè)置應(yīng)該從父元素繼承 |
3.4 背景圖片大小
- background-size
屬性值：
| length | 設(shè)置背景圖片高度和寬度。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置的高度。如果只給出一個(gè)值，第二個(gè)是設(shè)置為 auto(自動(dòng)) |
| percentage | 將計(jì)算相對于背景定位區(qū)域的百分比。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置的高度。如果只給出一個(gè)值，第二個(gè)是設(shè)置為"auto(自動(dòng))" |
| cover | 此時(shí)會保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區(qū)域的最小大小。 |
| contain | 此時(shí)會保持圖像的縱橫比并將圖像縮放成將適合背景定位區(qū)域的最大大小。 |
3.5 背景定位
-
baground-position
設(shè)置背景圖像的起始位置
注意：對于這個(gè)工作在Firefox和Opera，background-attachment必須設(shè)置為 "fixed（固定）".
屬性值：
| 值 | 說明 |
| let top | 左上角 |
| let center | 左中 |
| let bottom | 左下 |
| right top | 右上角 |
| right center | 右中 |
| right bottom | 右下 |
| center top | 中上 |
| center center | 中種 |
| center bottom | 中下 |
| x% y% | 第一個(gè)值是水平位置，第二個(gè)值是垂直。左上角是0％0％。右下角是100％100％。如果僅指定了一個(gè)值，其他值將是50％。 。默認(rèn)值為：0％0％ |
| xpos ypos | 第一個(gè)值是水平位置，第二個(gè)值是垂直。左上角是0。單位可以是像素（0px0px）或任何其他 css單位。如果僅指定了一個(gè)值，其他值將是50％。你可以混合使用％和positions |
| inherit | 指定background-position屬性設(shè)置應(yīng)該從父元素繼承 |
注意：如果僅指定一個(gè)關(guān)鍵字，其他值將會是"center"
3.6 背景是否固定
-
background-attchment
設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)
屬性值
| scroll | 背景圖片隨著頁面的滾動(dòng)而滾動(dòng)，這是默認(rèn)的 |
| fixed | 背景圖片不會隨著頁面的滾動(dòng)而滾動(dòng) |
| local | 背景圖片會隨著元素內(nèi)容的滾動(dòng)而滾動(dòng) |
| initial | 設(shè)置該屬性的默認(rèn)值 |
| inherit | 指定 background-attachment 的設(shè)置應(yīng)該從父元素繼承 |
四、文本屬性
4.1 文本水平對齊方式
-
text-algin：指定元素文本的水平對齊方式
屬性值
| left | 把文本排列到左邊。默認(rèn)值：由瀏覽器決定 |
| right | 把文本排列到右邊 |
| center | 把文本排列到中間 |
| justify | 實(shí)現(xiàn)兩端對齊文本效果 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 text-align 屬性的值 |
4.2 文本裝飾
-
text-decoration：規(guī)定添加到文本的修飾，下劃線、上劃線、刪除線等
text-decoration 屬性是以下三種屬性的簡寫：
text-decoration-line
text-decoration-color
text-decpratiooon-style
語法：
/*關(guān)鍵值*/ text-decoration: none; /*沒有文本裝飾*/ text-decoration: underline red; /*紅色下劃線*/ text-decoration: underline wavy red; /*紅色波浪形下劃線*//*全局值*/ text-decoration: inherit; text-decoration: initial; text-decoration: unset;屬性值
| none | 默認(rèn)。定義標(biāo)準(zhǔn)的文本 |
| underline | 定義文本下的一條線 |
| overline | 定義文本上的一條線 |
| line-through | 定義穿過文本下的一條線 |
| blink | 定義閃爍的文本 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 text-decoration 屬性的值 |
4.3 文本大小寫轉(zhuǎn)換
- text-transform：設(shè)置文本大小寫
屬性值
| none | 默認(rèn)。定義帶有小寫字母和大寫字母的標(biāo)準(zhǔn)的文本 |
| capitalize | 文本中的每個(gè)單詞以大寫字母開頭 |
| uppercase | 定義僅有大寫字母 |
| lowercase | 定義無大寫字母，僅有小寫字母 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 text-transform 屬性的值 |
4.4 控制文本縮進(jìn)
-
text-indent：規(guī)定文本塊中首行文本的縮進(jìn)
屬性值
| length | 定義固定的縮進(jìn)。默認(rèn)值：0 |
| % | 定義基于父元素寬度的百分比的縮進(jìn) |
| inherit | 規(guī)定應(yīng)該從父元素繼承 text-indent 屬性的值 |
注意：負(fù)值是允許的。 如果值是負(fù)數(shù)， 將第一行左縮進(jìn)
4.5 文本對齊方式
-
text-justify：指定文本對齊設(shè)置為"justify"的理據(jù)，此屬性指定應(yīng)怎樣對齊文本以及對齊間距
屬性值：
| auto | 瀏覽器決定齊行算法 |
| none | 禁用齊行 |
| inter-word | 增加/減少單詞間的間隔 |
| inter-ideograph | 用表意文本來排齊內(nèi)容 |
| inter-cluster | 只對不包含內(nèi)部單詞間隔的內(nèi)容（比如亞洲語系）進(jìn)行排齊 |
| distribute | 類似報(bào)紙版面，除了在東亞語系中最后一行是不齊行的 |
| kashida | 通過拉伸字符來排齊內(nèi)容 |
五、列表屬性
5.1 設(shè)置所有列表屬性
- list-style：在一個(gè)聲明中設(shè)置所有的列表屬性
屬性值
| list-style-type | 設(shè)置列表項(xiàng)標(biāo)記的類型 |
| list-style-position | 設(shè)置在何處放置列表項(xiàng)標(biāo)記 |
| list-style-image | 使用圖像來替換列表項(xiàng)的標(biāo)記 |
| initial | 將這個(gè)屬性設(shè)置為默認(rèn)值 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 list-style 屬性的值 |
5.2 設(shè)置項(xiàng)目符號類型
list-style-type：
屬性值：
| 值 | 描述 |
| none | 默認(rèn)值 |
| disc | 空心圓 |
| circle | 實(shí)心圓 |
| squer | 實(shí)心正方形 |
5.3 設(shè)置項(xiàng)目符號為圖片
-
list-style-image
屬性值
| URL | 圖像的路徑 |
| none | 默認(rèn)。無圖形被顯示 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 list-style-image 屬性的值 |
5.4 設(shè)置項(xiàng)目符號的位置
-
list-style-position
屬性值
| inside | 列表項(xiàng)目標(biāo)記放置在文本以內(nèi)，且環(huán)繞文本根據(jù)標(biāo)記對齊 |
| outside | 默認(rèn)值。保持標(biāo)記位于文本的左側(cè)。列表項(xiàng)目標(biāo)記放置在文本以外，且環(huán)繞文本不根據(jù)標(biāo)記對齊 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 list-style-position 屬性的值 |
六、表格屬性?
6.1 表格邊框
- border
6.2 折疊邊框
- border-collapse：屬性設(shè)置表格的邊框是否被折疊成一個(gè)單一的邊框或隔開
6.3 表格寬度和高度
width 和 height 屬性定義表格的寬度和高度
table { width:100%; } td { height:50px; }6.4 表格文字對齊
表格中的文本對齊和垂直對齊屬性
text-align 屬性設(shè)置水平對齊方式， 向左， 右， 或中心 left|center|right
td { text-align:right; }垂直對齊屬性設(shè)置垂直對齊 middle|top|bottom
td { height:50px; vertical-align:bottom;6.5 表格填充
如果在表的內(nèi)容中控制空格之間的邊框，應(yīng)使用 td 和 th 元素的填充屬性
td { padding:15px; }6.6 表格顏色
下面的例子指定邊框的顏色， 和 th 元素的文本和背景顏色
table, td, th {border:1px solid green; } td {background-color:green;color:white; }6.7 邊框之間的距離以及背景屬性
- border-spacing
- background
| visible | 默認(rèn)值。內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外 |
| hidden | 內(nèi)容會被修剪，并且其余內(nèi)容是不可見的 |
| scroll | 內(nèi)容會被修剪，但是瀏覽器會顯示滾動(dòng)條以便查看其余的內(nèi)容 |
| auto | 如果內(nèi)容被修剪，則瀏覽器會顯示滾動(dòng)條以便查看其余的內(nèi)容 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值 |
七、其他屬性
| 屬性 | 值 |
| width | 元素的寬度（只包含內(nèi)容的寬度） |
| height | 元素的高度（只包含內(nèi)容的高度） |
| min-width | 最小寬度 |
| max-width | 最大寬度 |
| min-height | 最小高度 |
| max-height | 最大高度 |
7.1 overflow屬性
指定如果內(nèi)容溢出一個(gè)元素的框，會發(fā)生什么
屬性值
一行文字溢出，省略號顯示：
??
7.2 字符間距、行高、元素透明度
- 設(shè)置字符之間的距離：letter-spacing
- ?
- ???
- ???
- ? 設(shè)置行高 line-height
- ?
- ?
- ? 設(shè)置元素透明度 opacity
- ?
white-space 屬性指定元素內(nèi)的空白怎樣處理
verticle-align 設(shè)置一個(gè)元素的垂直對齊方式
該屬性定義行內(nèi)元素的基線相對于該元素所在行的基線的垂直對齊
?關(guān)于更多的屬性，請參考：菜鳥教程
八、盒模型
8.1 初識盒模型
所有 HTML 元素可以看作盒子， 在 CSS 中， "box model" 這一術(shù)語是 用來設(shè)計(jì)和布局時(shí)使用 CSS 盒模型本質(zhì)上是一個(gè)盒子， 封裝周圍的 HTML 元素， 它包括： 外邊距（ margin ） ， 邊框（ border ） ， 內(nèi)邊距（ padding ） ， 和實(shí) 際內(nèi)容（ content ）
盒模型由：content+padding+border+margin組成，分別表示其內(nèi)容區(qū)域、內(nèi)邊距、邊框以及外邊距
這個(gè)其實(shí)可以這樣理解，比如一個(gè)裝有玻璃杯的快遞盒子，那么里面的玻璃杯就對應(yīng)content、玻璃杯周圍的泡沫就對應(yīng)padding、快遞盒子就對應(yīng)border、快遞盒子之間的距離就相當(dāng)于margin這樣就很容易理解了，自然就將抽象的事物具體化了。
8.2 content 內(nèi)容區(qū)域
?W3C 盒子模型 ( 標(biāo)準(zhǔn)盒模型 )：
?Content 內(nèi)容區(qū)域包含寬度（ width ） 和高度（ height ） 兩個(gè)屬性 塊級元素默認(rèn)寬度為100% ， 行內(nèi)元素默認(rèn)寬度是由內(nèi)容撐開， 不管塊級元素還是行內(nèi)元素， 默認(rèn)高度都是由內(nèi)容撐開塊級元素可以設(shè)置寬高屬性，行內(nèi)元素設(shè)置寬高屬性不生效 寬度（ width ） 和高度（ height ） 可以取值為像素（ px ） 和百分比 （ % ）
注意：
- 塊級元素默認(rèn)寬度為100%，行內(nèi)元素默認(rèn)寬度由內(nèi)容撐開
- 行內(nèi)元素和塊級元素的默認(rèn)高度都由內(nèi)容撐開
- 塊級元素可以設(shè)置寬高，行內(nèi)元素設(shè)置寬高不生效
- 寬度設(shè)置百分比生效
- 高度設(shè)置百分比不生效，一般設(shè)置px
8.3 padding 內(nèi)邊距
| padding | 使用簡寫屬性設(shè)置在一個(gè)聲明中的所有填充屬性。簡寫屬性 |
| padding-bottom | 設(shè)置元素的底部填充 |
| padding-left | 設(shè)置元素的左部填充 |
| padding-right | 設(shè)置元素的右部填充 |
| padding-top | 設(shè)置元素的頂部填充 |
注意：
padding:value;? 四周
padding:value value;? 上下 左右
padding:value value value;? 上 左右 下
padding:value value value value;? 上 右 下 左
padding 會撐大容器
可能的值：
像素：px
百分比：%
當(dāng)簡寫屬性和單個(gè)屬性同時(shí)存在，單個(gè)屬性要寫在簡寫屬性的后面
8.4 border 邊框?qū)傩?/h3>
a.border-style 定義邊框的樣式
| 屬性 | 值 |
| none | 默認(rèn)無邊框 |
| dotted | 定義一個(gè)點(diǎn)線邊框 |
| dashed | 定義一個(gè)虛線邊框 |
| solid | 定義一個(gè)實(shí)線邊框 |
| double | 定義兩個(gè)邊框。兩個(gè)邊框的寬度和border-width的值相同 |
| groove | 定義3D溝槽邊框。效果取決于邊框的顏色值 |
| ridge | 定義3D脊邊框。效果取決于邊框的顏色值 |
| inset | 定義一個(gè)3D的嵌入邊框。效果取決于邊框的顏色值 |
| outset | 定義一個(gè)3D的突出邊框。效果取決于邊框的顏色值 |
border-style 屬性可以有 1-4 個(gè)值 ：
b.border-width 定義邊框?qū)挾?/strong>
為邊框指定寬度有兩種方法：
可以指定長度值，比如 2px 或 0.1em(單位為 px, pt, cm, em 等）
使用 3 個(gè)關(guān)鍵字之一，它們分別是 thick 、medium（默認(rèn)值） 和 thin。
注意：
CSS 沒有定義 3 個(gè)關(guān)鍵字的具體寬度，所以一個(gè)用戶可能把 thick 、medium 和 thin 分別設(shè)置為等于 5px、3px 和 2px，而另一個(gè)用戶則分別設(shè)置為 3px、2px 和 1px。
c.border-color? 設(shè)置邊框的顏色
name - 指定顏色的名稱，如 "red"
RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
Hex - 指定16進(jìn)制值, 如 "#ff0000"
| auto | 設(shè)置瀏覽器邊距。 這樣做的結(jié)果會依賴于瀏覽器 |
| length | 定義一個(gè)固定的margin（使用像素，pt，em等） |
| % | 定義一個(gè)使用百分比的邊距 |
還可以設(shè)置邊框的顏色為"transparent"即透明，這在制作一些特殊的圖形中會很常見
注意： border-color單獨(dú)使用是不起作用的，必須得先使用border-style來設(shè)置邊框樣式。
d.邊框-單獨(dú)設(shè)置各邊
1.border-top:width style color;
??????? border-top-width:;
??????? border-top-style:;
??????? border-top-color:;
2.border-bottom:width style color;
??????? boorder-bottom-width:;
??????? boorder-bottom-style:;
??????? boorder-bottom-coolor:;
3.border-left:width style color;
??????? border-left-width:;
??????? border-left-style:;
??????? border-left-coolor:;
4.border-right:width style color;
??????? border-right-width:;
??????? border-right-style:;
??????? border-right-color:;
簡寫：border-style:width style colr;
-
注意：
-
如果顏色默認(rèn)不寫，顯示黑色，瀏覽器渲染
-
至少需要寫兩個(gè)值：寬度和類型
-
兩條邊框相接區(qū)域斜均分（按照對角線的區(qū)域均分）
-
可以繪制一個(gè)三角形
-
四條邊框，設(shè)置寬高都為0
-
其中三條邊顏色透明 transparent
-
transparent：顏色透明，可以用于文字顏色透明、邊框透明、input背景設(shè)置透明
-
-
練習(xí)：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 0;height: 0;/* border-bottom: 50px solid transparent;border-right: 50px solid transparent;border-left: 50px solid transparent; 或 */border: 50px solid transparent;border-top: 50px solid seagreen;}</style> </head> <body><div class="box"></div> </body> </html>??
8.5 margin 外邊距屬性
清除周圍的（外邊框）元素區(qū)域
沒有背景顏色，是完全透明的。
margin 可以單獨(dú)改變元素的上，下，左，右邊距，也可以一次改變所有的屬性。
簡寫屬性：
margin:value;? 四周
margin:value value;? 上下 左右
margin:value value value;? 上 左右 下
margin:value value value value;? 上 下 左 右
單個(gè)屬性：
margin-top:;? 上外邊距
margin-right:;? 右外邊距
margin-left:;? 左外邊距
margin-bttoom:;? 下外邊距
負(fù)值問題：
- margin可以設(shè)置負(fù)值
- margin-top和margin-left負(fù)值，元素向上、向左移動(dòng)
- margin-right負(fù)值，右側(cè)元素左移，自身不受影響
- margin-bottom負(fù)值，下方元素上移，自身不受影響
垂直問題（兄弟關(guān)系）：
- 垂直方向上外邊距合并時(shí)，取較大值
- 空白內(nèi)容也會重疊(被忽略)
- 解決方案：將相鄰的兩個(gè)盒子中的一個(gè)盒子放在一個(gè)新的BFC區(qū)域里，(設(shè)置overflow:hidden)就可以解決margin重疊的問題
margin-top傳遞性（盒子和盒子之間是父與子關(guān)系）：
盒子和盒子之間是父子關(guān)系，整個(gè)margin的屬性只有margin-top會有傳遞性，子元素找不到父元素的邊界（參考位置），將這個(gè)margin-top屬性會傳遞給父元素
解決方案：
父元素設(shè)置border，會改變父元素盒子的大小， border：1px solid transparent;（不推薦）
父元素設(shè)置padding，也會改變父元素盒子的大小，padding可以作為margin-top的參考（不推薦）
父元素設(shè)置overflow:hidden，產(chǎn)生BFC容器，這個(gè)容器內(nèi)所有內(nèi)容有自己的排列規(guī)范，不會影響盒子外面的元素
子元素盒子width默認(rèn)不設(shè)置和設(shè)置100%的區(qū)別：
-
默認(rèn)不設(shè)置，auto自適應(yīng)，在父元素區(qū)域里面自適應(yīng)，盒子大小計(jì)算方式為：
-
子盒子的大小=內(nèi)容區(qū)域+padding * 2+border * 2
-
子盒子所占空間的大小=大盒子的寬度
-
-
100%是參考父元素的寬度，折算下來內(nèi)容區(qū)域是固定值，盒子大小計(jì)算方式為：
-
子盒子的真正大小=父盒子的width值為大小+子盒子padding *2+border *2；
-
子盒子所占空間的大小：子盒子的真正大小+margin
-
8.6 怪異（IE）盒模型
在該模式下， 瀏覽器的 width 屬性不是內(nèi)容的寬度， 而是內(nèi)容、 內(nèi) 邊距和邊框的寬度的總和； 即在怪異模式下的盒模型， 盒子的 （ content ） 寬度 + 內(nèi)邊距 padding+ 邊框 border 寬度 = 我們設(shè)置的 width(height 也是如此 ) ， 盒子總寬度 / 高度 =width/height + margin?
盒模型轉(zhuǎn)換：box-sizing
box - sizing 屬性允許您以特定的方式定義匹配某個(gè)區(qū)域的特定元素
box - sizing: content - box ; 寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框
box - sizing: border - box ; 為元素設(shè)定的寬度和高度決定了元素的邊框盒。 就是說，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。 通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才 能得到內(nèi)容的寬度和高度
即 box - sizing 屬性可以指定盒子模型種類， content-box 指定盒子模型 為 W3C （標(biāo)準(zhǔn)盒模型） ， border-box 為怪異盒模型
8.7 彈性盒模型
定義 ：
彈性盒子是 CSS3 的一種新的布局模式
CSS3 彈性盒是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞?/p>
引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個(gè)容器中的子元素進(jìn)行排列、 對齊和分配空白空間?
CSS3 彈性盒內(nèi)容：
彈性盒子由彈性容器 (Flex container) 和彈性子元素 (Flex item) 組成
彈性容器通過設(shè)置 display 屬性的值為 flex 將其定義為彈性容器
彈性容器內(nèi)包含了一個(gè)或多個(gè)彈性子元素
溫馨提示：
彈性容器外及彈性子元素內(nèi)是正常渲染的
彈性盒子只定義了彈性子元素如何在彈性容器內(nèi)布局
父元素上的屬性：
display:flex; 開啟彈性盒，屬性設(shè)置后子元素默認(rèn)水平排列
flex-direction;? 指定彈性子元素在父容器中的位置
flex-direction: row | row-reverse | column | column-reversejustify-content; 把彈性項(xiàng)沿 著彈性容器的主軸線（ main axis ） 對齊
justify-content: flex-start | flex-end | center | space-between | space-around?align-items; 設(shè)置或檢索彈性盒子元素在側(cè)軸（縱軸）方向上的對齊方式
子元素上的屬性：
flex-grow 根據(jù)彈性盒子元素所設(shè)置的擴(kuò)展因子作為比率來分配剩余空間
默認(rèn)為 0，即如果存在剩余空間，也不放大
如果只有一個(gè)子元素設(shè)置， 那么按擴(kuò)展因子轉(zhuǎn)化的百分比對其分配剩余空間。 0.1 即 10% ，1 即 100% ， 超出按 100%
????????
九、自定義字體
CSS3提供的一個(gè)技術(shù)，你可以把當(dāng)前這個(gè)項(xiàng)目要用到的字體下載到本地，在代碼中引入你本地的字體，以后項(xiàng)目部署到服務(wù)器，將字題也一起補(bǔ)上，瀏覽器加載的時(shí)候，用你提供好的字體。
/* 一個(gè)font-face只能有一種字體但是，你可以是一個(gè)字體 多種格式。 一張圖片 png jpg瀏覽器對字體兼容性不一樣。 */ @font-face {/*myfont ：自定義的名字*/font-family: myfont;src: /*選擇自己下載的字體及路徑*/url("files/徐靜蕾字體.fon"),url("files//徐靜蕾字體.woff") } .op{/*使用自定義的字體，通過名字調(diào)用*/font-family: myfont; }為了考慮各個(gè)瀏覽器對字體的支持，我們可以將一個(gè)字體轉(zhuǎn)化為多個(gè)格式并且在代碼中引入，如果瀏覽器不識別第一種格式，換成連接第二種格式
字體要改格式，不能直接改后綴名。
字體轉(zhuǎn)換網(wǎng)站：在線字體轉(zhuǎn)換,字體格式轉(zhuǎn)換器|ttf轉(zhuǎn)otf,ttf轉(zhuǎn)woff,ttf轉(zhuǎn)woff2,ttf轉(zhuǎn)eot,ttf轉(zhuǎn)svg,otf轉(zhuǎn)ttf,otf轉(zhuǎn)woff,otf轉(zhuǎn)woff2,otf轉(zhuǎn)eot,otf轉(zhuǎn)svg,woff轉(zhuǎn)ttf,woff轉(zhuǎn)otf,woff轉(zhuǎn)woff2,woff2轉(zhuǎn)ttf,woff2轉(zhuǎn)otf,woff2轉(zhuǎn)woff,dfont轉(zhuǎn)ttf,dfont轉(zhuǎn)otf,pfa轉(zhuǎn)ttf,pfa轉(zhuǎn)otf,pfb轉(zhuǎn)ttf,pfb轉(zhuǎn)otf - 在線工具 - 字客網(wǎng)
9.1 字體圖標(biāo)
我們可以去阿里巴巴矢量圖標(biāo)庫進(jìn)行下載或者引用：
阿里巴巴矢量圖標(biāo)庫https://www.iconfont.cn/
使用步驟：
百度iconfont,找到阿里巴巴矢量圖標(biāo)庫官網(wǎng),然后注冊登錄,或者用github登錄也行,此步驟跳過
找到圖標(biāo)管理->我的項(xiàng)目->然后新建項(xiàng)目
?右邊點(diǎn)擊新建項(xiàng)目,用于保存自己常用的圖標(biāo)：
項(xiàng)目新建完成后,往項(xiàng)目里添加我們要想使用的圖標(biāo),找到圖標(biāo)庫,搜索一個(gè)想要的圖標(biāo),然后添加到購物車即可
?添加到購物車完成后,點(diǎn)擊右上角的購物車圖標(biāo),選擇添加至項(xiàng)目,選擇我們剛剛創(chuàng)建的項(xiàng)目,確定
接下來將打包好的字體文件下載到本地添加到你的項(xiàng)目中,在項(xiàng)目中引用文件中的iconfont.css文件
最后一步,在項(xiàng)目中使用字體圖標(biāo),這個(gè)其實(shí)很簡單,創(chuàng)建一個(gè)i標(biāo)簽或者span標(biāo)簽,添加兩個(gè)類名,一個(gè)固定的是iconfont,另一個(gè)是你想要的那個(gè)圖標(biāo)對應(yīng)的類名:?
?以上就是如何尋找字體圖標(biāo)以及下載到本地并使用
除此之外還可以在線引用，這樣就不用再去下載啦
使用方式如下：
案例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入阿里巴巴字體圖標(biāo)庫 --><!-- <link rel="stylesheet" href="css/iconfont.css"> --><!-- 引入fontawesome字體圖標(biāo)庫 --><link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"><style>* {margin: 0;padding: 0;}@font-face {font-family: myfont;src: url("./fonts/徐靜蕾字體.fon"),url("./fonts/徐靜蕾字體.woff");}.container {height: 70px;line-height: 70px;width: 100%;background-color: #000;overflow: hidden;}.logo {float: left;}.icons {float: right;}.container .logo img {margin-top: 1px;}.icons a {text-decoration: none;color: #928d88;font-family: myfont;}.icons ul {overflow: hidden;}.icons ul li {float: left;padding: 0 20px;}.icons ul li:hover a {color: #f40;}.icons li i {color: #928d88;padding-right: 2px;}.p-font {font-family: myfont; }</style> </head> <body><div class="container"><div class="logo"><img src="images/logo.png" alt=""></div><div class="icons"><ul><li><i class="fa fa-pencil-square-o"></i><a href="">在線編輯器</a></li><li><i class="fa fa-code"></i><a href="">在線代碼</a></li><li><i class="fa fa-balance-scale"></i><a href="">文本比較</a></li><li><i class="fa fa-download"></i><a href="">jQuery下載</a></li><li><i class="fa fa-ship"></i><a href="">前端庫</a></li><li><i class="fa fa-file-text-o"></i><a href="">在線手冊</a></li><li><i class="fa fa-user"></i><a href="">登錄/注冊</a></li></ul></div></div><!-- 阿里巴巴字體圖標(biāo)庫 --><!-- <p><i class="iconfont icon-cart"></i></p> --><!-- fontawesome字體圖標(biāo)庫 --><!-- <p><i class="fa fa-heart fa-5x" aria-hidden="true"></i></p> --> </body> </html>十、標(biāo)簽的分類及相互轉(zhuǎn)換(display)
10.1 行級標(biāo)簽
特點(diǎn)：
-
不支持寬，高的設(shè)置，寬和高由內(nèi)容來決定
-
可以在同行顯示，除非寬度不夠才換行
-
對margin僅設(shè)置左右方向有效，上下無效；padding設(shè)置上下左右都有效，即會撐大空間
例如：a、span、label、em、strong、i 一般文本標(biāo)簽都是行標(biāo)簽
10.2 塊級標(biāo)簽
特點(diǎn)
-
支持寬和高
-
默認(rèn)時(shí)獨(dú)占一行，后面的標(biāo)簽被擠壓換行
-
margin和padding的上下左右均對其有效
例如：table、tr、p、div、ul、ol、li、h1-h6 div是我們用得最多的
10.3 行內(nèi)塊級標(biāo)簽
行內(nèi)塊狀元素綜合了行內(nèi)元素和塊狀元素的特性，但是各有取舍。因此行內(nèi)塊狀元素在日常的使用中，由于其特性，使用的次數(shù)也比較多。
特點(diǎn)：
-
支持寬和高
-
可以在同行顯示，除非寬度不夠才換行 默認(rèn)有5px間距
-
margin和padding的上下左右均對其有效
例如：input、img、button、select、textarea、td
10.4 標(biāo)簽之間的相互轉(zhuǎn)換
display設(shè)置標(biāo)簽應(yīng)該生成的框的類型：
-
inline轉(zhuǎn)換為行內(nèi)元素
-
block轉(zhuǎn)換為塊狀元素
-
inline-block轉(zhuǎn)換為行內(nèi)塊狀元素
-
none隱藏元素
display:none;和visibility:hidden;區(qū)別：
display:none;：隱藏元素，原來空間不再占用
visibility:hidden;：隱藏元素，原來空間還占用
注意：
- 當(dāng)兩個(gè)元素均設(shè)置為display:inline-block后，會改變兩個(gè)元素的基線位置，所有使用display:inline-block來設(shè)置div布局會導(dǎo)致錯(cuò)位現(xiàn)象。解決方法：同時(shí)給兩個(gè)div設(shè)置中線對齊 vertical-align: middle; 即可。
?
- 將一個(gè)元素變?yōu)?inline-block 后，會出現(xiàn)中間有一條間隙的問題
這里可以將其想象成一個(gè)文字，左邊是一個(gè)文字、右邊是一個(gè)文字，那么文字與文字之間它是有間隙的，這個(gè)間隙同樣也就出現(xiàn)在了 inline-block 上面，如何解決呢？將父元素的 font-size大小設(shè)置為0，子元素的font-size單獨(dú)設(shè)置
?當(dāng)然還有其他的解決方法，比如子元素與子元素之間不換行，也就是在一行寫或者是在子元素與子元素?fù)Q之間利用注釋
?
?
?
總結(jié)
以上是生活随笔為你收集整理的css--DIV+CSS布局、常用属性、盒模型、自定义字体、标签的分类及相互转换的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机专业徐向东教授,计算机虹膜识别系统
- 下一篇： Type 3 fonts error f