收藏
PHPz批改狀態(tài)：合格
老師批語：
首先從圖標庫將素材下載，然后從文件夾內找到demo_index.html文件，并在瀏覽器中打開，根據使用規(guī)則，通過font-class對應的引導用class的方式導入
導入后由于這個圖標是字體圖標，因此所有的字體樣式在圖標上面都可以生效，可以根據需要對圖標的樣式進行微調
<!DOCTYPE html>
<html lang="zh-CN">
<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>字體小圖標</title>
//引入下載好的字體小圖標
<link rel="stylesheet" href="../font_icon/iconfont.css" />
<style>
.icon-user {
/* em n倍字體大小 */
font-size: 3em;
color: hotpink;
}
.icon-xiazai1 {
font-size: 3em;
color: skyblue;
background-color: red;
}
</style>
</head>
<body>
//根據指引通過class的方式引入圖標
<span class="iconfont icon-user">會員</span>
<span class="iconfont icon-xiazai1">購物車</span>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
元素布局
由于瀏覽器是一個二維平面，元素中在瀏覽器里的布局默認都是按文檔流的順序排列，即從左到右從上往下的水平排列跟垂直排列，其中行元素是優(yōu)先從左到右排列，一行占滿后進行換行操作（即再進行垂直排列），但是塊元素就自己獨占一行，相當于默認開頭跟結尾都帶有一個換行，如果需要行元素轉塊元素或塊元素轉行元素，可以使用css樣式中的display來進行轉換。
其中頁面中所有的元素都是一個個可視的矩形塊來進行排列布局的，這一個個的矩形塊類似于盒子，這就是所謂的“盒模型”
盒元素
盒元素的五大常用屬性：
width：
width寬度，定義了盒元素的寬度，具體盒模型的實際寬度取決于box-sizing的計算方式
height
height高度，定義了盒元素的高度，具體盒模型的實際高度取決于box-sizing的計算方式
border
border邊框，定義了盒元素的邊框粗細、形狀及顏色
padding
padding內邊距，定義了盒元素內部距離邊框的距離
margin
margin外邊距，定義了盒元素外部到最外面的邊框或兄弟元素之間的距離
注意事項：1、寬度是受限的，因此寬度是一直有效的，但是高度是不受限的，具體是按照值的高度來展示的，因此高度是無效的
如：
<!DOCTYPE html>
<html lang="zh-CN">
<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>div</title>
<style>
.box {
background-color: hotpink;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>這個將在瀏覽器中沒有任何展示，通過檢查得知因為沒有任何內容，所以只有寬度沒有高度。
2、塊元素默認獨占一行，如：
<!DOCTYPE html>
<html lang="zh-CN">
<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>margin</title>
<style>
.box {
width: 200px;
height: 200px;
margin: 10px;
padding: 10px;
border: 1px solid red;
background-color: hotpink;
}
</style>
</head>
<body>
<div class="box">塊元素1</div>
<div class="box">塊元素2</div>
</body>
</html>如示例中div元素是一個塊元素，在可視區(qū)域內還留有大量空白，但是會發(fā)現第一個塊元素div右側的margin不止是10px，按1920的顯示來算，右側的margin有1699px，非常浪費空間，這個時候可以改變下display的屬性為：inline-block；調整為行內塊元素，就可以實現下方的div塊元素與上方水平對齊
3、為了讓盒元素的布局能更好的適應各種可視屏幕，可以使用百分比可視區(qū)屏幕寬度單位vw及百分比可視區(qū)屏幕高度vh來定義盒元素的寬高，其中
1vw=1/100可視區(qū)屏幕寬度
1vh=1/100可視區(qū)屏幕高度
除了盒元素的五大常用屬性還需要注意限制寬高計算方式的box-sizing：
box-sizing可以設置box的寬度與高度，其中box-sizing常用的兩個屬性：1、默認情況下的content-box，這個情況下設置的width是不包含padding、border這些屬性的，
如：
<!DOCTYPE html>
<html lang="zh-CN">
<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>盒模型/框模型</title>
</head>
<body>
<div class="box">塊元素1</div>
<div class="box">塊元素2</div>
<style>
.box {
display: inline-block;
height: 260px;
width: 260px;
border: 1px solid red;
background-color: violet;
/* background-clip調整背景色的覆蓋范圍 */
background-clip: content-box;
padding: 20px;
margin: 30px;
box-sizing: content-box;
}
</style>
</body>
</html>即：
width+border+padding=260+1*2+20*2
但是為了簡化布局，計算方便，通暢直觀的認為盒子的width與height應該是盒子的最終大小，即把box-sizing設置為：border-box；：
<!DOCTYPE html>
<html lang="zh-CN">
<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>盒模型/框模型</title>
</head>
<body>
<div class="box">塊元素1</div>
<div class="box">塊元素2</div>
<style>
.box {
display: inline-block;
height: 260px;
width: 260px;
border: 1px solid red;
background-color: violet;
/* background-clip調整背景色的覆蓋范圍 */
background-clip: content-box;
padding: 20px;
margin: 30px;
box-sizing: border-box;
}
/* 實現對所有元素樣式的初始化 */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
</style>
</body>
</html>這樣的情況下：
width+border+padding=260
總寬度就成了260px，能更好的控制盒元素的布局。
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號
