Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 图标使用、盒模型、box-sizing、百分比布局vm vh
Blogger Information
Blog 4
fans 0
comment 0
visits 2148
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
图标使用、盒模型、box-sizing、百分比布局vm vh
嘉成
Original
373 people have browsed it

0701学习点

  1. 阿里字体图标的使用
  2. 布局的原则、元素的默认排列方式、元素类型
  3. 盒模型常用属性有哪些
  4. box-sizing属性的解决了什么问题?
  5. 百分比布局

作业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="./css/main.css">
  9. </head>
  10. <body>
  11.     <span class="iconfont icon-tuandui"></span>
  12. </body>
  13. </html>

目录结构

目录结构

作业2：布局的原则、元素的默认排列方式、元素类型

  • 布局的原则：默认从左到右，宽度不够会排在下一行显示
  • 元素的默认排列方式：行内元素默认早一排从左往右排列，块级元素默认占据一整行
  • 元素类型：行内元素、块级元素

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

  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>合模型</title>
  8.     <style>
  9.         *{
  10.             padding: 0;
  11.             margin: 0;
  12.         }
  13.         .box{
  14.             width: 100px;
  15.             height: 100px;
  16.             padding: 10px;
  17.             margin: 5px;
  18.         }
  19.         .content1{
  20.             background-color: cadetblue;
  21.             border: 5px dashed #f40;
  22.             /* border-box 常用属性，包括padding border */
  23.             box-sizing: border-box;
  24.         }
  25.         .content2{
  26.             background-color: skyblue;
  27.             border: 5px dashed #f40;
  28.             /* content-box 默认属性，不包括padding border */
  29.             box-sizing: content-box;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <div class="box content1">100px</div>
  35.     <div class="box content2">130px</div>
  36. </body>
  37. </html>

效果如下图所示：

作业4：box-sizing属性的解决了什么问题?

如作业三所示，解决了开发者在开发时计算尺寸的难点，可以精准的控制元素的宽高，方便布局

附件：百分比布局

后期可以使用该属性来铺满全屏做背景,使用到属性[1-100]vm,[1-100]vh

  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>百分比布局vm vh</title>
  8.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         .box_header{
  15.             width: 100%;
  16.             height: 8vh;
  17.             background-color: skyblue;
  18.         }
  19.         .box_body{
  20.             width: 100%;
  21.             height: 84vh;
  22.             background-color: teal;
  23.         }
  24.         .box_footer{
  25.             width: 100%;
  26.             height: 8vh;
  27.             background-color: #ccc;
  29.         }
  30.     </style>
  31. </head>
  32. <body>
  34.     <div class="container">
  35.         <div class="box_header">页眉</div>
  36.         <div class="box_body">页体</div>
  37.         <div class="box_footer">页脚</div>
  38.     </div>
  39. </body>
  40. </html>

效果如下图

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post