1 字体图标的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./zy.css">
</head>
<body>
    <div class="A">
    <span class="iconfont icon-Chart"></span>
    <!-- 引用字体图标的代码 <span class="iconfont icon-图标名"></span> -->
    </div>
    <span class="iconfont icon-Loop"></span>
</body>
</html>

zy.css

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

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

布局原则
遵守从左到右，从上往下的布局原则
元素默认的排列方式
html中的元素默认在浏览器中按照文档流的顺序排列，且排列顺序与html的书写顺序一致（写在前面的显示在前面）
水平排列的是内联元素垂直排列的是块元素
元素的类型
内联元素
任何元素默认的就是内联元素：display:inline

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

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

width 宽度
height 高度
border 边框
padding 内边距
margin 外边距

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            height: 150px;
            width: 150px;
            background-color: bisque;
            /* 让背景色不覆盖到内边距 */
            background-clip: content-box;
           /* border边框 的值 有solid 实线  dashed 虚线 */
            border:5px dashed red;
            /* 可以通过添加内边框，让内容与边框之间可以呼吸 */
            padding: 10px;
            /* 外边距 */
            margin: 15px;
        }
        /* 为了简化布局，计算方便，我们通常直观的认为盒子的width,height应该就是盒子的最终大小 */
      .box{
           /*border-box width/height = padding +border+ width/height */
          box-sizing: border-box;
          /* content-box:width/height=width/height 默认值 */
            /* box-sizing: content-box;  */
      }
      /* box-sizing: border-box; 计算盒子大小时，将内边距与边框全部计算在内，
      所以，width,height就是最终大小，从而简化布局 */
       /* 实现所有元素样式的初始化 */
      *{
          padding: 0;
          margin: 0;
          box-sizing: border-box;
      }
        /* 盒模型常用属性
        1. width
        2. height
        3. border
        4. padding
        5. margin */
        /* box-sizing:改变盒子大小的计算方式 */
    </style>
</head>
<body>
    <div class="box">
    </div>
    <div class="box">
    </div>
</body>
</html>

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

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

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

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

0629作业

2021-07-14 21:25:59