We've learned the css base, changing the color, size, margins. But it's not enough to make a whole navigation bar, card layout, sidebar + main content structure. This section focuses on floating, positioning, flex elastic layouts, three css step cores, and the layouts that work on a daily basis, all of which can be copied directly, and it is recommended to knock。
Carnation: floating is slowly being replaced by flex, but old projects are often seen and must be understood; flex is now the dominant layout, the top priority
I. Document flow (first understand the rationale)
Default web element follows standard document stream:
Block-level elements (div, p, h1): single row, line-in-line elements (span, a): from left to right, space does not automatically change lines floating, positioning, essentially separating / changing the default document stream. Ii. Float
Float was originally designed to wrap text around pictures and was used in early page layouts. Optional value:
Example: text wraps pictures
"utf-8."Img {
width: 120px;
okay, fine: left;
margin-right: 10px;
♪ i'm sorry ♪
This is a test text, the picture floats to the left, and the text automatically surrounds the right side of the picture. The floating element no longer occupies the position of the standard document stream, which is the largest feature of the floating。
️ floating crater: height collapse
After all the elements in the parent box float, the parent box will become zero
Hypocrisy removal float (enterprise most commonly used, recommended)
. Clarfix: after {
listen: "";
display: block;
clear: both;
height: 0;
we're going to have to take a look.
♪ i'm sorry ♪The parent label will be added. 2. Set parent elements overflow: hidden (simple, some scenarios limited) 3. Additional empty labels (not recommended, redundant tags)
Summarizing the advantages and disadvantages of floating, compatibility, use of old projects, high-level collapse, layout problems, and now new projects are priority
Iii. Position
Positioning is used to place elements at any location on the page, to make bullet windows, return to the top, corner signs, suspended navigation. Five attribute values: static, relative,absolute, fixed, sticky
Static default: normal document flow, stop/leaft invalid relative relative position offset against your original position, not removed from the document stream, still occupied
. Box
width: 100px;
height: 100px;
i'm sorry. No, no, no, no. Top: 10 px;
left: 10 px;
♪ i'm sorry ♪Absolute location [focus] relative to the most recent parent that sets a non-static location; the parent element is unpositioned relative to the browser window. Disconnect from the document stream and no longer keep the original position
Phrase: son-in-law (child element, father element relative, most common combination)
. Father
width: 300px;
height: 200px;
#ee;
no, no, no, no.
♪ i'm sorry ♪
. Son
width: 80px;
height: 80px;
i don't know. I don't know. Right: 10 px;
buttom: 10 px;
♪ i'm sorry ♪
Angular
Fixed fixed positioning no change in scrolling page position relative to browser viewer, often used to: return to top button, suspended side passenger service
. Back-top
width: 50px;
height: 50px;
#333;
#fff;
text-align: center;
line-health: 50px;
no, no, no. Right: 20px;
buttom: 30px;
♪ i'm sorry ♪Sticky positioning. Scrolling to the threshold becomes fixed, often for top-sucking navigation. Column
. Nav {
height: 50px;
#22;
color: white;
no, no, no. Top: 0;
♪ i'm sorry ♪Supplement: x-index levels only locate elements (
Only then did the z-index take effect, and the larger the value, the higher it gets。
Z-index: 999;Iv. Flex flex layout
The parent box becomes an elastic container, and the sub element automatically becomes an elastic item, as long as the parent box is set with display: flex. Flex can be easily achieved: horizontally, vertically, equally。
Common parent packaging attribute flex-direction: main axis orientation justify-content: main axis alignment align-items: cross-axis alignment flex-wrap: full example of cross-line sub-section properties: navigation bar (horizontal arrangement, vertical center)
"utf-8.". Nav {
display: flex;
height: 50px;
#2c3e50;
allan-items: center;
♪ i'm sorry ♪
. Nav a
#fff;
no one;
paddy: 0 20px;
♪ i'm sorry ♪
. Nav a:over {
color: #42b983;
♪ i'm sorry ♪
Example: three-bar card equals
. Card-wrap
display: flex;
gap: 15 px;
♪ i'm sorry ♪
. Card
flex: 1;
height: 120 px;
#87ceeb;
display: flex;
allan-items: center;
just fine-content: center;
♪ i'm sorry ♪
Card1
Card2
Card3
One sentence: want horizontal + vertical centered, three rows of the parent container code cleared
Display: flex;
just fine-content: center;
allan-items: center;V. Css other advanced small knowledge pointbox-sizing: border-box box modelor default content-box: width counts only content, padding, border builds boxes border-box: width contains padding and border, writing layouts must add
*
margin: 0;
paddy: 0;
box-sizing: border-box;
♪ i'm sorry ♪Almost all items in this paragraph will be reset at the top。
Transparency vi, new high frequency pedal listabsolute absolute, remember the parent element plus relative, or the locator flex only works for direct sub-elements, the grandchild is not affected by float away from the document stream, and do not work: the approximate element is not positioned sty suction: the parent element cannot set overflow:hidden after practice to write a navigation bar with a log button on the right side to make a right top-hand belt closure sign (achieved by the father-in-law) by writing a three-column back button fixed to the lower right corner and writing a three-bar equal sub-card layout with windows down
