search

博客列表 >框模型的学习与总结（习惯称谓盒子模型）

框模型的学习与总结（习惯称谓盒子模型）

hg199
hg199原创
2020年04月09日 16:11:07749浏览

html元素是网页框架的最小组成单位

框模型则是每个元素的标准组织结构形式

框模型具体由四个区组成（内容区、内边距区、边框区、外边距区）

1.1、内容区：是网页的具体内容，包括文本、图片、视频等等

1.2、内边距区(padding):是内容区到边框之间的距离

1.3、边框区(border)：是内容区的外壳部份

1.4、外边距区(margin):是元素与元素之间的距离

" class="reference-link">框模型效果图

案例效果http://118.24.239.163/jiemian.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>我的登录界面</title>
  7.     <style>
  8.       body {
  9.         margin: 0;
  10.         background-color: blueviolet;
  11.       }
  12.       .firstt {
  13.         width: auto;
  14.         height: auto;
  15.         background-color: rgb(0, 255, 234);
  16.         border-radius: 15px;
  17.       }
  18.       .firstt {
  19.         position: absolute;
  20.         top: 20%;
  21.         right: 25%;
  22.       }
  23.       h2 {
  24.         margin-top: 26px;
  25.         text-align: center;
  26.       }
  27.       label {
  28.         margin-left: 65px;
  29.         font-size: 2em;
  30.       }
  31.       input {
  32.         margin-right: 30px;
  33.         line-height: 2.5em;
  34.         width: 18em;
  35.       }
  36.       .tijiao {
  37.         margin-left: 5em;
  38.         margin-top: 15px;
  39.         margin-bottom: 20px;
  40.         border-radius: 15px;
  41.         font-size: 1.1em;
  42.       }
  43.     </style>
  44.   </head>
  45.   <body>
  46.     <div class="firstt">
  47.       <h2>贾老板集团管理系统</h2>
  48.       <section>
  49.         <label for="mincheng">姓    名:</label>
  50.         <input type="text" id="mincheng" />
  51.       </section>
  52.       <section>
  53.         <label for="xuhao">学    号:</label>
  54.         <input type="text" id="xuehao" />
  55.       </section>
  56.       <section>
  57.         <label for="shouji">手    机:</label>
  58.         <input type="text" id="shouji" />
  59.       </section>
  60.       <section>
  61.         <label for="youxiang">邮    箱:</label>
  62.         <input type="text" id="youxiang" />
  63.       </section>
  64.       <section>
  65.         <label for="mima">密    码:</label>
  66.         <input type="text" id="mima" />
  67.       </section>
  68.       <section>
  69.         <input type="button" value="登录" class="tijiao" />
  70.       </section>
  71.     </div>
  72.   </body>
  73. </html>

学习总结：用一个人来比喻一个网页，内容相当于血肉，html相当于骨架，css 相当于外衣

上一条：html语义化结构之表格下一条：css框模型基础
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多