Review, review every day review!

Guys, this is the third best job. I hope I can go further and further on the road of systematic learning

Reread MDN to check and fill gaps

First of all, the content of this article and MDN overlap rate is very high, because the main reference to MDN to write (review ~!!) . Rather than spreading knowledge, I wanted to make my own knowledge more systematic (go!!).

The word “TODO” in the article is meant to remind myself that I still have knowledge that I can use as a topic for future blog posts (or continuation or expansion).

What are the layouts?

The normal layout

Normal flow is the browser’s default HTML layout without any control over the layout of the page.

Simply put, this is the layout of a document page written in pure HTML that is displayed in the browser by default.

Here are some ways to change the default layout:

• When the display property is set to some value, for exampleflex,grid
• floating
• positioning
• Table layout is just display:table
• Multi-column layouts

So let’s just briefly describe these things.

display

The main way to achieve page layout in CSS is to set the value of the display property. Flexbox stands for CSS Flexible Box Layout Module. It is specifically designed to create one-dimensional page layouts horizontally or vertically. A Grid Layout is designed to arrange elements in rows and columns on both dimensions.

floating float

“Float” an element changes its behavior in the document flow (out of the document flow, as the saying goes), as well as the position of subsequent elements in the document flow (the content surrounding the floating element).

Off topic: Floats were originally designed to wrap text around images, but are now more used for layout.Copy the code

Such as:

<h1>Simple float example</h1>
<div class="box">Float</div>
<p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
...
</p>
Copy the code

Surround effect:

Extension: Traditional layout

positioning

What’s the difference between positioning and floating?

For the question of whether to occupy space, you can see this article what does CSS out of the document flow mean, out of the document flow does not occupy space? Does out of the document flow mean that the element is out of the DOM tree? – Answer by Zhang Qiuyi – Zhihu. In simple terms, the float is separated from the document flow, but there is space in the document flow. Other boxes are arranged as if there is no box, but the text in the other boxes will still surround the floating element. However, positioning is completely out of the document flow, there is no placeholder, and the text of other boxes will not be able to see the positioning element. Positioning is rarely used for large layouts, but more for small fine-tuning of special items. The default static is in the document flow; Minor adjustments to the original position of elements, such as to make room for an icon; Absolute Position absolute Position relative to the page. Fixed, relative to the browser visual window positioning; Sticky positioning, a mixture of static and fixed positioning, which stops when it is a certain distance from the browser’s visual window.

Table layout

This is to use some of the features of the table for page layout (nonsense literature +1 is no longer recommended this way. Have a superficial knowledge of it.

Multi-column layouts

It’s dividing the page up into vertical columns. It depends primarily on the column-count attribute.

<div class="container">
    <h1>Multi-column layout</h1>
    <p>Paragraph 1.</p>
    <p>Paragraph 2.</p>
</div>
Copy the code

CSS:

.container {
    column-width: 200px;
}
Copy the code

Display:

Normal document flow

What is the layout of a normal document flow?

By default, the content width of a block-level element is 100% of its parent element and its height is the same as its content height. The height width of the inline element is the same as the content.

Setting the width for an inline element is invalid.

Margin overlay

Margin Collapse MDN: Margin overlap

Is about to summarize, in the ordinary course of document flow, the adjacent two elements, can be a father and son, can also be a brother, if there is no border in the vertical direction, padding, content, has not been landing, clear float to separate a block-level element of upper and lower boundary, so they are vertically up and down the outside of the overlapping phenomenon happens to the distance, Take a large margin to work.

Flexible layout Flex

Elastic boxes are a one-dimensional layout method for laying out elements by row or column. Elements can expand to fill additional Spaces and shrink to fit smaller Spaces.

For a long time, we have relied more on floating and positioning to solve the layout problem, but these two are not easy to satisfy the following scenario:

• Vertical center
• All child elements in a container can dynamically allocate the same amount of available width/height
• In a multi-column layout, each column can have the same height even if the amount of content d is different

But flex, with its flexible layout, can easily fulfill this requirement.

A simple example:

Just add onedisplay:flexYou get the following effect:

(Surprisingly, this is because the default value of the Flex layout has this effect.

Flex Model Declaration

When the outside element is represented as a Flex box, the inside element is arranged along two axes:

Main axis: The axis that extends along the direction in which the Flex element is placed. The axis is called main Start and main end, respectively. Flex container: set display: Flex elements are called Flex containers. Flex items: children of flex containers are items. MDN says: Elements that represent flexible boxes in flex containers are called Flex items (Flex Items)

Row a thunder: should have noticed, the above said that the spindle cross axis, in fact, there is no provision “horizontal is the spindle vertical is cross axis” so. In fact, the principal axis can have four directions, and the intersecting axis can have four directions.

There is a property that controls the direction of the intersecting axes. Before we say this, we should also know one thing:

Flex attributes are either set on the Flex container (parent element) or set on flex items (child element). That’s a distinction.

I’m going to write down some common attributes, which are actually instructions, and there’s no need to pay too much attention, but I read more than I write, and I hope that writing more will make me remember some of them and understand some of them better.

Start with the properties set on the Flex container

flex-direction

Flex-direction is a property that controls the direction of the main axis.

We said that the main axis actually has four directions, what are the four directions? Left-to-right row(default), right-to-left row-reverse, up to down column, down to up column

For convenience, the default main axis direction below is left to right, i.e., “one line”.

flex-wrap

Overflow problems occur when there are too many Flex items, like this:

Setting flex-wrap:wrap will wrap the Flex item in the Flex container

It looks like a newline, but there’s something wrong with it. We want multiple columns per row, but now it looks like… A single Flex entry takes up an entire line because of the insideFlex itemThere is no width limitation, resulting in it occupying 100% of the parent element by default.

So how do we do that?

forFlex itemCollocation width:

Flex-wrap has three values: no-wrap by default; It can also be wrap, where one line is not enough and the next line begins and continues. Another one is wrap-reverse, where one line is not enough, and the top line continues

Like this,

flex-flow

It is a combination of the flex-direction and flex-wrap properties.

flex-direction: row;
flex-wrap: wrap;
Copy the code

Can be replaced with:

flex-flow: row wrap;
Copy the code

My vulgar translation is: Where flex flows

What does that mean? Flow has two meanings. One is how it flows in the plain and what direction it should go. The other is that it is time to turn and look where it should wrap.

justify-content

Horizontal alignment.

There are five kinds: Default flex-start (default) : left-align Flex-end: right-align center: center space-between: align items at both ends with equal spacing between items space-around: Each item has a certain amount of space at both ends, so the space between items is twice as large as the space between items and the border.

Here is the picture from teacher Ruan yifeng’s website:

align-items

Flex-start: aligns with the starting point of the cross axis. Flex-end: aligns with the end point of the cross axis. Center: aligns the midpoint of the project and the midpoint of the cross axis. In the project, the baselines of the first line of text are aligned with each other.

The following is still from ruan Yifeng teacher website:

align-content

Flex-start: aligns with the starting point of the cross axis. Enter: aligns with the middle point of the cross axis. Space-between: aligns with the middle point of the cross axis. 2. Each axis has a certain interval at both ends, so the distance between the starting and ending points of the spindle and the crossing axis is half of the distance between the two spindles

Still from ruan Yifeng teacher website to take the picture:

At first glance, the align-content property is similar to the align-items property above, but the align-content property is how each row (each spindle) in the multi-line content is arranged in the cross axis. This property does not work if there is only one spindle. Align-items is a line (a main axis) of content on how the cross axis is arranged.

To give you a simple example:

Again, set the properties on the Flex entry

order

We wonder if we can change the display order of flex items without changing the order of flex items in the DOM tree. For example, I said I would arrange several items in this way, but now I want to leave the dom tree as [3, 2, 2] where the order attribute comes in handy.

Its values are pure numbers, default is 0, the smaller the value, the higher the order, can also be negative.

The source, needless to say, is as follows:

flex-grow

I want this Flex item to grow as large as I want it to. The default is 0

Its value is a number, for example, if all the others are 1, if one is 2, it must be twice the size of the others.

flex-shrink

If the default value flex-shrink:1 is used to shrink all the entries, the shrink will be done as well. Once one of them is set to flex-shrink:0 and the others to 1, the former does not shrink when the space shrinks.

It could be a decimal, but I don’t know how it works with numbers other than 1 and 0.

flex-basis

This property defines the initial width of the Flex item in the main axis. The default is Auto, which is the original size of the project.

Note: When an element is set to both de flex-basis and width except auto

(or set height in the case of Flex-direction: column),

Flex-basis has a higher priority.

In addition to the

value, you can also set the content value, which automatically defines the size based on the content, but some browsers do not support this property. (I won’t go into details here, but this property is also interesting. Take a look at TODO

flex & flex:1

(singing) Finally wait for you ~ ~ fortunately I did not give up ~ ~ ~

Many of you have seen Flex :1. What the hell is he? Take your time

Start with the flex attribute, which is a short term for flex-grow, flex-shrink, and flex-basis. The default value is 0, 1 auto. TODO

This property has two shortcut values: auto (1 1 auto) and None (0 0 auto).

flex:1 === flex:1 1 0

flex-grow:1
flex-shrink:1
flex-basis:0%.Copy the code

The align - self properties

It allows individual projects to have different alignments than other projects,

The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it equals stretch.

Flex nested

It’s not too hard to tell, so if this element is a parent, we write it as the parent, and if it’s also a child of another element, we write it as the child. Very easy.

Grid layout

Flexbox is used to design horizontal or vertical layouts, while Grid layouts are designed to arrange elements in rows and columns in both dimensions.

Grid is more complex than Flex, of course, but I’m not going to learn it yet, so let’s put TODO in

Here is MDN’s introduction to Grid layout: Grid layout

floating

Floating, at first, we planned to let the picture float, and then the text automatically surround the picture, which was intended to achieve such effect. But later, we found that “Oh oh, not only the picture can float”, anything can float, so the range of floating has become larger.

As the scope increased, floats were used to implement page layouts, which allowed information in the source code to be arranged horizontally instead of vertically.

Now there are better layout techniques than floating, so floating is also considered the “traditional layout method.”

In this chapter, we will only cover the performance of the float command itself.

Two examples of floating generated text surround

Let’s look at a simple example to see what text wrap looks like after being floated:

<h1>Simple float example</h1>
<img src="..." alt="...">
<p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    ...
</p>
Copy the code

img {
  float: left;
  margin-right: 30px;
}
Copy the code

Text surround effect:

In MDN: let’s look at our initial sinking example. In this example, the first letter does not float, which is shown in figure 1 below. In the second image, the blue circle shows that the float is open

Multi-column floating layout

Floating can create multi-column layouts, although there may be some weird side effects that must be dealt with.

Two columns of the layout

Float :left; float:right; float:left; float:right; float:left; float:right

Look at the following example, two divs, one left and one right, set the width and float respectively

After setting the width, you will have the following effect (both must be set, otherwise one is the set width and the other is 100%, still split into two lines

Fixed-width layout: Setting the width to a fixed value as a percentage is called liquid layout.Copy the code

Three column layout

Once we have a two-column layout, it’s easy to play around with a three-column layout. If we write code like div1, div2, and div3, and we want it to look like div1, div2, and div3, we can float the first two divs to the left and the third to the right.

One more thing, if we want to write code like div1, div3, div2, and we want it to look like div1, div2, div3, we want the first div to float left, and the next two divs to float right

Remove the floating

As the element floats, text will surround it, causing a problem like this:

So we’re going to useclearProperty clearance float

After clearing the float

Problems caused by floating

In addition to the above mentioned to clear the float, there are some other problems, such as:

The entire width can be difficult to calculate

For example, if we add the following three lines to the clear float page above, we will see that the page style becomes… It’s a long story. The layout is damaged.

You will see that your layout is corrupted — there are no more than three columns in one row due to the extra width introduced by inner margins and boundaries, so the third column drops below the other two.

Box-sizing: border-box; Box model solution.

* {
  box-sizing: border-box;
}
Copy the code

After adding this code, the problem of the third div being pinned to the bottom is solved, but a new problem arises, as shown in the green box below: the footer is next to the border of the last div

It doesn’t look good. What can we do about it? Add margin-top? Let’s try

If we look at the figure above, margins don’t seem to work. Why is that?

Floating elements do not support the height of the parent element

For example, as shown in the figure below, the parent element body has no heightBut think of it another way. They take up space. Otherwise<footer>It will not be pushed to the bottom, so it looks like the floating child element is like the one having an affair

At this point, adding a margin to the non-floating element

• There are also some weird things about Floats — Chris Coyier’s excellent article on Floats Outlines others and how to fix them. TODO (if you have time, you can translate it. The article is not long.

Margin cannot be created between floating elements and non-floating elements. Since floating and non-floating cannot create margins, can I create margins between two non-floating?

How do you do that? Add a non-floating empty element between

<div class="clearfix"></div> 
Copy the code

The

At this point margin will work.

Float the background height of the item

The column height is not fixed, as in the previous example.

If we set the column height to a fixed value, then!! Inevitably there will be spillover problems. It looks like this:How to deal with it is a matter of opinion, but the final conclusion is still Flex YYds hahaha

Use a technique called faux Columns — this involves extracting the background (and boundaries) from the actual column and drawing a fake background on the parent element of the column that looks like the column’s background. Unfortunately, this will not handle column boundaries. See the tutorial on pseudo-column and pseudo-column fluid layout. TODO

In general, clearing floats makes things more complicated, and we want to be able to do the layout with CSS alone. If we add HTML capabilities, we’re going backwards in time

positioning

Well, to be honest, the article has been very long, and considering the above flex and float are the content I know but not completely (in short, is not good at this technical point, so write a bit long, positioning and the following some content is simple to say, simple over. If you write more than that must be the knowledge of the need to review

Simply put, positioning depends on the attribute position, which has several attributes and several positioning methods

Static Default value, static position, meaning normal position in the document flow. Relative to its original position, its original position is not occupied by the following element after it is located. Absolute Is positioned relative to the ancestor element whose last position is not static. If each ancestor element is satic, it is positioned relative to the root element. Once it’s positioned, the next element comes on top and takes its place. Fixed Indicates the fixed location relative to the viewport of the browser. Sticky sticky positioning, static positioning and fixed positioning combination. When the element is not in the preset position, it moves in a static position, and when it reaches the preset position, it stops moving.

In addition, you can set the hierarchy of elements through z-index.

Multi-column layouts

Essentially some application of attributes (which layouts aren’t, of course). But the multi-column layout properties are simpler

Parent:column-count: 3; // Split the content into three columnscolumn-width: 200px; // Control the width of each column (you cannot specify how wide each column is separatelycolumn-gap: 20px; // Change the spacing between columnscolumn-rule: 4px dotted rgb(79.185.227); / / similarborderProperty, the dividing line child element between columnsbreak-inside: avoid; // Make sure the contents of the column do not breakpage-break-inside: avoid; // An older version of the property aboveCopy the code

Responsive layout

Responsive layouts have become popular with media queries, and here is a typical example of a media query: the following styles are triggered when the screen width is at least 800px

@media screen and (min-width: 800px) {
  .container {
    margin: 10px; }}Copy the code

Other aspects of reactive layout are using techniques such as VW, VH, REM, EM, etc., or other layout methods such as grid layout, such as Max -, min- attributes.

There’s nothing to say.

It’s interesting to see one of these: viewport tags

See the
tag below in the of the document.

<meta name="viewport" content="width=device-width,initial-scale=1">
Copy the code

This meta tag tells the browser that the width of the page should be equal to the width of the device. The reason for this is that the browser uses a large width of the desktop as the width of the device, and renders the page in turn.

With this meta tag, the browser will render the page according to the width of the phone’s viewport, and those media queries will work as well, making them better suited to the phone.

Click here to see more<meta name="viewport"> 的 contentThe value of the attribute

Media Query Guide

OK, I thought this article was long enough, so I wanted to open another one, but the other one is always “Tomorrow, tomorrow…” In this case, simply learn to complete.

Let’s start with what a simple media query would look like:

@mediaThe media typeand(Media expression) {set of CSS rules}Copy the code

A media type media-type, which the browser matches and which type of media the snippet is used on, whether it is on screen or printed. There are a lot of media types, you can check them here, but the most common ones are probably all: All, print, computer screen, speech (I haven’t seen much of that either

A media expression, media-feature-rule, tells the browser when a CSS rule will take effect.

A set of CSS rules that take effect when the rule takes effect.

Of course, we can also specify only the media type, as in this case, we only apply the following style when the page is printed:

@media print {
    body {
        font-size: 12pt; }}Copy the code

Media expression

After specifying the media type, we can also use a rule to specify the media characteristics. For example, if we specify the media type is Screen, on this basis we can specify “the following CSS takes effect when the screen width is at least 800px”. The media characteristics rule is screen width above 800.

You can check out more multimedia features here, and here are just a few commonly used ones:

Width and height

To create a responsive design, we use min-width, max-width, and width media characteristics to apply a set of styles when specifying screen widths.

toward

Orientation can tell whether the screen is landscape mode or portrait mode. Here is how to apply the following styles when the screen is landscape mode

@media (orientation: landscape) {
    body {
        color: red; }}Copy the code

Use pointing device

What is a pointing device? First, the answer: mobile phones, pads, they do not have a mouse, a click is a click, there is no suspension effect.

Like a computer screen, it will levitate.

If we know that the user doesn’t have hover effects, we can set up a much wider range of interactions, because a finger touch screen might not be as accurate as a mouse.

Hover: The main input mode allows the user to hover over an element. It checks the device to see if it has a mouse hover effect. Is the main input mechanism a pointer device? If so, how accurate is it?

Pointer can take three values: none: the user does not use a pointer at all. It may be a command line, a keyboard, or a voice device. Fine: Things like Pointers, like our mouse; Coarse: It is similar to fingers, and the usage scenarios are mobile phone, pad, etc.

And, or, and not in media queries

Use and to connect the rules for “media type + media expression”, such as the following: Here is a media type and media expression and media expression. Viewport should be at least 400 pixels wide and the device should be horizontal

@media screen and (min-width: 400px) and (orientation: landscape) {
    body {
        color: blue; }}Copy the code

Use commas to join the rules for “media type + media expression”, such as the following: Viewport is at least 400 pixels wide or the device is in horizontal position

@media screen and (min-width: 400px), screen and (orientation: landscape) {
    ...
}
Copy the code

Not: linking with not reverses the meaning of the entire media query. For example, the following meaning is only valid if the orientation is vertical.

@media not all and (orientation: landscape) {
    ...
}
Copy the code

The breakpoint

What are the breakpoints for media queries? Where should I hit it?

Min-width: 800px; width: 800px;

As for where it should hit, it should move first, and when beyond a certain range, follow the style of the mobile terminal.

Write in the last

There’s a lot of on-and-off writing going on, and there’s actually a little bit of “traditional layout” and “browser support” behind it. TODO

I’ve explained how some of the older layouts work and why browsers support them but are not quite the same.

So that’s it ~ refueling refueling refueling!!

reference

Flex layout tutorial: Syntax chapter