微信小程序界面设计入门课程-样式wxss中使用css课程-框模型-概述

雨点打透心脏的1/2处 2024-02-19 16:01 17阅读 0赞

基础语法  
微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。结构示意图如下：  
![微信小程序界面设计入门课程-样式wxss中使用css课程-框模型-概述][-_wxss_css_-_-]

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。  
提示：背景应用于由内容和内边距、边框组成的区域。  
内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

* {
      margin: 0;
      padding: 0;
    }

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。  
假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：  
![微信小程序界面设计入门课程-样式wxss中使用css课程-框模型-概述][-_wxss_css_-_- 1]

#box {
      width: 70px;
      margin: 10px;
      padding: 5px;
    }

 提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。  
 提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。  
术语翻译  
 element : 元素。  
 padding : 内边距，也有资料将其翻译为填充。  
 border : 边框。  
 margin : 外边距，也有资料将其翻译为空白或空白边。

### 小程序应用 ###

> Wxml代码

> Wxss代码

.hr{min-height: 10px;} /*高度10的空白行*/
    
    .txt1{
      width: 100px;
      height: 100px;
      background-color:gainsboro;
    }
    
    .txt2-a{
      width: 100px;
      height: 100px;
      background-color:gainsboro;
      padding: 25px; 
      border: 1rpx solid thin;
      margin: 25px;  
    }
    .txt2-b{
      background-color: grey;
    }

效果如下图  
![微信小程序界面设计入门课程-样式wxss中使用css课程-框模型-概述][-_wxss_css_-_- 2]

[欢迎大家收看我的视频教程：微信小程序样式入门到精通(wxss,css)（微信小程序界面设计必备技能）][wxss_css]  
![微信小程序样式入门到精通(wxss,css)（微信小程序界面设计必备技能）][wxss_css 1]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[-_wxss_css_-_-]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/cba98dafcf1e495fa1abb7713b1e319f.png
[-_wxss_css_-_- 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/20256bd0f74d4231a622f598793f0256.png
[-_wxss_css_-_- 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/84477314ddff46539ed5d3090e471763.png
[wxss_css]: https://ke.qq.com/course/368613?tuin=2b10d56
[wxss_css 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/cdbf573543a748f59f19c38411225be3.png