简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 盒模型属性探讨和相对单位em的应用
Blogger Information
Blog 54
fans 6
comment 31
visits 106655
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
盒模型属性探讨和相对单位em的应用
吾逍遥
Original
877 people have browsed it

一、盒模型属性探讨

盒模型 对于盒模型应该是耳熟能详了，但是通过朱老师讲课，更能体会到盒模型更深入的知识，我在老师基础上结合我平时的疑问进行了测试，得到相对比较全面的总结。

盒模型组成:外边距margin 、边框border、内边距padding和内容content四个部分组成

盒模型

  1. /* 下面探讨都是针对下面而言 */
  2. <body style="height: 800px">
  3.   <div class="header"><div class="box"></div></div>
  4. </body>

1、 宽度width、高度height和box-sizing

  • 盒模型的宽度和高度计算依据是box-sizing ，默认是content-box ，即等于内容宽度和高度。
  • 而在布局时border和padding撑开盒模型空间导致布局不稳定，建议设置为border-box ，即宽度和高度包括border和padding。
  • 盒模型宽度和高度是不包括margin。
  1. .box { box-sizing: border-box; width: 500px; height: 500px; background-color: seagreen; }

2、 边框border和内边距padding

边框border可设置：宽度、样式和颜色。而内边距padding是透明的，只能设置宽度

  1. .box { border: 10px solid violet; padding: 20px; }

3、 外边距margin

单独探讨margin是因为它的右边距和下边距延伸特性。

  • margin的左或上边距始终生效，相对于父元素的左上角。右或下边距在右侧或下方有其它元素时有效，若右侧或下方没有其它元素则延伸，对元素布局不影响。
  • margin可以设置绝对值、百发比和auto。绝对值和百分比是按第一条规则布局的，但是百分比要注意横向和竖向百分比的计算规则，可见下面详解
  • 取值auto时，竖向为0，横向是一个元素时则平均分容器宽度减去元素宽度得到的值，若是多个元素时则为0。
  1. .box { margin: auto auto; }
  2. .header { width: 800px; height: 500px; position: relative; background-color: darkcyan; }

4、 背景裁剪backgroud-clip

默认值是border-box，背景色或背景图延伸到边框；为padding-box延伸到内边距；为content-box延伸到内容

  1. .box {
  2.   border-style: dashed;/* 设置边框样式为虚线，可以看到padding-box和border-box的区别 */
  3.   background-clip: content-box;
  4.   /* background-clip: padding-box; */
  5.   /* background-clip: border-box; */
  6. }

5、 百分比的依据

为什么要单独探讨下百分比，这是我开发中遇到想按背景图比例设置元素尺寸时引发的。我设置尺寸时，除了绝对值px和相对单位em、rem、vw与vh外，还常用用到百分比,盒模型好多属性也可以设置成百分比。但是经常遇到百分比后的值不是自己想象的，尤其是height百分比，这个也是本节要解决的，相信大家以前也没深入探讨过，当然我主要测试了几个常用的。

  • width、margin、padding中百分比都是依据父元素的width。可以利用这个特性，设置width和padding来适应背景图的长宽比。
  • height的百分比是依据父元素的height。它的计算非常特殊，详细见下面
  • background-position的百分比是依据元素减去图片的剩余值，即元素300px，图元素100px，则此时百分比20%就是0.2*(300-100)=40px。
  • 定位position中left、right依据父元素宽度，top和bottom依据父元素的高度。

百分比的计算

宽度百分比： 父元素指明宽度时，百分比就是父元素宽度百分比；若父元素未指明时，切记不是父元素被撑开的宽度百分比，而是向上寻找，直到有指明宽度为止，body宽度默认为屏幕宽度。
高度百分比： 父元素指明高度时，百分比就是父元素高度百分比；若父元素未指明时，则它视为0，不会向上寻找，也不考虑撑开的高度。

  1. .box {
  2.  /* 因为背景图比例是1.8:1，所以width是padding-bottom(相当于height)的1.8倍 */
  3.   width: 90%;
  4.   padding-bottom: 50%;
  5.   margin-left: 2%;
  6.   border-width: 5%;  
  7.   /* background-position: 20% 20%; */
  8.   /* position: absolute;
  9.   left: 10%;
  10.   top: 10%; */
  11.   background-image: url(https://img.php.cn/upload/course/000/000/001/5f59db624c2e2735.png);
  12.   background-repeat: no-repeat;
  13.   background-size: cover;
  14. }

效果 https://codepen.io/woxiaoyao81/pen/pobEBor

二、em实现按钮组件展示的应用

在我的作业https://www.php.cn/blog/detail/24434.html中已经比较详细分析了em和rem的本质，这里就不再解析了，这里主要演示layui文档中不同尺寸的按钮和重点展示效果。

  1. <style>
  2. /* 基本样式 */
  3. .btn {
  4. outline: none;
  5. border: none;
  6. padding: 0.5em 1em;
  7. margin: 0 0.8em;
  8. color: white;
  9. background-color: darkgreen;
  10. border-radius: 0.5em;
  11. }
  12. .btn:hover {
  13. opacity: 0.8;
  14. transition: 0.3s;
  15. cursor: pointer;
  16. box-shadow: 0 0 0.2em red;
  17. }
  18. /* 不同尺寸效果 */
  19. .big { font-size: 20px; }
  20. .medium { font-size: 16px; }
  21. .small { font-size: 12px; }
  22. /* 重点展示效果 */
  23. div { margin: 20px auto; }
  24. span：link { font-size: 16px; }
  25. span:hover { font-size: 22px; transition: 0.3s; }
  26. </style>
  27. <body>
  28. <div>
  29.     <h1>按钮不同尺寸</h1>
  30.     <button class="btn big">相对单位</button>
  31.     <button class="btn medium">相对单位</button>
  32.     <button class="btn small">相对单位</button>
  33. </div>
  34. <div>
  35.     <h1>重点突出显示</h1>
  36.     <span class="btn">重点展示</span>
  37. </div>
  38. </body>

效果 https://codepen.io/woxiaoyao81/pen/BazLEBK

源码见我的Github https://github.com/woxiaoyao81/phpcn13或Gitee https://gitee.com/freegroup81/phpcn13

Correcting teacher：天蓬老师天蓬老师

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
1 comments
吾逍遥 2020-10-22 17:29:58
收到，静态直接图片，动态我就放下codepen链接
1 floor
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！