CSS learning Summary: Floating, locating, parent container collapse, css collapse

CSS learning Summary: Floating, locating, parent container collapse, css collapse

It has been three months since I started to contact the front-end. After so long learning, my skills are still average. I participated in IFE2017 a few days ago, the following summarizes some experiences on CSS floating, positioning, layout breakdown, and parent container collapse.

First, float and positioning are the basis of CSS layout. Through float and positioning, each box model can be precisely controlled at the pixel level to show its importance.

Let's talk about floating:

In the Document Object Model of HTML, streaming layout is used. That is to say, block-level elements occupy an exclusive row. There are two methods to make block-level elements side by side, one is to set the display of block-level elements in CSS to inline-block. However, this method is not suitable in many cases. In more cases, we will adopt a floating method.

Float: left; and float: right; float can break block-level elements out of the standard document stream and be understood as floating elements, move to the defined direction until it is blocked or encounters the parent container boundary. If the remaining width of the row is insufficient, the floating box will float to the next row. Floating provides a solution for page layout.

However, it cannot be ignored that sometimes the simple floating mode cannot meet our requirements for the interface layout. At this time, the importance of positioning is reflected. Positioning can be divided into four types: relative (relative positioning), absolute (absolute positioning), fixed (fixed positioning), and static. When the attribute is not located for the element application, it is equivalent to static.

So, how to understand relative positioning? The element (Box Model) positioned by relative is not separated from the standard Document Stream. You can set top, left, right, and bottom values for it to implement the element (Box Model) compared with the fine-tuning of the original position, top means that the element moves down relative to the original position (a negative value can be set, which is equivalent to setting a positive bottom), and left means the right shift of the element relative to the original position. In the same case, right is left-shifted, and bottom is up-shifted.

Absolute positioning: the elements that use absolute positioning are separated from the document stream, as if it never exists. In this case, its positioning is relative to the ancestor element that uses relative positioning. In addition, it also has a very important feature: it will achieve "Crossing" based on the set displacement value. What does it mean? That is to say, setting top, left, right, and bottom is relative to the boundary of his ancestor element (box. If you set the direction of displacement, the element (box) will first move to the border in that direction, and then move relative to the border.

Fixed positioning: fixed positioning is also out of the standard document stream, but it is relative to the browser window and will not change with the scroll bar or interface movement, you can also set top, left, right, and bottom values.

As for the partition layout, I usually use the following methods:

1. If the layout is divided into two columns, you can apply floating to the layout of the two boxes at the same time. You can set the width or width percentage of the two boxes.

2. The layout is also divided into two columns. You can also apply the left floating layout to the Left box, locate the right box, or set its margin value.

3. For the layout of three columns, it is best to use the floating plus Positioning Method to float the boxes on both sides of the left and right, and set the left and right margin of the intermediate elements (boxes) to achieve positioning.

It must be understood that the great innovation of floating may cause the parent container to collapse. That is to say, when all elements in the container are floating (the parent container height will be zero) or when the internal non-floating elements are not enough to support the parent container, the height of the parent container will be 0 or not enough to meet our requirements for page layout, so we must find some ways to solve the problem here, I have several methods:

1. Set a height for the parent container

2. Set parent container overflow: hidden or overflow: auto;

overflow:hidden;overflow:auto;

 

3. Set parent element floating (not recommended)

4. Set the empty element (clearfix: both)

5. Apply the following style to the parent element:

 1 .clearfix:before, 2 .clearfix:after 3 { 4     content:""; 5     display:table; 6 } 7 .clearfix:after 8 { 9     clear:both;10 }

To sum up, for the layout of elements on the webpage, floating and positioning are often used together to achieve the desired effect.

The above are some of my little experiences in CSS positioning and floating over the past few days, which may cause errors. I hope you can give me some suggestions to help us make progress together and summarize these things, I have read many documents from dashboard, so I learned a lot from dashboard's opinions, explained some of my own understandings, and deepened my understanding of the knowledge. I hope everyone will work together on the frontend and make progress every day!

-- Little goldfish

2017.2.26