字体图标盒子布局

字体图标引入

-. 阿里图标网站 www.iconfont.cn

• 字体图标其实是字体可以按文本方式设置样式

<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>

强制盒子大小(不受其他因素影响)

• box-sizing: border-box;
• 此时 width 和 heigth 设置的大小 ,就是最终的大小,所有(比如 border 的宽度以及 padding 的值都会向盒子内部扩展,不向外部扩展.此时内容区会变小)

边框 border

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

1. border-top: 1px solid #000;; (单独设置每条边框的属性,此为简化写法)
2. border-top-style:solid ;(上边框样式为实线)
3. border-right-width:200px ;(右边框宽度为 200px)
4. border-bottom-color: red;(下边框颜色为红色)

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

• border: 10px solid chartreuse;(边框大小,粗细,颜色)

  1. none 无
  2. hidden 隐藏
  3. dotted 圆点虚线
  4. dashed 横线虚线
  5. solid 实线
  6. double 双实线
  7. groove：根据 color 值，显示 3D 凹槽边框
  8. ridge：根据 color 值，显示 3D 凸槽边框
  9. inset：根据 color 值，显示 3D 凹边边框
  10. outset：根据 color 值，显示 3D 凸边边框

• background-clip: content-box;(边框背景裁剪,边框不覆盖背景颜色)

• border-top-left-radius: 10px;(radius 为圆角边框; 此为左上角为圆角 10px)

内边距 padding

• 内边距

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

1. 四值语法: 设置分别为:上,右,下,左分别设置
2. 三值语法: 中间值表示左右;两边值表示上下(上:20,右 15,下 10,左 15)
3. 双值语法: 第一个为上下,第二个值为左右
4. 单值语法: 设上,右,下,左均为 20px

简化通用方案

• 样式重置的简化方案

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

常用单位

• px,em,rem, vh, vw

• 绝对单位 px

• 相对单位

1. em : em = 当前或父级的字号倍数; 1em = 1 倍的 font-size 的大小 (浏览器的默认大小=16px)
2. rem: rem = 永远和 html 的 font-size 的字号绑定
3. vw: 将视口分成 100 分 一个 vw = 1/100
4. vh: 将视口分成 100 分 一个 vh = 1/100