Original text from: http://geekplux.com/2014/04/25/several_core_concepts_of_css.html
This article will introduce some of the core concepts in CSS, including: box model, position, float, etc. These are the foundation of CSS and the most commonly used properties. They seem independent but complement each other. In order to master them, it is necessary to write them down and discuss them. If there are any mistakes, please correct them.
element type
HTML elements can be divided into two types:
block level element
Inline element (some people also call it inline element)
The difference between the two lies in the following three points:
Block-level elements will occupy one line (that is, they cannot be displayed on the same line with other elements unless you explicitly modify the element's display attribute), while inline elements will be displayed on one line.
Block-level elements can set the width and height attributes, but the settings for inline elements have no effect.
The width of block-level elements defaults to 100%, while inline elements determine their width based on their own content or child elements.
The most common block-level elements should be
Well, inline elements have Wait, the complete list of elements can be Googled.
Let’s be specific,
1
2
3
4
.example {
width: 100px;
height: 100px;
}
we for
Setting the above style is effective because it is a block-level element, and for Setting the above style is useless. Want to let You can also change the width and height by setting display: block; to achieve the effect. When the value of display is set to block, the element will be rendered in block-level form; when the value of display is set to inline, the element will be rendered in inline form.
If you want the element to be displayed inline and the width and height to be set, you can set:
1
display: inline-block;
In my opinion, inline-block is to make the element appear as an inline element externally, which can coexist with other elements in a line; to make the element appear as a block-level element internally, and its width and height can be changed.
HTML code is executed sequentially. The final page rendered by an HTML code without any CSS styles is arranged according to the order and type of elements. Block-level elements are arranged from top to bottom, and inline elements are arranged from left to right. In this unstyled case, the distribution of elements is calledOrdinary stream, the position where the element appears should be callednormal position(I made this up blindly), and at the same timeAll elements will occupy a space on the page, the size of the space is determined by its box model.
box model
Every element displayed on the page (including inline elements) can be viewed as a box, that is, the box model. Please see the screenshot in Chrome DevTools:
It can be clearly seen that the box model consists of 4 parts. From the inside to the outside they are:
1
content -> padding -> border -> margin
Logically speaking, the width (height and so on) of an element should be calculated like this:
But different browsers (you guessed it, the different browsers) interpret width differently. Browsers that comply with W3C standards believe that the width of an element is only equal to the width of its content, and the rest must be calculated additionally. So you specify an element:
I personally think that IE is more in line with human thinking. After all, padding is called inner margin, and the border cannot be counted as extra width. In order to solve this problem, W3C finally added the box-sizing attribute to CSS3. When we set box-sizing: border-box; When , border and padding are included in the width and height, which is the same as the previous standard of IE. Therefore, in order to prevent the same css from performing differently in different browsers, it is best to add:
1
2
3
4
5
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
There are two special cases here:
No width - absolutely positioned (position: absolute;) element
No width - float elements
They appear on the pageDoes not take up space(Out of the normal flow, they feel like they are floating on the top of the page, and moving them does not affect the positioning of other elements). This involves two other core concepts: position and float.
position
The position attribute determines how the element will be positioned. It has roughly five values:
position value
How to position
static
positiondefault value. The element will be positioned in its normal position (mentioned above), which is effectively the same as having no positioning. element on the pageoccupyLocation. cannotUse top right bottom left to move element position.
relative
Relative positioning, positioning relative to the normal position of the element. elements on the pageoccupyLocation. CanUse top right bottom left to move element position.
absolute
Absolute positioning, relative toThe most recent levelPositioning is not staticparent element for positioning. elements on the pageNot occupiedLocation. CanUse top right bottom left to move element position.
fixed
Absolute positioning, relative tobrowser windowto perform positioning. The rest is the same as absolute, equivalent to a special kind of absolute.
inherit
Inherits the value of the position property from the parent element.
For specific effects, please refer toExamples of w3school, or you can understand it by writing it yourself.
Each web page can be viewed as a layer of pages stacked one on top of another, as shown in the figure below.
Pictures from the Internet
When position is set to relative, the element is still in the normal flow and the position is the normal position. You can move the element through left, right, etc. Will affect the position of other elements.
When the position value of an element is absolute or fixed, three things will happen:
Move the element one level to the Z-axis direction,The element is out of the ordinary flow, so it no longer occupies the space of the original layer., will also cover underlying elements.
This element willBecome a block-level element, which is equivalent to setting the display: block;(given an inline element like , after setting absolute, I found that it can set the width and height).
If the element is a block-level element, the width of the element changes from the original width: 100% (occupies one line) to auto.
From this point of view, when position is set to absolute or fixed, there is no need to set display to block. And if you don't want to cover the underlying elements, you can set the z-index value to achieve the effect.
float
As the name suggests, float floats elements. It has four values: left right none inherit. You can understand it just by looking at the name. No need to say more.
I won’t go into details about the principles, just talk about a few key points of float:
It only floats left and right, not up and down.
After an element is set to float, it willBreak away from ordinary flow(and position: absolute; Same), it no longer occupies the space of the original layer, but also covers the elements of the next layer.
Floating has no effect on the element's previous sibling.
After floating, the next sibling element of the element will be immediately behind the element that was not floated before (it is easy to understand, because the element is out of the ordinary flow, or is not on this layer, so of course its next element must fill its position).
If there is an inline element (usually text) in the next sibling element of the element, it will be displayed around the element, creating an effect similar to "text surrounding an image". (Please refer toIn-depth research, detailed explanation and expansion of CSS float (1)explanation in ).
If the next sibling element is also set to float in the same direction, it will be displayed immediately after this element.
This element willBecome a block-level element, which is equivalent to setting the display: block;(and position: absolute; Same).
There is another thing here, which is widely known——clear float. There are various specific methods, you can read this article:The floats we cleared together in those years, I won’t say more.
After writing this article, a series of questions appeared in my mind. What problems would occur if position and float were set at the same time? How is the compatibility? Which properties will be overridden? I haven’t had time to practice it yet. I’ll see what the effect is by permutation and combination another day... If anyone has practiced it, you can tell me secretly ^_^
Jake, a native of Hangzhou, has studied and worked in the United States for many years. He has worked in technology research and development, team management and core business decisions at Amazon, Shopify, Capital One, Grab and Oracle, involving advertising technology, payment systems, financial technology and data platforms, and has sought new entrepreneurial opportunities in AI applications and cross-border fields. Passionate about creation and practice from zero to one, if you resonate with us, please feel free to communicate!
