小程序开发Day3——CSS盒模型

标签

在微信开发者工具中，我们创建一个文件夹，就会自动生成四个文件，js,json,wxml,wxss。
在wxml中，wxml类似于我们web开发时的html，我们可以在原始代码中看到标签<view><text>,这是wxml里最常用的两种标签，两者功能基本相似但也有不同。

• <view>:是一个块元素，独占一行，不同的标签会换行。宽高都是可以变的。
• <text>:行元素，不会自动换行。宽高完全由内容决定。
• px&rpx：px表示像素单位，rpx是微信小程序独有的，可以根据屏幕自适应；1px=0.5rpx。

/**index.wxss**/
view{
  color: green;
}
.index{
  color: blueviolet;
  background-color: burlywood;
  width:400rpx;
  height:400rpx;

}
.text{
  background-color: red;
  width:400rpx;
  height:400rpx;
}

• 选择器

• class：类选择器。

• last-child：更改最后一个子标签的样式。

盒模型

"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

.index{
  color: blueviolet;
  background-color: burlywood;
  width:400rpx;
  height:400rpx;
  border: 20rpx solid blue;
  margin: 40rpx 80rpx 40rpx 40rpx;
  padding-left: 40rpx;

}