Web Study Notes-CSS

The contents of the notes are reproduced from AcWing's web application class handouts, course link: AcWing Web Application Class .

CSS (Cascading Style Sheet) is a computer language used to add styles (fonts, spacing, colors, etc.) to structured documents (such as HTML documents or XML applications), and the CSS file extension is .css.

1. Style definition method

(1) The inline style sheet is
directly defined in stylethe attribute of the label and only affects the current label .

<img src="/Web Application Lesson/static/images/logo.png" alt="" style="width: 300px; height: 300px;">

(2) Internal style sheet (internal style sheet)
is defined in stylethe label, and the corresponding label can be affected by the selector, which can affect multiple labels in the same page .

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style type="text/css">
        img {
      
      
            width: 100px;
            height: 100px;
        }

        p {
      
      
            width: 50px;
            height: 50px;
            background-color: lightgreen;
        }

        /* 注意自定义class时首部要加上.号 */
        .lightblue_p {
      
      
            background-color: lightblue;
        }

        .big {
      
      
            width: 150px;
            height: 150px;
        }
    </style>
</head>

<body>
    <img src="/Web Application Lesson/static/images/logo.png" alt="">
    <img class="big" src="/Web Application Lesson/static/images/logo.png" alt="">
    <p>1</p>
    <p class="lightblue_p big">2</p>
    <p class="big">3</p>
    <p class="lightblue_p">4</p>
</body>

</html>

(3) The external style sheet
is defined in .cssthe style file and affects the corresponding label through the selector. Some pages can linkbe introduced with tags, which can affect multiple pages .

First /static/csscreate a file under the folder style.css, and move the previously defined style code to this file:

img {
    
    
    width: 100px;
    height: 100px;
}

p {
    
    
    width: 50px;
    height: 50px;
    background-color: lightgreen;
}

/* 注意自定义class时首部要加上.号 */
.lightblue_p {
    
    
    background-color: lightblue;
}

.big {
    
    
    width: 150px;
    height: 150px;
}

Then link the stylesheet in .htmlthe file :link

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 在此处链接样式表 -->
    <link rel="stylesheet" href="/Web Application Lesson/static/css/style.css" type="text/css">
</head>

<body>
    <img src="/Web Application Lesson/static/images/logo.png" alt="">
    <img class="big" src="/Web Application Lesson/static/images/logo.png" alt="">
    <p>1</p>
    <p class="lightblue_p big">2</p>
    <p class="big">3</p>
    <p class="lightblue_p">4</p>
</body>

</html>

2. Selector

(1) Label selector
For example, select all divlabels:

div {
    
    
    width: 200px;
    height: 200px;
    background-color: gray;
}

(2) ID selector
For example, select rect_1the label whose ID is:

#rect_1 {
    
    
    width: 200px;
    height: 200px;
    background-color: gray;
}

(3) Class selector
For example, select all rectangleclass tags (note: the one used to be on a page idis unique, classnot unique; and a tag can have multiple at the same time class, separated by spaces, and classthe effect of multiple is based on .cssThe definition order in the file is overwritten, and the style defined later overrides the style defined earlier):

.rectangle {
    
    
    width: 200px;
    height: 200px;
    background-color: gray;
}

(4) Pseudo-class selectors
Pseudo-classes are used to define special states of elements.

Chaining pseudo-class selectors:

:link: The style before the link visit
:visited: style after link visit
:hover: style on mouseover
:active: the style when the mouse is clicked and long pressed
:focus: focused style

positional pseudo-class selector: :selection is the :nth-child(n) of its parent tag $All elements with n$ children.

Target pseudo-class selector: :target:when $It takes effect when u r l$ points to this element.

The above are the more commonly used selectors. Now let’s look at a comprehensive example. The first is index.htmlthe code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="/Web Application Lesson/static/css/style.css" type="text/css">
</head>

<body>
    <div class="effect">1</div>
    <div id="mydiv">2</div>
    <div id="mydiv2">3</div>
    <a href="https://www.baidu.com">Baidu</a>
    <a href="#mydiv2">MyDiv2</a>
    <input type="text">
</body>

</html>

style.csscode:

div {
    
    
    width: 100px;
    height: 100px;
    background-color: lightblue;
    margin-bottom: 10px;
}

div:nth-child(3) {
    
    
    background-color: lightgreen;
}

.effect:hover {
    
    
    /* 鼠标悬停时扩大为原来的1.1倍 */
    transform: scale(1.1);
    /* 变化过程时间为300ms */
    transition: 300ms;
}

#mydiv:hover {
    
    
    background-color: lightcoral;
    transition: 300ms;
}

a {
    
    
    font-size: 30px;
}

a:link {
    
    
    color: lightblue;
}

a:visited {
    
    
    color: lightcoral;
}

a:hover {
    
    
    color: lightskyblue;
}

a:active {
    
    
    color: lightpink;
}

input {
    
    
    width: 100px;
    height: 25px;
}

input:focus {
    
    
    width: 200px;
    background-color: lightgray;
    transition: 300ms;
}

#mydiv2:target {
    
    
    width: 150px;
    height: 150px;
    background-color: lightsalmon;
    transition: 300ms;
}

(5) Composite selector
A selector composed of two or more basic selectors.

element1, element2: Select element element1and element at the same time element2.
element.class: Choose to contain elementelements of a certain type.
element1 + element2: Select the following element1element element2.
element1 element2: Select all elements element1within .element2
element1 > element2: Selects element1all element2elements whose parent tag is.

(6) Wildcard selector

*: select all tags
[attribute]: selects all tags with a certain attribute
[attribute=value]: selects all tags attributewith a value ofvalue

(7) Pseudo-element selectors
Treat specific content as an element, and selectors that select these elements are called pseudo-element selectors.

::first-letter: select the first letter
::first-line: select the first row
::selection: Select the selected content
::after: content can be inserted after the element
::before: You can insert content before the element

(8) Style rendering priority

Weight size, the more specific the selector, the greater the weight: !important> inline style > ID selector > class and pseudo class selector > label selector > general selector
When the weight is the same, the later style will override the previous style
Inherited from the parent element has the lowest weight

3. Color

(1) Predefined color values
black, white, red, green, blue, lightblueetc.

(2) Hexadecimal notation
Use 6-digit hexadecimal numbers to represent colors, for example: #ADD8E6.
Among them, the 1st-2th digits represent red, the 3rd-4th digits represent green, and the 5th-6th digits represent blue.
Shorthand: #ABC, which is equivalent to #AABBCC.

(3) RGB representation
rgb(173, 216, 230), where the first number represents red, the second represents green, and the third represents blue.

(4) RGBA notation
rgba(173, 216, 230, 0.5), the first three numbers are the same as above, and the fourth number indicates transparency.

(5) Color picking method

The color in the web page can be obtained in the debug mode of the Chrome browser
For other colors, you can use QQ screenshot software: directly cpress the key to copy the RGB color value; press shiftand chold the key to copy the hexadecimal color value.

4. Text

Length unit:

px: Pixels on the device
%: Percentage relative to the parent element
em: relative to the font size of the current element (times)
rem: relative to the font size of the root element (times)
vw: Percentage relative to viewport width
vh: relative to the percentage of the window height

(1) text-align
text-alignCSS properties define how inline content (such as text) is aligned relative to its block parent element. text-alignDoes not control the alignment of the block element itself, only the alignment of its inline content.

(2) line-height
line-heightCSS properties are used to set the amount of space for multi-line elements, such as the spacing of multi-line text. For block-level elements, it specifies the minimum height of the element's line boxes. For non-replaced inlineelements, it is used to calculate the height of the line box. When line-heightequal to height, the font can be centered vertically.

(3) letter-spacing
CSS letter-spacingproperties are used to set the spacing between text characters.

(4) text-indent
text-indentThe attribute can define the amount of indentation before the text content of the first line of a block element.

(5) text-decoration
text-decorationThis CSS property is used to set the appearance of the modified line of the text (underline, overline, through line/strikethrough or flashing). It is an abbreviation for text-decoration-line, text-decoration-color, text-decoration-style, and new properties.text-decoration-thickness

(6) text-shadow
text-shadowAdd shadows to the text. Multiple shadows can text-decorationsbe added to the text, and the shadow values are separated by commas. Each shadow value is (X方向的偏移量 Y方向的偏移量模糊半径颜色值)composed of .

Comprehensive example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="/Web Application Lesson/static/css/style.css" type="text/css">
</head>

<body>
    <div class="mydiv1">
        <h1>Title</h1>

        <div class="mydiv2">
            <p>First paragraph.</p>
        </div>

        <div class="mydiv3">
            <p>
                First paragraph.First paragraph.First paragraph.First paragraph.
                First paragraph.First paragraph.First paragraph.First paragraph.
                First paragraph.First paragraph.First paragraph.First paragraph.
                First paragraph.First paragraph.First paragraph.First paragraph.
                First paragraph.First paragraph.First paragraph.First paragraph.
                First paragraph.First paragraph.First paragraph.First paragraph.
                First paragraph.First paragraph.First paragraph.First paragraph.
            </p>
            <p>
                Second paragraph.Second paragraph.Second paragraph.Second paragraph.
                Second paragraph.Second paragraph.Second paragraph.Second paragraph.
                Second paragraph.Second paragraph.Second paragraph.Second paragraph.
            </p>
            <p>Third paragraph.</p>
        </div>

        <div class="mydiv4">
            <img width="70" src="/Web Application Lesson/static/images/logo.png" alt="">
        </div>

        <div>
            <a href="https://www.acwing.com">AcWing</a>
        </div>
    </div>
</body>

</html>

.mydiv1 {
    
    
    /* 文本居中 */
    text-align: center;
}

.mydiv2 {
    
    
    line-height: 100px;
    height: 100px;
    background-color: lightblue;
}

.mydiv3 {
    
    
    /* 字体大小 */
    font-size: 1.5rem;
    /* 文本两端对齐 */
    text-align: justify;
    /* 文本首行缩进2倍默认大小的长度 */
    text-indent: 2em;
    text-shadow: 3px 3px 2px lightgray;
}

.mydiv4 {
    
    
    height: 100px;
    background-color: lightgreen;
}

a {
    
    
    /* 去掉超链接的下划线 */
    text-decoration: none;
    font-size: 2rem;
}

/* 使图像在div中竖直居中 */
img {
    
    
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

5. Font

(1) font-size
font-sizeThe CSS property specifies the size of the font. Because the value of this property is used for calculations emand exlength units, defining this value may change the size of other elements.

(2) font-style
font-styleCSS properties allow you to choose the font or style font-familyunder it.italicoblique

(3) font-weight
font-weightThe CSS property specifies the thickness of the font. Some fonts provide only normaland boldtwo values.

(4) font-family
The CSS property font-familyallows you to set the font for the selected element by giving a sequential list of font names or font family names. Attribute values are separated by commas. The browser will choose the first font in the list that is installed on the computer, or @font-facethe font that can be downloaded directly by specifying.

Comprehensive example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="/Web Application Lesson/static/css/style.css" type="text/css">
</head>

<body>
    <div class="mydiv">
        <p>
            First paragraph.First paragraph.First paragraph.First paragraph.
            First paragraph.First paragraph.First paragraph.First paragraph.
            First paragraph.First paragraph.First paragraph.First paragraph.
            First paragraph.First paragraph.First paragraph.First paragraph.
            First paragraph.First paragraph.First paragraph.First paragraph.
        </p>

        <p>
            第二个段落。第二个段落。第二个段落。第二个段落。第二个段落。第二个段落。
            第二个段落。第二个段落。第二个段落。第二个段落。第二个段落。第二个段落。
            第二个段落。第二个段落。第二个段落。第二个段落。第二个段落。第二个段落。
        </p>

        <p>
            第三个段落。第三个段落。第三个段落。第三个段落。第三个段落。第三个段落。
            第三个段落。第三个段落。第三个段落。第三个段落。第三个段落。第三个段落。
            第三个段落。第三个段落。第三个段落。第三个段落。第三个段落。第三个段落。
        </p>

        <p>
            第四个段落。第四个段落。第四个段落。第四个段落。第四个段落。第四个段落。
            第四个段落。第四个段落。第四个段落。第四个段落。第四个段落。第四个段落。
            第四个段落。第四个段落。第四个段落。第四个段落。第四个段落。第四个段落。
        </p>
    </div>
</body>

</html>

.mydiv>p:nth-child(1) {
    
    
    font-size: 1.5rem;
    font-style: oblique;
    font-weight: bold;
    font-family: Consolas;
}

.mydiv>p:nth-child(2) {
    
    
    font-size: 1.2rem;
    font-family: "SimSun";
}

.mydiv>p:nth-child(3) {
    
    
    font-size: 1.3rem;
    font-family: "KaiTi";
}

.mydiv>p:nth-child(4) {
    
    
    font-size: 1.4rem;
    font-family: "Microsoft Yahei";
}

6. Background

(1) The background color of the element will be set background-color
in the CSS attribute , and the value of the attribute is either a color value or a keyword .background-colortransparent

(2) background-image
CSS background-imageproperties are used to set one or more background images for an element. Gradient color: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)).

(3) background-size
background-sizeSet the size of the background image. The image can retain its original size, or stretch to a new size, or scale to the size of the element's available space while maintaining its original proportions.

(4) background-repeat
background-repeatCSS properties define how the background image repeats. The background image can repeat along the horizontal axis, the vertical axis, both axes, or not at all.

(5) background-position
background-positionSet the initial position for the background image.

(6) background-attachment
background-attachmentThe CSS property determines whether the position of the background image is fixed within the viewport, or scrolls with the block containing it.

Comprehensive example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="/Web Application Lesson/static/css/style.css" type="text/css">
</head>

<body>
    <div class="mydiv1"></div>

    <div class="mydiv2">
        <div></div>
    </div>
</body>

</html>

.mydiv1 {
    
    
    width: 200px;
    height: 200px;
    background-image: url('/Web Application Lesson/static/images/logo.png');
    background-size: cover;
}

.mydiv2 {
    
    
    width: 200px;
    height: 200px;
    background-image: url('/Web Application Lesson/static/images/logo.png'),
        url('/Web Application Lesson/static/images/image1.png');
    background-color: lightblue;
    background-size: 100px 200px, 100px 200px;
    background-repeat: no-repeat;
    background-position: left top, 100px, top;
    background-attachment: scroll;
}

.mydiv2>div {
    
    
    width: 100px;
    height: 100px;
    background-color: lightblue;
    opacity: 0.5;
}

7. Border

(1) border-style
border-styleThe attribute is used to set the style of all borders of the element. Its content is: (border-top-style border-right-style border-bottom-style border-left-style), and the format of all subsequent attribute settings is the same.

(2) border-width
border-widthThe attribute is used to set the border width of the element.

(3) border-color
border-colorThe attribute is used to set the color of the four borders of the element.

(4) border-radius
border-radiusThe attribute allows you to set the rounded corners of the outer border of the element. Determines a circle when one radius is used, and an ellipse when two radii are used. The intersection of this (ellipse) circle and the border creates a rounded corner effect.

(5) border-collapse
border-collapseThe attribute is used to determine whether the borders of the table are separated or merged. In split mode, adjacent cells have independent borders. In merge mode, adjacent cells share borders.

Comprehensive example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="/Web Application Lesson/static/css/style.css" type="text/css">
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
    <img src="/Web Application Lesson/static/images/background.jpg" alt="">
    <table>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</body>

</html>

div {
    
    
    width: 200px;
    height: 200px;
    margin: 20px;
    background-color: lightblue;
    border-style: solid dotted solid inset;
    border-width: 2px 3px 4px 5px;
    border-color: lightcoral lightgreen lightpink lightsalmon;
    border-radius: 10px;
}

img {
    
    
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

td {
    
    
    border-style: solid;
    border-width: 3px;
    width: 20px;
    height: 20px;
}

table {
    
    
    border-style: solid;
    border-width: 3px;
    border-collapse: collapse;
}

8. Element display format

（1）display

block: Exclusively on one line, width, height, margin, paddingcan be controlled, and widththe default is 100%.
inline: Can occupy one line, widthand heightinvalid, horizontal marginand paddingvalid, vertical marginand paddinginvalid, widththe default is the width of its own content.
inline-block: Can occupy one line together, width, height, margin, paddingcan be controlled, and widththe default is the width of its own content.

(2) white-space
white-spaceCSS properties are used to set how to handle white space in elements.

(3) text-overflow
text-overflowA CSS property that determines how to signal overflow content that is not displayed to the user. It can be clipped, display an ellipsis or display a custom string.

(4) overflow
CSS properties overflowdefine what to do when the content of an element is too large to fit in a block-level formatting context. It is a shorthand property for overflow-xand overflow-y.

9. Padding and Margins

(1) margin
marginThe attribute sets the margin properties for all four (up, down, left, and right) directions for a given element.

Can accept 1~4 values (up, right, down, left order).
Four directions can be indicated respectively: margin-top, margin-right, margin-bottom, margin-left.
Possible values:
- length: fixed value, eg 20px.
- percentage: Relative to the width of the containing block, the margin is a percentage value, eg 20%.
- auto: Let the browser choose an appropriate margin by itself. Sometimes, in some special cases, this value can center the element.
Overlapping margins
- The top margin-topand bottom margins margin-bottomof a block are sometimes merged (collapsed) into a single margin whose size is the maximum of the individual margins (or only one of them, if they are equal), a behavior known as margin collapsing.
- Parent element and descendant element: When the parent element has no upper border and sum padding, the descendant element margin-topwill overflow, and after the overflow, the parent element margin-topwill take the maximum value with the descendant element.

(2) padding
paddingThe property controls the padding area on all four sides of the element.

Can accept 1~4 values (up, right, down, left order).
Four directions can be indicated respectively: padding-top, padding-right, padding-bottom, padding-left.
Possible values:
- length:Fixed value.
- percentage: Relative to the width of the containing block, the inner margin is a percentage value.

10. Box model

box-sizing: Defines user agenthow the total width and total height of an element should be calculated.

content-box: is the default value, setting borderand paddingwill increase the width and height of the element.
border-box: Setting borderand paddingwill not change the width and height of the element, but occupy the content area.

11. Location

position: Used to specify how an element is positioned in the document.

Targeting type:

A positioned element is an element positionwith a value of relative, absolute, fixedor sticky. (In other words, it's staticanything but .
A relatively positioned element is an element whose positionvalue is relative. topThe and bottomproperties specify a vertical offset from its normal position, leftand the and rightproperties specify a horizontal offset.
An absolutely positioned element is an element positionwith a value of absoluteor fixed.
A stickily positioned element is an element positionwith a value of sticky.

Value:

static: This keyword specifies that the element uses the normal layout behavior, that is, the element's current layout position in the normal flow of the document. At this time top, the , right, bottom, leftand z-indexattributes are invalid, where z-indexthe attribute specifies which layer the element is on the Z axis, that is, the direction perpendicular to the screen facing outward.
relative: Under this keyword, the element is first placed at the position when no positioning is added, and then the position of the element is adjusted without changing the page layout (so the initial position of the element without positioning is left blank). top, right, bottom, etc. adjust the offset of leftthe element relative to the initial position .
absolute: The element will be moved out of the normal document flow, and no space is reserved for the element. The element position is determined by specifying the offset of the element relative to the nearest non-positioned staticancestor element. Absolutely positioned elements can have margins set without merging with other margins.
fixed: The element will be moved out of the normal document flow, and no space is reserved for the element, but the position of the element is specified by specifying the position of the element relative to the screen viewport (viewport). The position of the element does not change when the screen is scrolled.
sticky: The element is positioned according to the normal document flow, and then relative to its nearest scrolling ancestor (nearest scrolling ancestor) and containing block (nearest block-level ancestor, nearest block-level ancestor), including elements, based on the values table-relatedof , top, rightand bottom. leftThe offset value does not affect the position of any other elements.

Comprehensive example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="/Web Application Lesson/static/css/style.css" type="text/css">
</head>

<body>
    <div class="div_outer">
        <div class="div_inner1">1</div>

        <div class="div_inner2">2</div>

        <div class="div_inner3">3</div>

        <div class="div_inner4">4</div>
    </div>
</body>

</html>

.div_outer {
    
    
    width: 300px;
    height: 400px;
    background-color: lightblue;
    margin: 100px;
}

/* 防止后代元素的margin-top溢出 */
.div_outer::before {
    
    
    content: "";
    display: table;
}

.div_inner1 {
    
    
    width: 100px;
    height: 100px;
    background-color: darkred;
    color: white;
    margin: 10px;
    display: inline-block;
    position: relative;
    z-index: 1;
}

.div_inner2 {
    
    
    width: 100px;
    height: 100px;
    background-color: darkgreen;
    color: white;
    margin: 10px;
    display: inline-block;
    position: relative;
    top: 30px;
    right: 100px;
}

.div_inner3 {
    
    
    width: 100px;
    height: 100px;
    background-color: darkred;
    color: white;
    margin: 10px;
    display: inline-block;
}

.div_inner4 {
    
    
    width: 100px;
    height: 100px;
    background-color: darkblue;
    color: white;
    margin: 10px;
    display: inline-block;
    position: absolute;
    top: 20px;
    left: 20px;
}

12. float

The (1) float
floatattribute specifies that an element should be positioned along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow (document flow) of the web page, although still retaining partial flow (as opposed to absolute positioning).

Since block layout is meant to be used, it modifies the computed value of the value floatin some cases : when or when used, it becomes uniform after use .displaydisplayinlineinline-blockfloatblock

Value:

left: A keyword indicating that the element must float to the left of the block container it is in.
right: A keyword indicating that the element must float to the right of the block container it is in.

(2) clear
Sometimes, you may want to force an element to move below any floated elements. For example, you might want a paragraph to remain adjacent to a floated element, but want the paragraph to be forced to be on a new line from the beginning. It is ready to use at this time clear.

Value:

left: Clear left float.
right: Clear the right float.
both: Clear the left and right floating.

13. Mid-term combat

Now let’s implement a user’s personal information card and station B’s personal information card with the effect shown in the figure below, and the code is not included due to space limitations:

insert image description here

14. flex layout

flexThe property sets how a flex item grows or shrinks to fit the space available in its flex container.

(1) flex-direction
flex-directionThe attribute specifies how the internal elements are laid out in the flex container, and defines the direction of the main axis (positive or negative).

Value:

row: The main axis of the flex container is defined to be the same as the text direction. The main axis start and main axis end are the same as the content direction.
row-reverse: Behaves rowthe same as but replaces the main axis start point and main axis end point.
column: The main axis and cross axis of the flex container are the same. The main axis start point is the same as the main axis end point and the front and rear points of the writing mode.
column-reverse: Behaves columnthe same as but replaces the main axis start point and main axis end point.

(2) flex-wrap
flex-wrapThe attribute specifies whether the flex element is displayed in a single line or in multiple lines. If line wrapping is allowed, this property allows you to control the stacking direction of the lines.

Value:

nowrap: Default value, no newline.
wrap: Line break, the first line is above.
wrap-reverse: Line break, the first line is below.

(3) flex-flow
flex-flowThe attribute is shorthand for flex-directionand flex-wrap. The default value is: row nowrap.

(4) justify-contentThe property defines how the browser distributes space between and around content items along the flex container's main axis and the grid container's inline axis.

Value:

flex-start: The default value, aligned along the starting point of the main axis.
flex-end: Align along the direction of the end point of the main axis.
start: left-aligned if the main axis is rowor row-reverse, top-aligned if the main axis is columnor column-reverse.
end: If the main axis is rowor row-reverse, align right, if the main axis is columnor column-reverse, align bottom.
space-between: Align both ends along the main axis.
space-around: Evenly distributes flex elements on the main axis. The distance between adjacent elements is the same. The distance of the first element to the start of the main axis and the distance of the last element to the end of the main axis will be half the distance between adjacent elements.
space-evenly: Evenly distributed in the specified alignment container along the main axis. The spacing between adjacent elements, the distance from the start of the main axis to the first element, and the distance from the end of the main axis to the last element are all exactly the same.
center: The elements in the container are centered, and there is no gap between the elements.

(5) align-items
align-itemsThe property sets the value on all immediate child nodes align-selfas a group. align-selfProperty sets the alignment of the item within its containing block in the direction of the cross axis.

Value:

flex-start: The element is aligned to the starting point of the cross axis.
flex-end: The element is aligned to the end of the cross axis.
center: The element is centered on the cross axis.
stretch: The element is stretched to the same height or width as the flex container in the direction of the cross axis (provided that the element has not been set in height or width).

(6) align-content
align-contentThe property sets how the browser allocates space between and around content items along the cross axis of the flex layout and the main axis of the grid layout.

Value:

flex-start: All rows are filled from the starting point of the cross axis, the starting edge of the cross axis of the first row is aligned with the starting edge of the container, and each subsequent row follows the previous row without a gap.
flex-end: All rows are filled from the end of the cross axis, the end edge of the cross axis of the last row is aligned with the end edge of the container, and all subsequent rows are close to the previous row.
center: All rows are filled towards the center of the cross axis of the container. Each row is next to each other and is centered relative to the container. The distance between the starting edge of the container's cross axis and the first row is equal to the distance between the end edge of the container's cross axis and the last row.
stretch: Stretches all rows to fill the remaining space. The remaining space is allocated equally to each row.

(7) order
orderDefine the order of flex items, the smaller the value, the higher the front.

(8) flex-grow
flex-growSet flexthe growth factor of the main size of the flex container, that is, the elements in the flex container increase as the container size increases ( nowrapunder the premise). Negative values are invalid and default to 0.

(9) flex-shrink
flex-shrinkThe attribute specifies the contraction rules of the flex element. The flex element shrinks only when the sum of the default widths is greater than the flex container, and the size of the shrinkage is based on the flex-shrinkvalue. Negative values have no effect and default to 1.

(10) flex-basis
flex-basisSpecifies the initial size of the flex element in the direction of the main axis. The value can be a length, for example 100px, or a percentage relative to the main axis size of its parent flex container. Negative values are not allowed. Default is auto.

(11) Abbreviations for flex
flex-grow, flex-shrink, .flex-basis

Common values:

auto：flex: 1 1 auto
none：flex: 0 0 auto

Comprehensive example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="/Web Application Lesson/static/css/flex.css">
</head>

<body>
    <div class="div_flex">
        <div class="div_flex_item">1</div>
        <div class="div_flex_item">2</div>
        <div class="div_flex_item">3</div>
        <div class="div_flex_item">4</div>
        <div class="div_flex_item">5</div>
        <div class="div_flex_item">6</div>
        <div class="div_flex_item">7</div>
        <div class="div_flex_item">8</div>
        <div class="div_flex_item">9</div>
        <div class="div_flex_item">10</div>
    </div>
</body>

</html>

.div_flex {
    
    
    width: 50%;
    height: 50vh;
    background-color: lightgray;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.div_flex_item {
    
    
    width: 100px;
    height: 100px;
}

.div_flex_item:nth-child(odd) {
    
    
    background-color: lightpink;
    order: 1;
}

.div_flex_item:nth-child(even) {
    
    
    background-color: lightgreen;
    order: 2;
}

15. Responsive layout

(1) mediaQuery: You can query various information of the screen, such as query width, and apply some CSS when the screen width meets certain conditions. For example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="/Web Application Lesson/static/css/responsive.css">
</head>

<body>
    <div class="container">
        <div class="card"></div>
    </div>
</body>

</html>

.container {
    
    
    background-color: lightgray;
    width: 80%;
    margin: 0 auto;
    padding: 10px;
}

.card {
    
    
    width: 80%;
    height: 100vh;
    background-color: blueviolet;
    margin: 0 auto;
}

@media (min-width: 768px) {
    
    
    .card {
    
    
        background-color: aquamarine;
    }
}

(2) Grid system: Divide the screen width into 12 parts in advance, and then set how many parts each element should occupy under different screen widths, for example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="/Web Application Lesson/static/css/responsive.css">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col col-md-6 col-sm-12">Username</div>
            <div class="col col-md-6 col-sm-12">Password</div>
            <div class="col col-md-12 col-sm-12">Self Introduction</div>
        </div>
    </div>
</body>

</html>

.container {
    
    
    background-color: lightgray;
    width: 80%;
    height: 100vh;
    margin: 0 auto;
    padding: 10px;
}

.col {
    
    
    height: 100px;
    background-color: lightsalmon;
    border: 1px solid gray;
    float: left;
    box-sizing: border-box;
    font-size: 30px;
    color: white;
    text-align: center;
    line-height: 100px;
}

/* 屏幕宽度大于等于768px时应用以下样式 */
@media (min-width: 768px) {
    
    
    .col-md-1 {
    
    
        width: calc(100% / 12);
    }

    .col-md-2 {
    
    
        width: calc(100% / 6);
    }

    .col-md-3 {
    
    
        width: calc(100% / 4);
    }

    .col-md-4 {
    
    
        width: calc(100% / 3);
    }

    .col-md-5 {
    
    
        width: calc(500% / 12);
    }

    .col-md-6 {
    
    
        width: calc(100% / 2);
    }

    .col-md-7 {
    
    
        width: calc(700% / 12);
    }

    .col-md-8 {
    
    
        width: calc(200% / 3);
    }

    .col-md-9 {
    
    
        width: calc(300% / 4);
    }

    .col-md-10 {
    
    
        width: calc(500% / 6);
    }

    .col-md-11 {
    
    
        width: calc(1100% / 12);
    }

    .col-md-12 {
    
    
        width: 100%;
    }
}

/* 屏幕宽度小于等于767px时应用以下样式 */
@media (max-width: 767px) {
    
    
    .col-sm-1 {
    
    
        width: calc(100% / 12);
    }

    .col-sm-2 {
    
    
        width: calc(100% / 6);
    }

    .col-sm-3 {
    
    
        width: calc(100% / 4);
    }

    .col-sm-4 {
    
    
        width: calc(100% / 3);
    }

    .col-sm-5 {
    
    
        width: calc(500% / 12);
    }

    .col-sm-6 {
    
    
        width: calc(100% / 2);
    }

    .col-sm-7 {
    
    
        width: calc(700% / 12);
    }

    .col-sm-8 {
    
    
        width: calc(200% / 3);
    }

    .col-sm-9 {
    
    
        width: calc(300% / 4);
    }

    .col-sm-10 {
    
    
        width: calc(500% / 6);
    }

    .col-sm-11 {
    
    
        width: calc(1100% / 12);
    }

    .col-sm-12 {
    
    
        width: 100%;
    }
}

(3) Bootstrap
According to the above example, you can find that if you manually implement the CSS code, it will be very long, so you can use Bootstrap directly. First, go to the official website to download: Bootstrap official website . Then staticcreate a new folder third_party(third party) in and put the downloaded Bootstrap in. bootstrap.min.cssIt can be used directly after being introduced in the code bootstrap.min.js, for example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="/Web Application Lesson/static/css/responsive.css">
    <link rel="stylesheet" href="/Web Application Lesson/static/third_party/bootstrap-5.1.3-dist/css/bootstrap.min.css">
    <script src="/Web Application Lesson/static/third_party/bootstrap-5.1.3-dist/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col col-md-6 col-sm-12">Username</div>
            <div class="col col-md-6 col-sm-12">Password</div>
            <div class="col col-md-12 col-sm-12">Self Introduction</div>
        </div>
    </div>
</body>

</html>

.container {
    
    
    background-color: lightgray;
    width: 80%;
    height: 100vh;
    margin: 0 auto;
    padding: 10px;
}

.col {
    
    
    height: 100px;
    background-color: lightsalmon;
    border: 1px solid gray;
    float: left;
    box-sizing: border-box;
    font-size: 30px;
    color: white;
    text-align: center;
    line-height: 100px;
}

The following types are defined in Bootstrap:

insert image description here

In addition, Bootstrap also provides many well-designed components, which can be learned and used directly on the official website according to the sample code, for example, to implement a simple and beautiful form as shown in the following figure:

insert image description here

code show as below:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="/Web Application Lesson/static/third_party/bootstrap-5.1.3-dist/css/bootstrap.min.css">
    <script src="/Web Application Lesson/static/third_party/bootstrap-5.1.3-dist/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <form>
            <div class="row">
                <div class="col-md-6 col-xs-12">
                    <div class="mb-3">
                        <label for="inputUsername" class="form-label">Username</label>
                        <input type="text" class="form-control" id="inputUsername" placeholder="Please input username">
                        <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
                    </div>
                </div>
                <div class="col-md-6 col-xs-12">
                    <div class="mb-3">
                        <label for="inputPassword" class="form-label">Password</label>
                        <input type="password" class="form-control" id="inputPassword"
                            placeholder="Please input password">
                    </div>
                </div>
                <div class="col-md-12 col-xs-12">
                    <div class="mb-3">
                        <label for="introTextarea" class="form-label">Self introduction</label>
                        <textarea class="form-control" id="introTextarea" rows="3"
                            placeholder="This person is very lazy, the introduction is nothing."></textarea>
                    </div>
                </div>
                <div class="col-md-6 col-xs-12">
                    <button type="button" class="btn btn-success" style="width: 100%; margin-top: 10px;">Submit</button>
                </div>
                <div class="col-md-6 col-xs-12">
                    <button type="button" class="btn btn-secondary"
                        style="width: 100%; margin-top: 10px;">Cancel</button>
                </div>
            </div>
        </form>
    </div>
</body>

</html>

CONTENTS

1. Style definition method

2. Selector

3. Color

4. Text

5. Font

6. Background

7. Border

8. Element display format

9. Padding and Margins

10. Box model

11. Location

12. float

13. Mid-term combat

14. flex layout

15. Responsive layout

Guess you like