Table of contents
I. Introduction
CSS Layout - Learn Web Development | MDN
CSS layout refers to controlling the position and size of HTML elements on the page through CSS styles. Common CSS layout methods include:
- Box model layout: Control the size and position of elements by setting attributes such as width, height, padding, border, and margin of elements.
- Floating layout: By setting the float attribute of the element, the element is separated from the document flow, and the floating layout is performed according to its position in the document.
- Positioning layout: Control the position of the element on the page by setting the position attribute of the element and attributes such as top, bottom, left, and right.
- Elastic box layout (Flexbox): Control the position and size of the element in the elastic box container by setting the display: flex attribute and flex-direction, justify-content, align-items and other attributes of the element.
- Grid layout (Grid): By setting the element's display: grid attribute and grid-template-columns, grid-template-rows, grid-column, grid-row and other attributes to control the position and size of the element in the grid container.
The above layout methods have their own characteristics and applicable scenarios, and developers can choose the appropriate layout method according to actual needs.
Source address : css layout
Two, flex layout (commonly used)
Flexbox - Learn Web Development | MDN
Flex Layout Grammar Tutorial | Novice Tutorial
In-depth understanding of flex-grow, flex-shrink, flex-basis Develop Paper
flex-grow, flex-shrink and flex-basis are the three properties used in CSS to set flex item.
- The flex-grow property specifies the proportion of the flex item's remaining space in the flex container. The default value is 0, which means that the element will not grow when there is enough space.
- The flex-shrink property specifies the proportion of the flex item when there is insufficient space. The default value is 1, which means that the element will shrink when there is not enough space.
- The flex-basis property specifies the initial size of the flex item in the main axis direction. The default value is auto, which means that the initial size of the element is determined by its content and other attributes (such as width, height, etc.). Priority max-width/min-width > flex-basis > width > box
Three, grid grid layout (commonly used)
grid - learn web development | MDN
The most powerful CSS layout - Grid layout - Nuggets
Four, float floating
Float - Learn Web Development | MDN
Float in CSS is a layout method that takes elements out of the flow of the document and floats them according to their position in the document. Floated elements are placed as close to the left or right side of the container as possible and occupy as much space in the container as possible. Floating elements can be achieved by setting the float property.
4.1 Simple example
.box {
float: left;
width: 150px;
height: 100px;
border-radius: 5px;
background-color: rgb(207, 232, 220);
padding: 1em;
margin-right: 25px;
}
4.2 Visual floating effect
The paragraph is not removed, but the text is pushed to the right by the floating box.
4.3 Clear floating
You should see that the second paragraph has stopped floating and will no longer follow the floating elements. The clear attribute accepts the following values:
- left: stop any active left float
- right: stop any active right float
- both: stop any active left and right floats
4.4 Clear Box Floating
[Introduction to Xiaobai] Float, Clear Float and BFC - Programmer Sought
<div class="wrapper">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<div class="content">
content
</div>
4.4.1 Set parent element height (not recommended)
.wrapper {
width: 100%;
height: 200px;
background-color: skyblue;
border: 1px solid #ccc;
}
It is not recommended for the following reasons:
- content overflow
When the content of the child element exceeds the height of the parent element, it will cause the content to overflow, thus affecting the effect of the layout. If you use a fixed height to set the height of the parent element, it will not be able to adapt to the height of the child element, which may cause the problem of content overflow.
- responsive layout
In a responsive layout, the layout needs to be adjusted according to different device sizes. If you use a fixed height to set the height of the parent element, you cannot adapt to different device sizes, which may cause layout confusion.
- high maintenance cost
When you need to modify the layout, if you use a fixed height to set the height of the parent element, you need to manually modify the height value, which increases maintenance costs. However, if you use other layout methods, such as using flexbox or grid layout, you can make layout adjustments more conveniently.
4.4.2 Adding sub-containers (not recommended)
.clear {
/* 清除左右浮动元素 */
clear: both;
}
<div class="wrapper">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="clear"></div>
</div>
Reason: Increase useless label structure
4.4.3 Change the affected element below (not recommended)
.content {
width: 500px;
height: 200px;
background-color: pink;
clear: both;
}
Reason: This method can only clear the floating above, but the floating element does not expand the parent element
4.4.4 Pseudo-elements
.wrapper::after {
content: "";
display: block;
clear: both;
}
4.4.5 Using BFCs
.wrapper {
width: 100%;
/* height: 200px; */
background-color: skyblue;
border: 1px solid #ccc;
overflow: hidden;
}
Five, position positioning (commonly used)
Orientation - Learn Web Development | MDN
5.1 Static positioning (static)
Static positioning (static) is the default positioning method for elements, and elements are laid out according to their order in HTML. Under static positioning, the position of an element will not be affected by top, bottom, left, right, z-index and other attributes, nor will it be affected by other elements. Therefore, statically positioned elements are laid out in their order in the HTML and do not break out of the document flow.
.positioned {
position: static;
background: yellow;
}
5.2 Relative positioning (relative)
.positioned {
position: relative;
background-color: yellow;
top: 50px;
left: 50px;
}
Relative positioning (relative) is positioned relative to the position of the original element in the document flow, and the reference object is the position of the element in the document flow.
Under relative positioning, the position of an element can be fine-tuned by setting properties such as top, bottom, left, and right, but the element still occupies its position in the document flow and will not affect the layout of other elements.
5.3 Absolute positioning (absolute)
Absolute positioning (absolute) is positioned relative to the nearest positioned ancestor element of the element, or relative to the upper left corner of the document if there is no positioned ancestor element. Under absolute positioning, the position of the element can be fine-tuned by setting properties such as top, bottom, left, and right, and the element will break away from the document flow, which may affect the layout of other elements.
**Under absolute positioning, the element will break away from the document flow and no longer occupy the original space, so its width is no longer limited by the parent element. **In this example, the .positioned element has position: absolute set, so it is an absolutely positioned element that no longer occupies the original space, and the width defaults to the width of the content. Since the width of the .positioned element is no longer constrained by the parent element, its width becomes the width of the content plus the width of the padding and border. If you need to set the width of the .positioned element, you can set it by setting the width attribute.
5.4 Cascading relationship (z-index)
z-index is a property used in CSS to control the stacking order of elements. In elements whose positioning methods are **relative, absolute, fixed, and sticky**, you can use the z-index attribute to control the stacking order of elements. The higher the value of the z-index attribute, the closer the element is to the top, overlapping other elements.
It should be noted that the z-index property is only valid for positioned elements, and is invalid for unpositioned elements.
5.5 Fixed positioning (fixed)
Fixed positioning (fixed) is a positioning method that allows an element to have a fixed position relative to the browser window. Under fixed positioning, the position of the element can be fine-tuned by setting properties such as top, bottom, left, and right, and the element will break away from the document flow without affecting the layout of other elements.
5.6 Sticky positioning (sticky)
It's basically a hybrid of relative position and fixed position, which allows a positioned element to behave as if it's relatively positioned until it scrolls to a certain threshold point (say, 10 pixels from the top of the viewport), after which it's became fixed. For example, it can be used to make a navbar scroll with the page up to a certain point, then stick to the top of the page.
6. Responsive Design
Responsive design - learn web development | MDN
7. Media inquiries
A beginner's guide to media queries - Learn web development | MDN
CSS Media Queries (Media Queries) is a technique used to apply different styles for different devices and screen sizes. Responsive design can be achieved by using media queries to make the webpage display the best display effect on different devices.
@media media-type and (media-feature-rule) {
/* CSS rules go here */
}
//简写
@media (media-feature-rule) {
/* CSS rules go here */
}
It consists of the following parts:
- A media type that tells the browser what type of media this code is intended for (e.g. print or screen);
- A media expression, which is a rule or test required for the included CSS to take effect;
- A set of CSS rules that will be applied when the test passes and the media type is correct.
media-type is the media type, which specifies the type of device to which the media query applies. Common media types include:
- all: apply to all devices;
- screen: suitable for computer screens, tablets, smartphones, etc.;
- print: for printers and print previews;
- speech: For speech synthesis devices such as screen readers.
8. BFC
Block Formatting Context - A Web Developer's Guide | MDN
Mastering Margin Collapse - CSS: Cascading Style Sheets | MDN
10. Practical layout
10.1 Single column
Explanation : general block-level box model, displayed layer by layer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
max-width: 1200px;
margin: 0 auto;
background-color: gray;
}
header,
.main,
footer {
height: 100px;
background-color: #fff;
}
header {
height: 10vh;
background-color: pink;
margin-bottom: 5vh;
}
.main {
height: 70vh;
background-color: skyblue;
margin-bottom: 5vh;
}
footer {
height: 10vh;
background-color: yellow;
}
</style>
<title>单列布局</title>
</head>
<body>
<header></header>
<div class="main"></div>
<footer></footer>
</body>
</html>
10.2 Double columns
Explanation : The double-column layout is fixed-width on the left and adaptive on the right. There are generally four methods, namely floating, positioning, flex layout, grid layout
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
10.2.1 Floating
.left {
float: left;
width: 200px;
height: 100%;
background-color: pink;
}
.right {
margin-left: 200px;
width: auto;
height: 100%;
background-color: skyblue;
}
10.2.2 Positioning
.container {
position: relative;
width: 100%;
height: 100vh;
}
.left {
position: absolute;
width: 200px;
height: 100%;
background-color: pink;
}
.right {
margin-left: 200px;
height: 100%;
background-color: skyblue;
}
10.2.3 flex layout
.container {
display: flex;
width: 100%;
height: 100vh;
}
.left {
width: 200px;
height: 100%;
background-color: pink;
}
.right {
flex: 1;
background-color: skyblue;
height: 100%;
}
10.2.4 grid layout
.container {
display: grid;
grid-template-columns: 200px 1fr;
width: 100%;
height: 100vh;
}
.left {
height: 100%;
background-color: pink;
}
.right {
background-color: skyblue;
height: 100%;
}
10.3 Three columns
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
Explanation : Fixed width on the left and right sides, self-adaptive in the middle
10.3.1 Floating
.container {
width: 100%;
height: 100vh;
overflow: hidden;
}
.left {
float: left;
width: 100px;
height: 100%;
background-color: pink;
display: block;
}
.center {
background-color: darksalmon;
margin: 0 100px;
height: 100%;
}
.right {
float: right;
width: 100px;
background-color: skyblue;
height: 100%;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
Note: The center element needs to be written at the end when laying out, because the middle box is opened by default. If placed in the first place, it will make the floating elements on the left and right sides fall down
10.3.2 Positioning
.container {
position: relative;
width: 100%;
height: 100vh;
}
.left {
position: absolute;
left: 0;
width: 100px;
height: 100%;
background-color: pink;
}
.center {
margin: 0 100px;
height: 100%;
background-color: darksalmon;
}
.right {
position: absolute;
right: 0;
width: 100px;
background-color: skyblue;
height: 100%;
}
10.3.3 flex layout
.container {
display: flex;
width: 100%;
height: 100vh;
}
.left {
width: 200px;
height: 100%;
background-color: pink;
}
.center {
flex: 1;
height: 100%;
background-color: darksalmon;
}
.right {
width: 200px;
background-color: skyblue;
height: 100%;
}
10.3.4 grid layout
.container {
display: grid;
grid-template-columns: 100px auto 100px;
width: 100%;
height: 100vh;
}
.left {
height: 100%;
background-color: pink;
}
.center {
height: 100%;
background-color: darksalmon;
}
.right {
background-color: skyblue;
height: 100%;
}
10.4 The Holy Grail and the Twin Wings
CSS Classic Three-Column Layout—Holy Grail Layout and Double Flying Wing Layout-Nuggets
The Holy Grail and Double Flying Wing load the middle module first, and then the left and right sides. Try not to use floats in the layout, you can use flex or grid layout, and then use order to adjust the order.
