當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

css--DIV+CSS布局、常用属性、盒模型、自定义字体、标签的分类及相互转换

發布時間：2024/3/26 CSS 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 css--DIV+CSS布局、常用属性、盒模型、自定义字体、标签的分类及相互转换小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、DIV+CSS布局

1.1 布局時常用的屬性

1.2 布局 - 上中下結構

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 文本大小寫轉換

4.4 控制文本縮進

4.5 文本對齊方式

五、列表屬性

5.1 設置所有列表屬性

5.2 設置項目符號類型

5.3 設置項目符號為圖片

5.4 設置項目符號的位置

六、表格屬性?

6.1 表格邊框

6.2 折疊邊框

6.3 表格寬度和高度

6.4 表格文字對齊

6.5 表格填充

6.6 表格顏色

6.7 邊框之間的距離以及背景屬性

七、其他屬性

7.1 overflow屬性

7.2 字符間距、行高、元素透明度

八、盒模型

8.1 初識盒模型

8.2 content 內容區域

8.3 padding 內邊距

8.4 border 邊框屬性

8.5 margin 外邊距屬性

8.6 怪異（IE）盒模型

8.7 彈性盒模型

九、自定義字體

9.1 字體圖標

十、標簽的分類及相互轉換

10.1 行級標簽

10.2 塊級標簽

10.3 行內塊級標簽

10.4 標簽之間的相互轉換

一、DIV+CSS布局

?優點：

符合W3C標準
使頁面載入得更快
保持視覺的一致性
修改設計時更有效率
搜索引擎友好

1.1 布局時常用的屬性

屬性	描述
width	寬度
height	高度
background-color	背景顏色
float	浮動（div不再獨占一行，左右擺放）

1.2 布局 - 上中下結構

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? 圣杯布局和雙飛翼布局

作用：解決的問題是相同的，兩邊定寬、中間自適應的三欄布局，其中中間欄要放在文檔流前面以優先渲染，一般用于PC端

圣杯布局：

優點：無需添加dom節點

缺點：正常情況下是沒有問題的，但是特殊情況下就會暴露此方案的弊端，如果將瀏覽器無線放大時，「圣杯」將會「破碎」掉

<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：設置文本的顏色

關于字體顏色通常有四種表現形式，下面分別介紹一下：

a.關鍵詞：例如：red、blue、skyblue等

b.十六進制：例如：#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 設置為比父元素更小的尺寸
larger	把 font-size 設置為比父元素更大的尺寸
length	把 font-size 設置為一個固定的值，例如：font-size:18px;
%	把 font-size 設置為基于父元素的一個百分比值，例如：font-size:200%;
inherit	規定應該從父元素繼承字體尺

2.3 字體加粗

font-weight

2.4 字體樣式

font-style

值描述

normal	默認值。瀏覽器顯示一個標準的字體樣式
italic	瀏覽器會顯示一個斜體的字體樣式
oblique	瀏覽器會顯示一個傾斜的字體樣式
inherit	規定應該從父元素繼承字體樣式

2.5 字體類型

font-family：指定一個元素的字體

font-family:"Microsoft YaHei","Simsun","SimHei";

三、背景屬性

背景屬性主要有以下幾個：

屬性	描述
background-color	設置背景顏色
background-image	設置背景圖片
background-attachment	設置背景圖片是隨內容滾動還是固定
background-position	設置背景圖片顯示位置
background-repeat	設置背景圖片如何填充
background-size	設置背景圖片大小
background	復合屬性

簡寫：background

3.1 背景顏色

background-color

值描述

color	指定背景顏色
transparent	指定背景顏色應該是透明的。這是默認
inherit	指定背景顏色，應該從父元素繼承

3.2 背景圖片

background-image

元素的背景是元素的總大小，包括填充和邊界（但不包括邊距）。

默認情況下，background-image放置在元素的左上角，并重復垂直和水平方向。

屬性值：

值說明

url('URL')	圖像的URL
none	無圖像背景會顯示。這是默認
linear-gradient()	創建一個線性漸變的 "圖像"(從上到下)
radial-gradient()	用徑向漸變創建 "圖像"。 (center to edges)
repeating-linear-gradient()	創建重復的線性漸變 "圖像"。
repeating-radial-gradient()	創建重復的徑向漸變 "圖像"
inherit	指定背景圖像應該從父元素繼承

3.3 背景圖片是否平鋪

background-repeat

默認情況下，重復background-image的垂直和水平方向

background-position屬性設置背景圖像位置。如果指定的位置是沒有任何背景，圖像總是放在元素的左上角

屬性值：

值說明

repeat	背景圖像將向垂直和水平方向重復。這是默認
repeat-x	只有水平位置會重復背景圖像
repeat-y	只有垂直位置會重復背景圖像
no-repeat	background-image不會重復
inherit	指定background-repea屬性設置應該從父元素繼承

3.4 背景圖片大小

background-size

屬性值：

值描述

length	設置背景圖片高度和寬度。第一個值設置寬度，第二個值設置的高度。如果只給出一個值，第二個是設置為 auto(自動)
percentage	將計算相對于背景定位區域的百分比。第一個值設置寬度，第二個值設置的高度。如果只給出一個值，第二個是設置為"auto(自動)"
cover	此時會保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區域的最小大小。
contain	此時會保持圖像的縱橫比并將圖像縮放成將適合背景定位區域的最大大小。

3.5 背景定位

baground-position

設置背景圖像的起始位置

注意：對于這個工作在Firefox和Opera，background-attachment必須設置為 "fixed（固定）".

屬性值：

值	說明
let top	左上角
let center	左中
let bottom	左下
right top	右上角
right center	右中
right bottom	右下
center top	中上
center center	中種
center bottom	中下
x% y%	第一個值是水平位置，第二個值是垂直。左上角是0％0％。右下角是100％100％。如果僅指定了一個值，其他值將是50％。。默認值為：0％0％
xpos ypos	第一個值是水平位置，第二個值是垂直。左上角是0。單位可以是像素（0px0px）或任何其他 css單位。如果僅指定了一個值，其他值將是50％。你可以混合使用％和positions
inherit	指定background-position屬性設置應該從父元素繼承

注意：如果僅指定一個關鍵字，其他值將會是"center"

3.6 背景是否固定

background-attchment

設置背景圖像是否固定或者隨著頁面的其余部分滾動

屬性值

值描述

scroll	背景圖片隨著頁面的滾動而滾動，這是默認的
fixed	背景圖片不會隨著頁面的滾動而滾動
local	背景圖片會隨著元素內容的滾動而滾動
initial	設置該屬性的默認值
inherit	指定 background-attachment 的設置應該從父元素繼承

四、文本屬性

4.1 文本水平對齊方式

text-algin：指定元素文本的水平對齊方式

屬性值

值描述

left	把文本排列到左邊。默認值：由瀏覽器決定
right	把文本排列到右邊
center	把文本排列到中間
justify	實現兩端對齊文本效果
inherit	規定應該從父元素繼承 text-align 屬性的值

4.2 文本裝飾

text-decoration：規定添加到文本的修飾，下劃線、上劃線、刪除線等

text-decoration 屬性是以下三種屬性的簡寫：

text-decoration-line

text-decoration-color

text-decpratiooon-style

語法：

/*關鍵值*/ text-decoration: none; /*沒有文本裝飾*/ text-decoration: underline red; /*紅色下劃線*/ text-decoration: underline wavy red; /*紅色波浪形下劃線*//*全局值*/ text-decoration: inherit; text-decoration: initial; text-decoration: unset;

屬性值

值描述

none	默認。定義標準的文本
underline	定義文本下的一條線
overline	定義文本上的一條線
line-through	定義穿過文本下的一條線
blink	定義閃爍的文本
inherit	規定應該從父元素繼承 text-decoration 屬性的值

4.3 文本大小寫轉換

text-transform：設置文本大小寫

屬性值

值描述

none	默認。定義帶有小寫字母和大寫字母的標準的文本
capitalize	文本中的每個單詞以大寫字母開頭
uppercase	定義僅有大寫字母
lowercase	定義無大寫字母，僅有小寫字母
inherit	規定應該從父元素繼承 text-transform 屬性的值

4.4 控制文本縮進

text-indent：規定文本塊中首行文本的縮進

屬性值

值描述

length	定義固定的縮進。默認值：0
%	定義基于父元素寬度的百分比的縮進
inherit	規定應該從父元素繼承 text-indent 屬性的值

注意：負值是允許的。如果值是負數，將第一行左縮進

4.5 文本對齊方式

text-justify：指定文本對齊設置為"justify"的理據，此屬性指定應怎樣對齊文本以及對齊間距

屬性值：

值描述

auto	瀏覽器決定齊行算法
none	禁用齊行
inter-word	增加/減少單詞間的間隔
inter-ideograph	用表意文本來排齊內容
inter-cluster	只對不包含內部單詞間隔的內容（比如亞洲語系）進行排齊
distribute	類似報紙版面，除了在東亞語系中最后一行是不齊行的
kashida	通過拉伸字符來排齊內容

五、列表屬性

5.1 設置所有列表屬性

list-style：在一個聲明中設置所有的列表屬性

屬性值

值描述

list-style-type	設置列表項標記的類型
list-style-position	設置在何處放置列表項標記
list-style-image	使用圖像來替換列表項的標記
initial	將這個屬性設置為默認值
inherit	規定應該從父元素繼承 list-style 屬性的值

5.2 設置項目符號類型

list-style-type：

屬性值：

值	描述
none	默認值
disc	空心圓
circle	實心圓
squer	實心正方形

5.3 設置項目符號為圖片

list-style-image

屬性值

值描述

URL	圖像的路徑
none	默認。無圖形被顯示
inherit	規定應該從父元素繼承 list-style-image 屬性的值

5.4 設置項目符號的位置

list-style-position

屬性值

值描述

inside	列表項目標記放置在文本以內，且環繞文本根據標記對齊
outside	默認值。保持標記位于文本的左側。列表項目標記放置在文本以外，且環繞文本不根據標記對齊
inherit	規定應該從父元素繼承 list-style-position 屬性的值

六、表格屬性?

6.1 表格邊框

border

table, td {border: 1px solid black; }

6.2 折疊邊框

border-collapse：屬性設置表格的邊框是否被折疊成一個單一的邊框或隔開

table { border-collapse:collapse; }

6.3 表格寬度和高度

width 和 height 屬性定義表格的寬度和高度

table { width:100%; } td { height:50px; }

6.4 表格文字對齊

表格中的文本對齊和垂直對齊屬性

text-align 屬性設置水平對齊方式，向左，右，或中心 left|center|right

td { text-align:right; }

垂直對齊屬性設置垂直對齊 middle|top|bottom

td { height:50px; vertical-align:bottom;

6.5 表格填充

如果在表的內容中控制空格之間的邊框，應使用 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	默認值。內容不會被修剪，會呈現在元素框之外
hidden	內容會被修剪，并且其余內容是不可見的
scroll	內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容
auto	如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容
inherit	規定應該從父元素繼承 overflow 屬性的值

七、其他屬性

屬性	值
width	元素的寬度（只包含內容的寬度）
height	元素的高度（只包含內容的高度）
min-width	最小寬度
max-width	最大寬度
min-height	最小高度
max-height	最大高度

7.1 overflow屬性

指定如果內容溢出一個元素的框，會發生什么

屬性值

一行文字溢出，省略號顯示：

7.2 字符間距、行高、元素透明度

設置字符之間的距離：letter-spacing
?
???
???
? 設置行高 line-height
?
?
? 設置元素透明度 opacity
?

white-space 屬性指定元素內的空白怎樣處理

verticle-align 設置一個元素的垂直對齊方式

該屬性定義行內元素的基線相對于該元素所在行的基線的垂直對齊

?關于更多的屬性，請參考：菜鳥教程

八、盒模型

8.1 初識盒模型

所有 HTML 元素可以看作盒子，在 CSS 中， "box model" 這一術語是用來設計和布局時使用 CSS 盒模型本質上是一個盒子，封裝周圍的 HTML 元素，它包括：外邊距（ margin ），邊框（ border ），內邊距（ padding ），和實際內容（ content ）

盒模型由：content+padding+border+margin組成，分別表示其內容區域、內邊距、邊框以及外邊距

這個其實可以這樣理解，比如一個裝有玻璃杯的快遞盒子，那么里面的玻璃杯就對應content、玻璃杯周圍的泡沫就對應padding、快遞盒子就對應border、快遞盒子之間的距離就相當于margin這樣就很容易理解了，自然就將抽象的事物具體化了。

8.2 content 內容區域

?W3C 盒子模型 ( 標準盒模型 )：

?Content 內容區域包含寬度（ width ）和高度（ height ）兩個屬性塊級元素默認寬度為100% ，行內元素默認寬度是由內容撐開，不管塊級元素還是行內元素，默認高度都是由內容撐開塊級元素可以設置寬高屬性，行內元素設置寬高屬性不生效寬度（ width ）和高度（ height ）可以取值為像素（ px ）和百分比（ % ）

注意：

塊級元素默認寬度為100%，行內元素默認寬度由內容撐開
行內元素和塊級元素的默認高度都由內容撐開
塊級元素可以設置寬高，行內元素設置寬高不生效
寬度設置百分比生效
高度設置百分比不生效，一般設置px

8.3 padding 內邊距

屬性

說明

padding	使用簡寫屬性設置在一個聲明中的所有填充屬性。簡寫屬性
padding-bottom	設置元素的底部填充
padding-left	設置元素的左部填充
padding-right	設置元素的右部填充
padding-top	設置元素的頂部填充

注意：

padding:value;? 四周

padding:value value;? 上下左右

padding:value value value;? 上左右下

padding:value value value value;? 上右下左

padding 會撐大容器

可能的值：

像素：px

百分比：%

當簡寫屬性和單個屬性同時存在，單個屬性要寫在簡寫屬性的后面

8.4 border 邊框屬性

a.border-style 定義邊框的樣式

屬性	值
none	默認無邊框
dotted	定義一個點線邊框
dashed	定義一個虛線邊框
solid	定義一個實線邊框
double	定義兩個邊框。兩個邊框的寬度和border-width的值相同
groove	定義3D溝槽邊框。效果取決于邊框的顏色值
ridge	定義3D脊邊框。效果取決于邊框的顏色值
inset	定義一個3D的嵌入邊框。效果取決于邊框的顏色值
outset	定義一個3D的突出邊框。效果取決于邊框的顏色值

border-style 屬性可以有 1-4 個值：

b.border-width 定義邊框寬度

為邊框指定寬度有兩種方法：

可以指定長度值，比如 2px 或 0.1em(單位為 px, pt, cm, em 等）

使用 3 個關鍵字之一，它們分別是 thick 、medium（默認值）和 thin。

注意：

CSS 沒有定義 3 個關鍵字的具體寬度，所以一個用戶可能把 thick 、medium 和 thin 分別設置為等于 5px、3px 和 2px，而另一個用戶則分別設置為 3px、2px 和 1px。

c.border-color? 設置邊框的顏色

name - 指定顏色的名稱，如 "red"

RGB - 指定 RGB 值, 如 "rgb(255,0,0)"

Hex - 指定16進制值, 如 "#ff0000"

值

說明

auto

設置瀏覽器邊距。

這樣做的結果會依賴于瀏覽器

length

定義一個固定的margin（使用像素，pt，em等）

定義一個使用百分比的邊距

還可以設置邊框的顏色為"transparent"即透明，這在制作一些特殊的圖形中會很常見

注意： border-color單獨使用是不起作用的，必須得先使用border-style來設置邊框樣式。

d.邊框-單獨設置各邊

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;

注意：
- 如果顏色默認不寫，顯示黑色，瀏覽器渲染
- 至少需要寫兩個值：寬度和類型
- 兩條邊框相接區域斜均分（按照對角線的區域均分）
  - 可以繪制一個三角形
  - 四條邊框，設置寬高都為0
  - 其中三條邊顏色透明 transparent

練習：

<!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 外邊距屬性

清除周圍的（外邊框）元素區域

沒有背景顏色，是完全透明的。

margin 可以單獨改變元素的上，下，左，右邊距，也可以一次改變所有的屬性。

簡寫屬性：

margin:value;? 四周

margin:value value;? 上下左右

margin:value value value;? 上左右下

margin:value value value value;? 上下左右

單個屬性：

margin-top:;? 上外邊距

margin-right:;? 右外邊距

margin-left:;? 左外邊距

margin-bttoom:;? 下外邊距

負值問題：

margin可以設置負值
margin-top和margin-left負值，元素向上、向左移動
margin-right負值，右側元素左移，自身不受影響
margin-bottom負值，下方元素上移，自身不受影響

垂直問題（兄弟關系）：

垂直方向上外邊距合并時，取較大值
空白內容也會重疊(被忽略)
解決方案：將相鄰的兩個盒子中的一個盒子放在一個新的BFC區域里，(設置overflow:hidden)就可以解決margin重疊的問題

margin-top傳遞性（盒子和盒子之間是父與子關系）：

盒子和盒子之間是父子關系，整個margin的屬性只有margin-top會有傳遞性，子元素找不到父元素的邊界（參考位置），將這個margin-top屬性會傳遞給父元素

解決方案：

父元素設置border，會改變父元素盒子的大小， border：1px solid transparent;（不推薦）

父元素設置padding，也會改變父元素盒子的大小，padding可以作為margin-top的參考（不推薦）

父元素設置overflow:hidden，產生BFC容器，這個容器內所有內容有自己的排列規范，不會影響盒子外面的元素

子元素盒子width默認不設置和設置100%的區別：

默認不設置，auto自適應，在父元素區域里面自適應，盒子大小計算方式為：
- 子盒子的大小=內容區域+padding * 2+border * 2
- 子盒子所占空間的大小=大盒子的寬度

100%是參考父元素的寬度，折算下來內容區域是固定值，盒子大小計算方式為：
- 子盒子的真正大小=父盒子的width值為大小+子盒子padding *2+border *2；
- 子盒子所占空間的大小：子盒子的真正大小+margin

8.6 怪異（IE）盒模型

在該模式下，瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和；即在怪異模式下的盒模型，盒子的（ content ）寬度 + 內邊距 padding+ 邊框 border 寬度 = 我們設置的 width(height 也是如此 ) ，盒子總寬度 / 高度 =width/height + margin?

盒模型轉換：box-sizing

box - sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素

box - sizing: content - box ; 寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和邊框

box - sizing: border - box ; 為元素設定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度

即 box - sizing 屬性可以指定盒子模型種類， content-box 指定盒子模型為 W3C （標準盒模型）， border-box 為怪異盒模型

8.7 彈性盒模型

定義：

彈性盒子是 CSS3 的一種新的布局模式

CSS3 彈性盒是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式

引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間?

CSS3 彈性盒內容：

彈性盒子由彈性容器 (Flex container) 和彈性子元素 (Flex item) 組成

彈性容器通過設置 display 屬性的值為 flex 將其定義為彈性容器

彈性容器內包含了一個或多個彈性子元素

溫馨提示：

彈性容器外及彈性子元素內是正常渲染的

彈性盒子只定義了彈性子元素如何在彈性容器內布局

父元素上的屬性：

display:flex; 開啟彈性盒，屬性設置后子元素默認水平排列

flex-direction;? 指定彈性子元素在父容器中的位置

flex-direction: row | row-reverse | column | column-reverse

justify-content; 把彈性項沿著彈性容器的主軸線（ main axis ）對齊

justify-content: flex-start | flex-end | center | space-between | space-around

?align-items; 設置或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式

子元素上的屬性：

flex-grow 根據彈性盒子元素所設置的擴展因子作為比率來分配剩余空間

默認為 0，即如果存在剩余空間，也不放大

如果只有一個子元素設置，那么按擴展因子轉化的百分比對其分配剩余空間。 0.1 即 10% ，1 即 100% ，超出按 100%

????????

九、自定義字體

CSS3提供的一個技術，你可以把當前這個項目要用到的字體下載到本地，在代碼中引入你本地的字體，以后項目部署到服務器，將字題也一起補上，瀏覽器加載的時候，用你提供好的字體。

/* 一個font-face只能有一種字體但是，你可以是一個字體多種格式。一張圖片 png jpg瀏覽器對字體兼容性不一樣。 */ @font-face {/*myfont ：自定義的名字*/font-family: myfont;src: /*選擇自己下載的字體及路徑*/url("files/徐靜蕾字體.fon"),url("files//徐靜蕾字體.woff") } .op{/*使用自定義的字體，通過名字調用*/font-family: myfont; }

為了考慮各個瀏覽器對字體的支持，我們可以將一個字體轉化為多個格式并且在代碼中引入，如果瀏覽器不識別第一種格式，換成連接第二種格式

字體要改格式，不能直接改后綴名。

字體轉換網站：在線字體轉換,字體格式轉換器|ttf轉otf,ttf轉woff,ttf轉woff2,ttf轉eot,ttf轉svg,otf轉ttf,otf轉woff,otf轉woff2,otf轉eot,otf轉svg,woff轉ttf,woff轉otf,woff轉woff2,woff2轉ttf,woff2轉otf,woff2轉woff,dfont轉ttf,dfont轉otf,pfa轉ttf,pfa轉otf,pfb轉ttf,pfb轉otf - 在線工具 - 字客網

9.1 字體圖標

我們可以去阿里巴巴矢量圖標庫進行下載或者引用：

阿里巴巴矢量圖標庫https://www.iconfont.cn/

使用步驟：

百度iconfont,找到阿里巴巴矢量圖標庫官網,然后注冊登錄,或者用github登錄也行,此步驟跳過

找到圖標管理->我的項目->然后新建項目

?右邊點擊新建項目,用于保存自己常用的圖標：

項目新建完成后,往項目里添加我們要想使用的圖標,找到圖標庫,搜索一個想要的圖標,然后添加到購物車即可

?添加到購物車完成后,點擊右上角的購物車圖標,選擇添加至項目,選擇我們剛剛創建的項目,確定

接下來將打包好的字體文件下載到本地添加到你的項目中,在項目中引用文件中的iconfont.css文件

最后一步,在項目中使用字體圖標,這個其實很簡單,創建一個i標簽或者span標簽,添加兩個類名,一個固定的是iconfont,另一個是你想要的那個圖標對應的類名:?

?以上就是如何尋找字體圖標以及下載到本地并使用

除此之外還可以在線引用，這樣就不用再去下載啦

使用方式如下：

案例：

<!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><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> </body> </html>

十、標簽的分類及相互轉換(display)

10.1 行級標簽

特點：

不支持寬，高的設置，寬和高由內容來決定
可以在同行顯示，除非寬度不夠才換行
對margin僅設置左右方向有效，上下無效；padding設置上下左右都有效，即會撐大空間

例如：a、span、label、em、strong、i 一般文本標簽都是行標簽

10.2 塊級標簽

特點

支持寬和高
默認時獨占一行，后面的標簽被擠壓換行
margin和padding的上下左右均對其有效

例如：table、tr、p、div、ul、ol、li、h1-h6 div是我們用得最多的

10.3 行內塊級標簽

行內塊狀元素綜合了行內元素和塊狀元素的特性，但是各有取舍。因此行內塊狀元素在日常的使用中，由于其特性，使用的次數也比較多。

特點：

支持寬和高
可以在同行顯示，除非寬度不夠才換行默認有5px間距
margin和padding的上下左右均對其有效

例如：input、img、button、select、textarea、td

10.4 標簽之間的相互轉換

display設置標簽應該生成的框的類型：

inline轉換為行內元素
block轉換為塊狀元素
inline-block轉換為行內塊狀元素
none隱藏元素

display:none;和visibility:hidden;區別：

display:none;：隱藏元素，原來空間不再占用

visibility:hidden;：隱藏元素，原來空間還占用

注意：

當兩個元素均設置為display:inline-block后，會改變兩個元素的基線位置，所有使用display:inline-block來設置div布局會導致錯位現象。解決方法：同時給兩個div設置中線對齊 vertical-align: middle; 即可。

將一個元素變為 inline-block 后，會出現中間有一條間隙的問題

這里可以將其想象成一個文字，左邊是一個文字、右邊是一個文字，那么文字與文字之間它是有間隙的，這個間隙同樣也就出現在了 inline-block 上面，如何解決呢？將父元素的 font-size大小設置為0，子元素的font-size單獨設置

?當然還有其他的解決方法，比如子元素與子元素之間不換行，也就是在一行寫或者是在子元素與子元素換之間利用注釋

總結

以上是生活随笔為你收集整理的css--DIV+CSS布局、常用属性、盒模型、自定义字体、标签的分类及相互转换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：计算机专业徐向东教授,计算机虹膜识别系统
下一篇： Type 3 fonts error f