search

博客列表 >字体图标的用法 盒模型的演示 box-sizing的用法

字体图标的用法 盒模型的演示 box-sizing的用法

Giesen?
Giesen?原创
2021年07月18日 21:42:41492浏览

1 字体图标的用法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="./zy.css">
  9. </head>
  10. <body>
  11.     <div class="A">
  12.     <span class="iconfont icon-Chart"></span>
  13.     <!-- 引用字体图标的代码 <span class="iconfont icon-图标名"></span> -->
  14.     </div>
  15.     <span class="iconfont icon-Loop"></span>
  16. </body>
  17. </html>

zy.css

  1. @import url(./font_zy/iconfont.css);
  2. @import url(./font_1/iconfont.css);
  3. @import url(./font_2/iconfont.css);
  4. /* 引用下载好的字体图标文件样式 */
  5. .icon-Loop {
  6.     color: blue;
  7.     font-size: 3em;
  8. }
  9. .icon-Chart{
  10.     color: blue;
  11.     /* 改变图标颜色 */
  12.     font-size: 5em;
  13.     /* 改变图标大小 */
  15. }

2 按自己理解写一下布局的原则与元素的默认排列方式与元素类型?

  1. 布局原则
    遵守从左到右，从上往下的布局原则

  2. 元素默认的排列方式
    html中的元素默认在浏览器中按照文档流的顺序排列，且排列顺序与html的书写顺序一致（写在前面的显示在前面）
    水平排列的是内联元素 垂直排列的是块元素

  3. 元素的类型
    内联元素
    任何元素默认的就是内联元素：display:inline

块级元素：默认就独占一行：display:block

盒模型常用属性有哪些,实例演示;

  1. width 宽度
  2. height 高度
  3. border 边框
  4. padding 内边距
  5. margin 外边距
  1.     <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .box{
  10.             height: 150px;
  11.             width: 150px;
  12.             background-color: bisque;
  13.             /* 让背景色不覆盖到内边距 */
  14.             background-clip: content-box;
  15.            /* border边框 的值 有solid 实线  dashed 虚线 */
  16.             border:5px dashed red;
  17.             /* 可以通过添加内边框，让内容与边框之间可以呼吸 */
  18.             padding: 10px;
  19.             /* 外边距 */
  20.             margin: 15px;
  21.         }
  22.         /* 为了简化布局，计算方便，我们通常直观的认为盒子的width,height应该就是盒子的最终大小 */
  23.       .box{
  24.            /*border-box width/height = padding +border+ width/height */
  25.           box-sizing: border-box;
  26.           /* content-box:width/height=width/height 默认值 */
  27.             /* box-sizing: content-box;  */
  28.       }
  29.       /* box-sizing: border-box; 计算盒子大小时，将内边距与边框全部计算在内，
  30.       所以，width,height就是最终大小，从而简化布局 */
  31.        /* 实现所有元素样式的初始化 */
  32.       *{
  33.           padding: 0;
  34.           margin: 0;
  35.           box-sizing: border-box;
  36.       }
  37.         /* 盒模型常用属性
  38.         1. width
  39.         2. height
  40.         3. border
  41.         4. padding
  42.         5. margin */
  43.         /* box-sizing:改变盒子大小的计算方式 */
  44.     </style>
  45. </head>
  46. <body>
  47.     <div class="box">
  48.     </div>
  49.     <div class="box">
  50.     </div>
  51. </body>
  52. </html>

4. 图示: box-sizing属性的解决了什么问题?

box-sizing:改变盒子大小的计算方式

  • border-box width/height = padding +border+ width/height
    计算盒子大小时，将内边距与边框全部计算在内

  • content-box:width/height=width/height 默认值为content-box
    计算盒子大小时，将内边距与边框不计算在内

上一条：京东秒杀功能HTML源码展示下一条：CSS_0702作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多