字體圖標(biāo)引入

-. 阿里圖標(biāo)網(wǎng)站 www.iconfont.cn

• 字體圖標(biāo)其實(shí)是字體可以按文本方式設(shè)置樣式

<span class="iconfont icon-bianji"></span>
<span class="iconfont icon_detail_opinion icon-icon_detail_opinion"></span>
<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-Dyanjing"></use>
</svg>
<style>
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
  .iconfont.icon_detail_opinion.icon-icon_detail_opinion {
    font-size: 50px;
    color: rgb(235, 20, 20);
  }
  .iconfont.icon-bianji {
    font-size: 100px;
    color: rgb(235, 20, 20);
  }
</style>

盒子布局

<div class="box"></div>
<style>
  .box {
    width: 200px;
    height: 200px;
    /* border: chartreuse 10px solid; */
    background-color: #999;
    border: 10px dashed springgreen;
    background-clip: content-box;
    padding: 20px;
  }
</style>

強(qiáng)制盒子大小(不受其他因素影響)

• box-sizing: border-box;
• 此時(shí) width 和 heigth 設(shè)置的大小 ,就是最終的大小,所有(比如 border 的寬度以及 padding 的值都會(huì)向盒子內(nèi)部擴(kuò)展,不向外部擴(kuò)展.此時(shí)內(nèi)容區(qū)會(huì)變小)

邊框 border

• width: 200px; (盒子寬度)

1. border-top: 1px solid #000;; (單獨(dú)設(shè)置每條邊框的屬性,此為簡(jiǎn)化寫(xiě)法)
2. border-top-style:solid ;(上邊框樣式為實(shí)線)
3. border-right-width:200px ;(右邊框?qū)挾葹?200px)
4. border-bottom-color: red;(下邊框顏色為紅色)

• height: 200px;(盒子高度)
• background-color: #999;(盒子背景色)

• border: 10px solid chartreuse;(邊框大小,粗細(xì),顏色)

  1. none 無(wú)
  2. hidden 隱藏
  3. dotted 圓點(diǎn)虛線
  4. dashed 橫線虛線
  5. solid 實(shí)線
  6. double 雙實(shí)線
  7. groove：根據(jù) color 值，顯示 3D 凹槽邊框
  8. ridge：根據(jù) color 值，顯示 3D 凸槽邊框
  9. inset：根據(jù) color 值，顯示 3D 凹邊邊框
  10. outset：根據(jù) color 值，顯示 3D 凸邊邊框

• background-clip: content-box;(邊框背景裁剪,邊框不覆蓋背景顏色)

• border-top-left-radius: 10px;(radius 為圓角邊框; 此為左上角為圓角 10px)

內(nèi)邊距 padding

• 內(nèi)邊距

.box {
  padding: 20px 15px 10px 5px;
  padding: 20px 15px 10px;
  padding: 20px 10px;
  padding: 20px;
}

1. 四值語(yǔ)法: 設(shè)置分別為:上,右,下,左分別設(shè)置
2. 三值語(yǔ)法: 中間值表示左右;兩邊值表示上下(上:20,右 15,下 10,左 15)
3. 雙值語(yǔ)法: 第一個(gè)為上下,第二個(gè)值為左右
4. 單值語(yǔ)法: 設(shè)上,右,下,左均為 20px

簡(jiǎn)化通用方案

• 樣式重置的簡(jiǎn)化方案

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

常用單位

• px,em,rem, vh, vw

• 絕對(duì)單位 px

• 相對(duì)單位

1. em : em = 當(dāng)前或父級(jí)的字號(hào)倍數(shù); 1em = 1 倍的 font-size 的大小 (瀏覽器的默認(rèn)大小=16px)
2. rem: rem = 永遠(yuǎn)和 html 的 font-size 的字號(hào)綁定
3. vw: 將視口分成 100 分 一個(gè) vw = 1/100
4. vh: 將視口分成 100 分 一個(gè) vh = 1/100

批改老師：PHPz

批改狀態(tài)：合格

老師批語(yǔ)：