CSS Layout Basics

preface

This article is mainly for CSS zero-based design and testing personnel, to help learners quickly understand some CSS basic layout, conducive to good collaboration and communication with the development.

Here, three sections are selected for exposition: box model, block-level elements and inline elements, and basic layout. Each element is a box model, so it is necessary to understand the structure of the box model. The types of elements in the box model can be roughly divided into block-level elements and in-line elements, and there is another type of in-line block elements. Because a combination of the former two is similar to the former two, it will not be described here. The box model builds the entire page from the layout, and understanding the basic layout helps you design a page that the development wants more.

I. Box model

Each element in the page is treated as a rectangular box. This includes: margins, borders, inner margins, and the actual content.

Content – The Content area of the box, where text and images are displayed.

By default, width and height refer to the width and height of the content area. Increasing margins, borders, and margins does not affect the size of the content area, but does increase the overall size of the element. If you want to set the width to the total width of the box, you can use the box-sizing property to set the width. This article is not for development, so we will skip it.

Padding – Clears the area around the content. The Padding is transparent. Used to separate content so that it does not spread across the border.

Padding is like express box of the bubble, will we buy the goods and separated box, if there is no padding, imagine the content will be tightly to the border, for there is no frame element may seem too big problem, but if it is some frame elements, such as a button, there is no padding, borders box a hover button text, This is definitely not a pretty button.

Border – The Border around the inside margin and around the content. Located on the outside of the inner margin, can be a solid line, dotted line, dotted line, etc., can also set only up, down, left and right side of one or multilateral.

The use of borders is not limited to drawing borders, such as dividing lines, small triangles on bubbles can be drawn with borders.

Margin – Clears the area outside the border. The Margin is transparent. The transparent area surrounding the visible area of the box is used to control the distance between elements.

The distance between two adjacent elements depends on the margin (of course, the inner margin can be used for elements without borders). Each element is a box model and has a margin. What if two adjacent elements have a margin? In the horizontal direction, there is a property of margins merging in the vertical direction, and the final spacing in the vertical direction will be the larger of the two margins.

Block-level elements and inline elements

Before we look at element types, let’s talk about how elements are arranged, which relates to the CSS standard document flow.

Document flow refers to the way elements are automatically arranged by default from left to right and from top to bottom. Divide into rows from top to bottom and arrange elements from left to right in each row.

The direction of the document flow can be changed, but the direction is exactly how we are used to reading, and there is no reason to change it. This feature is designed for countries where reading habits may not be left to right.

Block-level elements

Block-level elements occupy a single row and fill the width of the parent element.
Can set height and width.
Common block-level elements:<div> <p> <form> <ul> <ol> <li>And so on.

Inline elements

Inline elements do not occupy a single row; adjacent inline elements can be placed on the same row.
Height and width cannot be set, they have no effect, the default width is the width of the text. But the height can be set via another property, the line height, which is described below.
Common inline elements:<span> <i> <button> <em> <strong>And so on.

The baseline

Inline elements have four lines, top, middle, baseline, and baseline. So why is the title here the baseline and not some other line?

In CSS, the default alignment of inline elements is baseline alignment. When the text size of the same line is inconsistent, baseline alignment is shown in the image below. The blue line is the baseline.

In addition, baselines are related to row height.

The high line – height

The line-height property sets the row height. Negative values cannot be used. It defines the minimum distance rather than the maximum distance between baselines in the element.

In the absence of inside and outside margins, the difference between the line height and the font size is usually considered to be the line margin.

A single line of text can be nearly vertically centered because of CSS“Upper and lower line spacing mechanism”This is said to be approximately centered because the vertical center position of text glyphs is generally lower than the vertical center position of true line boxes.

Vertical-align: middle is used to center multiple lines of text vertically.

The CSS part

.box {
    line-height: 120px;
    background-color: #f0f3f9;
}
.content {
    display: inline-block;
    line-height: 20px;
    margin: 0 20px;
    vertical-align: middle;
}
Copy the code

HTML part

<div class="box"> <div class="content"> Multi-line text vertically centered based on line height </div> </div>Copy the code

Sometimes the bottom of the picture is not aligned with the bottom of the text when the picture goes with the text. The reason is that the picture is a replacement element, and the element that can be replaced by modifying the content presented by an attribute value becomes the replacement element. For example: ,

Align vertical-align

The default value is baseline and baseline alignment. Vertical-align can only be used for inline elements and elements whose dispaly attribute value is table-cell. Vertical-align also does not work for elements that use float and absolute positioning attributes and cause the display attribute to evaluate to a block.

Use the vertical-align attribute to solve the problem of text misalignment at the bottom of the image.

Iii. Basic layout

Here are a few common layouts: positioning layouts, floating layouts (usually not used, floating is the devil), and elastic box layouts.

1. The location of the position

Static positioning static

HTML elements are positioned static by default.

Statically positioned elements are not affected by the top, bottom, left, and right attributes.

position: static; Elements are not positioned in any particular way; It is always positioned according to the normal flow of the page.
Relative positioning

The element is positioned relative to its default position.

Setting the top, right, bottom, and left attributes of a relative positioned element will cause it to adjust out of its normal position.

Set position: relative; The element will still occupy the original space in the document flow.

.relative-box {
    position: relative;
    left: 20px;
    top: 20px;
}
Copy the code

Absolute positioning

The element is positioned based on the ancestor of the most recently positioned non-statically.

Absolute can also be used with top, right, bottom, and left.

Set position: absolute; The element is removed from normal document flow and does not take up space on the page.

Before absolute positioning:

After absolute positioning:

``` .absolute-box { position: absolute; left: 20px; top: 20px; } ` ` `Copy the code

The big box here is the parent element of each box, and it adds a relative positioning attribute to it. As you can see, the box with absolute positioning moves forward, which is positioned relative to the nearest non-statically positioned parent element, and the original position is taken by the next element.

Absolute positioning is usually used to place some elements fixed in the four corners of a page or a region. Usually, we need to know two values of the upper, lower, and left to locate the elements. For example, the element in the upper right corner needs to know the value of the right and upper side of the page.

Fixed position

The element is positioned relative to the browser window, regardless of page scrolling.

Use top, right, bottom, and left for position adjustment.

Fixed positioned elements can also deviate from normal document flow.

Before fixing:

After fixed positioning:

.fixed-box {
   position: fixed;
   right: 10px;
   bottom: 200px;
}
Copy the code

Added fixed position box ran to the page in the bottom right hand corner, because its are relative to the positioning of the browser window, so no matter how to scroll, it is still in that position will not be rolling with page, what do you think, yes, is common in our browsing the web page of those annoying little advertising, but also is not only used to do boring things, If some pages are too long, there will be a back to the top button, which is also implemented using this property.

2. The float float

The float property defines in which direction the element floats. Traditionally this property has been applied to images to make text surround the image, but in CSS, any element can float. Floating elements, except inline-table, evaluate as a table, and all other elements evaluate as block blocks, regardless of what element it is.

The float property was originally designed to allow text to wrap around an image.

Floating element properties

wrap

Assume that the parent of the floating element is 200px wide and the child of the floating element is an image 128px wide. In this case, the width of the floating element appears as “wrap” and is 128px the width of the image.

The CSS part

.father {
    width: 200px;
}
.float {
    float: left;
}
.float img {
    width: 128px;
}
Copy the code

HTML part

<div class="father">
    <div class="float">
        <img src="1.jpg">
    </div>
</div>
Copy the code

Block and format the context

Display computes values in blocks. Inline-table is computed as a table, and the rest is computed as a block. Block elements can be displayed in a row, move in a specified direction, and stop when a parent boundary or adjacent floating element is encountered.

Breaking the document flow

Floating elements are not completely out of the flow of the document, and the position of the element followed by floating (without floating) starts from the position of the previous floating element.

Parent height collapse (destruction. when a child element floats, the height of the parent element will no longer be extended automatically.

Float has a lot of annoying side effects, so you don’t usually use it for layout.

3. Elastic box layout

The elastic box layout is a very useful and powerful layout method. The elastic boxes indicate how the space is distributed, how the content is aligned, and the visual order of the elements. The content can be easily arranged horizontally or vertically, along an axis, or broken into multiple lines. One of the most striking features of the flexible box layout is that it allows elements to adapt to different screen sizes and display devices.

An elastic box consists of an elastic container (Flex Container) and an elastic child element (Flex Item).

An elastic container is defined as an elastic container by setting the value of the display property to flex or inline-flex.

An elastic container contains one or more elastic child elements.

Generally, the elastic box layout can be used in an area where some elements are evenly distributed, or where one area is of a certain width and the other areas shrink with the screen size.

To distribute elements evenly in a box area:

One area is fixed in width and the other areas are expanded:

Some important properties

Illustration-content: Specifies how elastic elements in each row are distributed on the main axis of the elastic container. Apply to elastic vessels.

Align-items: Defines the alignment of elastic elements along the vertical axis of the elastic container. Apply to elastic vessels.

Values: flex – start | flex – end | center | baseline | stretch

Align-content: Defines how extra vertical space in an elastic container is allocated between and around rows of elastic elements. Applied to elastic vessels.

Align-self: Defines the value of a single elastic element that overrides the align-items property. Applied to elastic elements.

conclusion

Thank you for reading, welcome criticism, learn together.