The content shared with you today includes CSS box model, CSS standard layout, CSS floating layout, and detailed descriptions with cases.
1. CSS Box Model
CSS treats all elements as boxes, and CSS layout is actually how to stack boxes.
Composition: content (content)—>padding (inner margin)—>border (border)—>margin (outer margin)
1. content content area
-
Set the content area, add text to this area
-
When boxes are nested, if the size of the inner box is not set, it will be automatically adjusted according to the outer box
#box{
width: 200px;height: 200px;background:red;
}
2. Padding inner margin, that is, the distance between the content and the border
- padding: 20px Enter a value for the top, bottom, left, and right spacing
- padding: 20px 30px; Enter two values for top and bottom, left and right spacing
- padding: 10px 20px 30px 40px; Enter four values for top, right, bottom and left spacing
- In addition, one side can also be set by padding-direction
#box{
padding: 50px;
}
3, border border
- Border, the default is the same as the background color
#box{
border: 20px blue solid;
}
4. margin Outer border, that is, the distance between the box and other areas
- can be negative
- One side can be set by margin-direction
- Can be set to 0 auto adaptive centering
- Note: The margin attribute of the two boxes will not accumulate in the up and down direction, but the distance between the two boxes will be the larger value between the two
- Note: When boxes are nested, adding the margin-top attribute to the inner box will make the outer box also have this margin-top attribute
#box{
margin: 0 auto;
}
Full example :
<style>
#box{
width: 100px;height: 100px;background:yellow;
padding: 20px;
border: 20px blue solid;
margin: 0 auto;
box-sizing: content-box;
}
</style>
<div id="box"> 盒子模型 </div>
2. CSS standard layout
The so-called standard layout is to layout elements according to the characteristics of elements in the standard flow, namely: block (block-level elements), inline (inline elements), inline-block (inline-block-level integration).
-
block-level elements on a single line
-
Inline elements and inline block elements share a row
1. block (block-level element)
Common block (block-level elements) are: div, p, ul, li, h1 ... h6
block features:
-
Exclusively on one line, when you do not set its own width, the default width of block-level elements is the same as that of the parent container
-
All styles are supported
-
The occupied area is a rectangular area, and the width and height of the element can be changed
2. inline (inline elements)
Common inline (inline elements) are: span, mg, a, em, strong
inline features :
-
It can share a line with other inline elements, and will not occupy a line alone
-
The width and height of the element cannot be changed, the size is determined by the content
-
You can use padding to be effective both up, down, left, and right. For margin, only left and right can produce margin effects, but top and bottom cannot.
-
Gaps between inline tags, caused by newlines
3. inline-block (integrate inline with block level)
inline-block features :
- Block-level elements that do not occupy a single line
- There is a gap problem, which is caused by newlines (blank characters)
As shown in the picture:
The method of removing the gap :
add {font-size:0} to the parent element, that is, set the font size to 0, then the blank character will also become 0px, thereby eliminating the gap.
This method is already compatible with various browsers.
4. Label nesting specification
- Blocks can be nested inline
- Blocks may not necessarily nest blocks
- Inline cannot nest blocks (except <a>)
5. Overflow operation
When there is too much content in a block and overflows the block, you can use overflowthe operation to overflow the content
<style>
div{
width: 200px;
height: 200px;
border: 2px black solid;
overflow: auto; /* hidden:隐藏 scroll:出现滚动条 auto:根据情况出现滚动条*/
}
</style>
<div>
溢出操作溢出操作溢出操作溢出操作
溢出操作溢出操作溢出操作溢出操作
溢出操作溢出操作溢出操作溢出操作
溢出操作溢出操作溢出操作溢出操作
溢出操作溢出操作溢出操作溢出操作
溢出操作溢出操作溢出操作溢出操作
溢出操作溢出操作溢出操作溢出操作
溢出操作溢出操作溢出操作溢出操作
溢出操作溢出操作溢出操作溢出操作
溢出操作溢出操作溢出操作溢出操作
溢出操作溢出操作溢出操作溢出操作
溢出操作溢出操作溢出操作溢出操作
溢出操作溢出操作溢出操作溢出操作
溢出操作溢出操作溢出操作溢出操作
溢出操作溢出操作溢出操作溢出操作
溢出操作溢出操作溢出操作溢出操作
</div>
5. Advantages and disadvantages of the standard layout method:
-
In the standard layout method, block-level elements are difficult to be used effectively, because they occupy a single line, so they can only be laid out in the vertical direction.
-
Inline elements and inline block elements can be laid out horizontally, but most of their content can only be text. A small number of them, such as td, support other inline block elements, but they are not suitable for general layout.
-
There will be gaps in the horizontal direction between inline elements and inline block elements due to code spaces and newlines. There is a default baseline alignment bottom gap in the vertical direction of inline block elements, which brings additional troubles to horizontal layout, but td does not have these problems.
In fact, in essence, the short board of the standard layout is that the layout in the horizontal direction can only use inline and inline block elements, and the inline and inline block elements are not suitable for layout due to various problems, only for content .
Block-level elements do not have these problems of inline and inline block elements, so if block-level elements can also be used for horizontal layout, then it will be perfect.
3. CSS floating layout
1. Definition of floating layout
In order to solve the problem that block-level elements cannot be laid out in the horizontal direction in the standard layout, that is, the problem that multiple block-level elements cannot share a line, CSS proposes the concept of floating.
The so-called floating is to set the float style for the element, and the float style has the following values:
left 左浮动
right 右浮动
none 无浮动（元素默认浮动，无浮动）
Once an element has float:left or float:right set, the element will leave the standard flow and enter the floating flow. The so-called floating flow, we can understand
It is another layer on top of the standard stream layer.
Once the element is unmarked, the element will release its occupied position in the standard stream, which will result in the predecessor of the element after the unmarked element in the standard stream.
In floating flow, multiple block-level elements can share a line.
As shown in the picture:
In the above example, box1 and box3 are set with float:left, so they enter the floating stream and share a line, and after box1 and box3 are unmarked, their positions in the standard stream will be released. At this time, box4 is still in the standard stream. The elements in the stream will be moved to the position where they were released.
So in the above example, part of box4 is actually covered by box1~bxo3, because the floating stream is above the standard stream.
2. Features of floating elements
-
Share a row between floated elements
-
The width and height of floating elements are determined by the content of the element by default, not by the parent
-
Floating elements support specifying the box content area, inner and outer margins, and border size through width, height, padding, border, and margin
-
There will be no gaps between floating elements due to spaces and newlines, and the floating elements will fit closely
-
Inline elements, inline block elements, and block-level elements in the standard flow will all become floating elements after being floated, and have the characteristics of the above floating elements.
-
The floating range of a floating element can only be within its parent element (whether the parent is in the standard flow or in the floating flow), and the floating element will not suppress the border and padding of the parent element, and the inline elements in the content of the parent element, The content of inline-block elements will automatically flow around floated elements.
-
The floating element itself is in the content of the parent element. If the floating element has sibling elements: if the sibling elements are also floating elements, the previous siblings float first, and the latter siblings float last.
-
If the sibling element is a non-floating element, the floating element will not float up and press down on the previous non-floating sibling element, and the floating element will release the standard flow position occupied by the unmarked element, so the non-floating sibling behind the floating element will enter the released position , thus being suppressed by the floating element.
Summary: Floating elements will only affect the standard flow behind the floating element, not the previous standard flow.
3. Problems and solutions caused by floating
(1) Problems caused by floating: the height of the standard stream parent container will become 0
Generally, we do not set the height for the parent container in the standard flow, but let the container height automatically adapt to the height of the container content. If a child element floats at this time, the height of the parent container in the standard flow Will go bad 0.
The reason is: the height of the parent container in the standard flow is extended by the child elements in the standard flow. When the child element is unlabeled, the corresponding position in the standard flow will be released, so the parent container in the standard flow is There is no content, and the height of the parent container is 0 at this time.
(2) The height of the standard flow parent container will become 0 Solution
Let the parent container in the standard flow change to BFC mode, so that the rendering of the child elements in the parent container will not affect the outside world (ie: it will not cause the height of the parent container to change)
There are the following methods:
A. The element becomes a floating element, that is, add a float style (not none)
B. Elements add overflow style (non-visible)
C. The element becomes an inline block display mode
D. The element becomes a flexible element, that is, add display:flex
