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

This article will explain in detail how to achieve horizontal arrangement of elements in css. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

The first kind: display:inline-block

First you need to understand block-level elements (blockelements) and inline elements (inlineelements)

Block-level elements: block-level elements include widthheight,padding,border and margin, which are arranged from top to bottom. Common block-level elements are div,p,form,ul, and so on.

Inline elements: the height and width are determined by the content, and you can't set a fixed size by yourself. there is no vertical margin and padding. The arrangement is horizontal, and inline elements account for the majority of all elements in html, such as html.

One may wonder, "button and img and input tags can set width and height as well as margin and padding. Why is it really an inline element?" In fact, there are two main ways to divide html elements, namely, "block-level elements and inline elements", "replacement elements and non-replaceable elements". The first division method is introduced above, and the second division method is described below:

Replacement element: the popular understanding is an element with width and height attributes. Replacement elements are similar to display:inline-block elements in that you can set the height, width and inner and outer margins, mainly including img,input,textarea,select,object,audio and canvas as replacement elements in certain cases.

Non-replaceable elements: except for the replacement elements, the rest are irreplaceable elements (O (∩ _ ∩) O)

After all, we know that display:inline-block allows elements to be arranged horizontally, but there may be a slight problem with this layout. Take the chestnut:

Div {

Display:inline-block;width:200px;height:200px

}

.div1 {

Background:green

}

.div2 {

Background:red

}

left

Right

This is why we found a gap between the two div.

Browsers will treat newline characters, indents, and spaces as a space, even if they have a crush on a space twice, or a line break plus a space, and so on. The size of this space is the size of font-size/2. There are many ways to remove this gap.

1. Set the margin-left:-font-size/2 of div2

two。 Set the font-size:0 of the parent tag of two div

3. Set negative word-spacing

The second kind: float:left/right

The float attribute allows elements to be arranged horizontally along the left or right side of the container, away from the regular document flow.

This method can be said to be the most frequently used, but there is a problem. In adaptive layout, the height and width of the element is not generally fixed, and it will be automatically adjusted according to the size of the content. This is that if all the child elements are floating elements, there will be a high degree of collapse.

Lift the chestnut

Span {

Float:left;width:200px;height:200px

}

.box1 {

Background:green

}

.box2 {

Background:red

}

left

Right

Here, the child element div in the previous chestnut is deliberately changed to span. In fact, I want to express that float can implicitly convert elements into block elements (or position:absolute/fixed), so you can set the width and height naturally.

So what's wrong with the horizontal arrangement of boxes? That's right! The parent container is highly collapsed. At this point, the height of the parent container div is 0, because the floating element deviates from the regular document stream, and its parent container ignores it when calculating the height. This is something we don't want to see, because if there are other regular flow tags behind this highly collapsed DIV, then the page will show confusion and other unwanted results.

The solution, of course, is to clear floats, mainly in two ways:

1.clear:left/right/both, specifically used to clear floating CSS.

2.BFC, because BFC has a rule that "floating elements also participate in the calculation when calculating the height of the BFC."

Talk about several ways to clear floats with clear:

1. Add an empty tag after the last child element, and then set its style clear:both.

two。 In the last floating child element, use the pseudo element:: after to add the clear style to clear the float

The third kind: table layout

This kind of layout is not commonly used because it has all kinds of problems.

Rendering speed is slow

Increase the amount of html code, which is not easy to maintain

The name of the tag does not conform to the semantics of html. Table is originally used to make tables, so it is very inappropriate to use it for layout.

The tag structure is dead, and the cost of later modification is higher.

Wait, I won't elaborate too much here. In short, try to use table layout

The fourth kind: absolute positioning

This method is also often used in daily development. It was mentioned earlier that float can take elements out of the regular document flow. Here position:absolute/fixed has the same effect. The solution has been mentioned in the float layout, so you can move it here.

Here we would like to talk about the absolute positioning of position:absolute, which is based on its first parent and the element that is located by flying static such as position:absolute/relative/fixed, and if it cannot be found, it will be located based on the root element. Generally, the parent element position:ralative and the child element position:absolute are used together.

Fifth: the flexible layout of css3

Flexible layout has not been widely recognized because of its compatibility, but I think it will definitely take the lead in the future, just like I am optimistic about html's video player, it will defeat flash sooner or later, it's only a matter of time!

The sixth kind: transform:translate

A style used for animation in CSS3, but it allows two elements to be arranged horizontally, not to mention the code, please run it with Google browser:

Div {

Width:200px;height:200px

}

.box1 {

Background:green

}

.box2 {

Transform:translateX (200px) translateY (- 200px)

Background:red

}

left

Right

This is the end of this article on "how to achieve horizontal arrangement of elements in css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.