PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > 字体图标盒子布局

字体图标盒子布局

ianren
ianren 原创
2021年12月28日 11:21:31 450浏览

字体图标引入

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

  • 字体图标其实是字体可以按文本方式设置样式
  1. <span class="iconfont icon-bianji"></span>
  2. <span class="iconfont icon_detail_opinion icon-icon_detail_opinion"></span>
  3. <svg class="icon" aria-hidden="true">
  4. <use xlink:href="#icon-Dyanjing"></use>
  5. </svg>
  6. <style>
  7. .icon {
  8. width: 1em;
  9. height: 1em;
  10. vertical-align: -0.15em;
  11. fill: currentColor;
  12. overflow: hidden;
  13. }
  14. .iconfont.icon_detail_opinion.icon-icon_detail_opinion {
  15. font-size: 50px;
  16. color: rgb(235, 20, 20);
  17. }
  18. .iconfont.icon-bianji {
  19. font-size: 100px;
  20. color: rgb(235, 20, 20);
  21. }
  22. </style>

盒子布局

  1. <div class="box"></div>
  2. <style>
  3. .box {
  4. width: 200px;
  5. height: 200px;
  6. /* border: chartreuse 10px solid; */
  7. background-color: #999;
  8. border: 10px dashed springgreen;
  9. background-clip: content-box;
  10. padding: 20px;
  11. }
  12. </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

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

简化通用方案

  • 样式重置的简化方案
  1. * {
  2. padding: 0;
  3. margin: 0;
  4. box-sizing: border-box;
  5. }

常用单位

  • 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
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议