CSS layout Summary

CSS layout Summary

1. display attributes

Display is the first stop in CSS layout. It controls the "identities" of an element in the page layout. It has many values. Commonly Used values include block, inline, inline-block, table, and none. If you want to place an element on a page, it is very important to set the display without resetting it. 2. When to use width and when to use max-widthFrom my perspective, if you understand the differences between the two, you may be able to easily choose which one to use, because their differences are quite large. -Width: Set an absolute width for the element. Since it is absolute, it is immutable. -Max-width: set an upper-limit relative width for the element. The upper limit is the value you set for max-width. For example, if it is set to 600px, the width of this element changes between 0 and. When the width of the current window is greater than 600px, set the width to 600px. If it is smaller than 600, the width of the element is reduced accordingly. We can also set a min-width for it to specify the minimum width. This feature is particularly useful for screen adaptation with different resolutions. By understanding the differences between the two, basically all attributes starting with min and max have similar meanings and are widely used, such as media queries. 3. computing problems in the Box ModelWe may all have encountered this situation. When using the box model, for example, we set a div with width: 500px. At this time, if the corresponding border and padding are both 0, the width of the content in the entire div is PX, but if border and padding have values, the entire box model will look like this, the div we see is actually not 500px. It is 500 + 50*2 + 10*2 = 620px. Maybe this effect is not what we want. There are two solutions: (1) the first one is rough and uses the power of mathematics directly, 500-50*2-10*2 = pixel PX, you can change the width of the blue block to pixel PX, but it is a little troublesome (T_T needs to be calculated ). (2) Another method is to use the box-sizing attribute. You only need to add the following: Box-sizing: border-box;The box model is automatically adjusted:

In this way, we can achieve the desired effect.

 

 

4. position attribute

Position is also an attribute that is frequently used in the layout. Its values include static (default), relative (relative positioning), absolute (absolute positioning), and fixed (fixed positioning ). (1) static if we do not assign a value to the position of an element, the position value is static. It does not have any special effect. (2) relative if we assign a value to the position of an element to relative, but do not assign values to top, bottom, left, and right, there is no difference between display and static. If the four values are set, Its new location is relative to its original location. It is relative to the position value of static to determine its new position. Note that if an element whose position is relative is followed by another element whose position is static ), the position of this element will not be changed because of the position change of the relative element. (3) fixed positioning. If there is too much content on a page and the page is too long, if we want to use the navigation bar when turning the page to the bottom, we also need to scroll the page to the top, the user experience of this approach is poor. Therefore, it is easy to find on some video websites that when you scroll the page to a certain position, a navigation bar will appear at the top of the browser window, and it will remain in that position, no matter which part of the page you scroll to (maybe it will disappear when you return to the top and replace it with another one ). (4) absolute location of absolute. Absolute positioning also has a reference object. Setting top, left, and other attribute values for absolute positioning will refer to the top-left vertex of a reference object for re-positioning. And its original position will not be retained. It will float the upper layer of other elements. If there is a background color, it will overwrite the lower layer elements. 5. Clear floatingClearing floating is a big pitfall. Before looking for information on the Internet, a better summary is an answer on stackoverflow, the link is as follows: http://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use

 

6. Use percentage width

This item can be used in combination with min and max. This percentage unit is the unit of measurement relative to the contained block. That is, it depends on the width of the element that contains it. The specific application scenario depends on the requirements.

 

 

7. Media Query

When we first noticed that the media query uses the BootStrap framework, the media query is actually similar to an if... else judgment. Different style setting operations can be performed under different conditions.

1 @ media screen and (min-width: 600px) {2/* When the browser width is greater than 600px, execute */3... 4} 5 @ media screen and (max-width: 500px) {6/* When the browser width is smaller than 500px */7... 8}

 

 

8. inline-block

Sometimes using inline-block can achieve the same effect as float. It also avoids floating clearance.