html之盒模型，及字体图标的使用

1. 实例演示字体图标的用法

答：下方实例代码

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

答：从左到右，依次排列，块级元素，默认占用一整行，如div

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

答：下方实例代码

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

答：box-sizing属性可固定宽度不往外扩张，常用box-sizing:border-box,无论如何调整，其总大小不会改变

<!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="./font_icon/iconfont.css">
</head>
<body>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        .font-div{
            width: 100px;
            height: 100px;
            padding: 15px;
            text-align: center;
        }
        .box-div{
            width: 300px;
            height: 300px;
            text-align: center;
            padding: 50px;
            margin-left: 50px;
        }
    </style>
    <!-- 字体图标的使用 -->
    <div class="font-div">
        <!-- 1. 引入图标字体<link rel="stylesheet" href="./font_icon/iconfont.css"> -->
        <!-- 2. 根据使用文档只用即可，一般采用class 方式 -->
        <div>
            字体图标
        </div>
        <span class="iconfont icon-huanbaopingtai-biangengguanli"></span>
        <span class="iconfont icon-huanbaopingtai-EHSQshequ"></span>
    </div>
    <!-- 常用盒模型属性 -->
    <div class="box-div">
        <div>盒模型常用属性</div>
        <div>width   宽</div>
        <div>height  高</div>
        <div>padding 内边距</div>
        <div>margin  外边距</div>
    </div>
</body>
</html>

批改老师：

PHPz

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

下载安装VS Code 及常用插件，与个人对Http协议的理解

2021-06-29 10:25:29