博主信息
博文 13
粉丝 0
评论 0
访问量 12457
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
字体图标盒子布局
ianren
原创
709人浏览过

字体图标引入

-. 阿里图标网站 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
批改老师:PHPzPHPz

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学