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

This article mainly explains "what are the knowledge points of WeChat Mini Programs's positioning and layout design". The content of the explanation in the article is simple and clear, and it is easy to learn and understand. let's study and learn what are the knowledge points of WeChat Mini Programs's positioning and layout design.

One: location (position)

The 2017 Wechat Open course pro has been carried out as scheduled, and Mini Program will be open to individuals on January 9, 2017. the demo version of the company's project has done an overview, and the most time spent in the process is the page layout, so it will take a while to post the attributes of css in Mini Program. Although Mini Program supports css, it does not say how much it is supported. Today, let's talk about positioning.

one。 Positioning: the position attribute allows you to position elements.

two。 There are three positioning mechanisms: ordinary flow, floating flow, and absolute positioning.

three。 Positioning attribute value: static,relative,absolute,fixed,inherit,-ms-page,initial,unset (the last three attributes are found in Mini Program, and you don't understand what they look like)

1.static: element boxes are generated normally, block-level elements generate a rectangle as part of the document flow, and inline elements create one or more line boxes to be placed in their parent elements.

2.relative: the element box is offset by a distance. The element throw retains its unpositioned shape, and the space it originally occupied is retained.

3.absolute: the element box is removed from the document stream and positioned relative to its containing block, which may be another element in the document or an initial containing block. The space previously occupied by the element in the normal document stream is closed as if the element did not exist. The element is positioned to generate a block-level box, regardless of what type of box it originally generated in the normal flow.

4.fixed: the element box behaves like setting position to absolute, except that the containing block is the window itself.

5.inherit: inherits the position position of the parent element. Attribute value: inherit is not supported in any version of IE

6.-ms-page: location depends on the mode of the absolute.

7.initial: represents the specified value as the initial value of the property.

8.unset: "inherit" and "initial" are set, depending on whether the property is inherited.

IV. Top,right,bottom,left: locates the element and defines the element whose position is not static.

1. Value: auto/ direct value / percentage

V. z-index defines elements whose position is not static. Sets the cascading level of the element in the current context. The higher the value is displayed above, and the smaller the value is, it is displayed below.

Clip: clipping absolute element positioning. Define a clipping rectangle, and the extra content will be processed according to the value of overflow. Note: this property will not take effect until position is set to absolute or fixed.

1. Take a value. Shape/auto/inherit .

The attribute 2.clip is about to become obsolete. It is recommended to use clip-path.

Two: layout (Layout)

When it comes to layout, the first thing that comes out of my mind is LinearLayout,RelativeLayout and so on, but now that it is Mini Program, of course we have to change our way of thinking to see what layout methods there are in css.

One: there are the following kinds of layout: display,float,clear,visibility,overflow,overflow-x,overflow-y.

1.display: sets whether the object is displayed.

2.float: indicates whether and how the object floats.

3.clear: points out that edges with floating objects are not allowed.

4.visibility: whether to hide or not, unlike display hiding, visibility hides the position occupied by elements.

5.overflow: sets how the object handles overflow content.

6.overflow-x: sets the way in which content is horizontally overrun.

7.overflow-y: set the way the content is vertically overflowed.

Display: generate an element based on "float" and "position" to determine the type of box or box.

These are the values of display in Mini Program. The commonly used values are as follows:

1.block: specifies that the object is a block element.

2.flex: displays the object as an elastic expansion box. (a telescopic box is recommended for Mini Program)

3.inline: specifies that the object is an inline element.

4.inline-block: specifies that the object is an inline block element.

5.inline-flex: displays objects as inline block-level stretch boxes.

6.inline-table: a table that specifies an object as an inline element level.

7.list-item: specifies that the object is a list item.

8.none: hides objects. Does not occupy the physical position.

9.table: specifies the table where the object is at the block element level.

Three: float: defines the direction in which the element floats, and the floating element generates a block-level box, regardless of what kind of element it is.

1. Value: left,right,none,inherit.

2.float does not work in absolute positioning. Most corporate website layouts are based on float.

Clear: this property indicates that edges with floating objects are not allowed.

1. Value: left,right,both,none.

2.none: allows both sides to float. Left: floating objects are not allowed on the left. Right: floating objects on the right are not allowed. Both: neither side is allowed to float.

Fifth: whether to display objects or not

1. Value: visible,hidden,collapse.

2.visible: settings are visible. Hidden: sets hides (hides and occupies positions). Collapse: hides the rows or columns of a table.

VI. Overflow: how to handle spillover content.

1. Value: visible,hidden,scroll,auto.

2.visible: the overflow content is not handled, and the content may exceed the container.

Hidden: hides the contents of the overflow container without scrollbars.

Scroll: hides the contents of the overflow container, which will be rendered by scrolling the scroll bar.

Auto: scroll bars do not appear when the content does not overflow the container, and scroll bars appear when the content overflows the container. On demand.

Seven: overflow-x: how to handle spillover horizontally

1. Value: visible,hidden,scroll,auto.

two。 Same as overflow.

Eight: overflow-y: the way to deal with overflow content vertically

1. Value: visible,hidden,scroll,auto.

two。 Same as overflow.

Thank you for your reading. the above is the content of "what are the knowledge points of WeChat Mini Programs's positioning and layout design". After the study of this article, I believe you have a deeper understanding of what are the knowledge points of WeChat Mini Programs's positioning and layout design, and the specific use still needs to be verified by practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.