7.19微信小程序开发之wxss

1. box-sizing: border-box;

box-sizing 属性可以被用来调整这些表现:

content-box 是默认值。如果你设置一个元素的宽为100px,那么这个元素的内容区会有100px宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说,如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding,内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

border-box width 和 height 属性包括内容,内边距和边框,但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。注意,填充和边框将在盒子内 , 例如,
.box {width: 350px; border: 10px solid black;}

导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负,并且被分配到0,使得不可能使用border-box使元素消失。
这里的维度计算为: width = border + padding + 内容的 widthheight = border + padding + 内容的 height。

2.letter-spacing: 10rpx;

设置为h1和h2元素的字母间距:

h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}

3. min-height: 800rpx;

设置段落的最低高度

4.position: relative;

相对定位

5. z-index:1;

z-index 属性指定一个元素的堆叠顺序 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

6.display

display:inline; 默认。此元素会被显示为内联元素,元素前后没有换行符
display:block; 此元素将显示为块级元素,此元素前后会带有换行符

7.font-weight 属性设置文本的粗细

normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。

8.padding 外边距

简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。

实例:

padding:10px 5px 15px 20px;
上填充是 10px
右填充是 5px
下填充是 15px
左填充是 20px

padding:10px 5px 15px;
上填充是 10px
右填充和左填充是 5px
下填充是 15px

padding:10px 5px;
上填充和下填充是 10px
右填充和左填充是 5px

padding:10px;
所有四个填充都是 10px

发布了22 篇原创文章 · 获赞 16 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_44415209/article/details/96503020