Shulou(Shulou.com)06/01 Report--

This article introduces in detail "What are the skills of adjusting the size and margin setting of Weixin Mini Programs (Mini)?" The content is detailed, the steps are clear, and the details are handled properly. I hope this article "What are the skills of adjusting the size and margin setting of Weixin Mini Programs?" can help you solve your doubts. Let's go deeper and learn new knowledge together with the ideas of the editor.

I: size (Dimension)

I. The size attribute: allows you to control the width and height of an element, and you can also set the spacing between rows.

Height: Sets the height of the element.

2.line-height: Set the line height.

min-height: Minimum height.

Max-height: Maximum row height.

Width: Sets the width of the element.

max-width: Maximum width.

min-width: Minimum width.

II. Value;auto/number/percentage.

III. Attention:

Although there are many options, but in the Mini programs or try to use rpx it, save the adaptation.

When line-height is set for an element, max-height is also set. The actual value will be displayed as max-height, and the rest will be hidden.

2: margin and padding

Speaking of margins, this is basically the same concept as Android. Let's look at a picture first.(Although the label is ugly, it's not the point.)

1.margin: outside margin; set the extension margin of the four sides of the object.

margin: 20rpx 10rpx 25rpx 10rpx: If all four parameter values are provided, they will be applied to the four sides in the order of top, right, bottom, and left.

margin: 20rpx: If only one is provided, it will be used for all four sides.

margin: 20rpx 20rpx: If two are provided, the first one is for top and bottom and the second one is for left and right.

margin: 20rpx 20rpx 10rpx: If three are provided, the first is for the top, the second is for the left and right, and the third is for the bottom.

Some adjacent margins will merge, called margin folding, the specific phenomenon is that if two block-level elements are set to margin, then take the maximum value between the two as the outer distance of the two elements.

Note: margin folding conventional cognition:

margin folding occurs only on block-level elements;

The margin of a floating element does not collapse with any margin;

Block level elements with overflow attribute set and value other than visible will not margin collapse with its children;

The margin of an absolutely positioned element does not collapse with any margin;

The margin of the root element does not collapse with any other margin.

2.padding: Set the inner margins of the four sides of the object.

padding: 20rpx 10rpx 25rpx 10rpx: If all four parameter values are provided, they will be applied to the four sides in the order of top, right, bottom, and left.

padding: 20rpx: If only one is provided, it will be used for all four sides.

Padding: 20rpx 20rpx: If two are provided, the first one is for top and bottom and the second one is for left and right.

Padding: 20rpx 20rpx 10rpx: If three are provided, the first is for the top, the second is for the left and right, and the third is for the bottom.

Margin-top, margin-right, margin-bottom, margin-left correspond to the distance between the top, right, bottom and left, respectively, and can take the value: auto/value/percentage.

4.padding-top, padding-right, padding-bottom, padding-left correspond to the distance between the top, right, bottom and left inner edges, respectively, and can take values of auto/numerical/percentage.

Read here, this article "Weixin Mini Programs (Mini) size and margin setting adjustment skills" article has been introduced, want to master the knowledge points of this article still need to practice to understand, if you want to know more related content articles, welcome to pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.