The most complete way to learn Python full stack - WEB front end

CSS boost

The box model

1. Introduction to the box model

Box Model
All HTML elements can be thought of as boxes. In CSS, the term "box model" is used for design and layout.
Box Model Contains Contents
The CSS box model is essentially a box that encapsulates surrounding HTML elements, it includes: margins, borders, padding, and actual content
Explanation of each part
Margin: Clears the area outside the border, the margin is transparent.
Border: A border around the padding and outside the content.
Padding: Clears the area around the content, the padding is transparent.
Content: The content of the box, displaying text and images

2. Border style

border: composite style
border-color: border color
border-width: border width
border-style: border style
border-left: left border
border-right: right border
border-top: top border
border-bottom: bottom border

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>box model-border style</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            /*border width*/
            border-width: 2px;
            /*border color*/
            border-color: blue;
            /*border style*/
            border-style: solid;
            /*top border solid line*/
            border-top: 1px solid red;
            /*Left border Dotted line*/
            border-left: 2px dotted green;
            /*right border dotted line*/
            border-right: 3px dashed blue;
            /*Bottom border Double solid line*/
            border-bottom: 4px double purple;
        }
    </style>
</head>
<body>
<div>

</div>
</body>
</html>


Notice:
border-style: solid; (all four sides are solid lines)
border-sytle: solid dotted; (the upper line is a solid line, and the left and right are dotted lines)
border-style: solid dotted double; (the top is a solid line, the left and right are dotted lines, and the bottom is a double solid line)
border-style: solid doteed double dashed; (the top is a solid line, the right is a dotted line, the bottom is a double solid line, and the left is a dotted line)
color and size

3. Padding style

paddding: compound style
padding-top: top padding
padding-bottom: bottom padding
padding-left: left padding
padding-right: right padding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>box mode-padding</title>
    <style>
        div{
            /*Features:
            1,Padding will make the box bigger
            2,Padding cannot be set to a negative value*/
            width: 300px;
            height: 300px;
            border: 1px solid red;
            /*top padding*/
            padding-top: 50px;
            /*left padding*/
            padding-left: 50px;
            /*right padding*/
            padding-right: 50px;
            /*bottom padding*/
            padding-bottom: 50px;
        }
    </style>
</head>
<body>
<div>
    I am box mode
</div>
</body>
</html>


Notice:
padding: compound style
When the parameter value is one: up, down, left and right
When the parameter value is two: up and down, left and right
When the parameter value is three: up, left, right, down
When the parameter value is four: top right bottom left

4. Margin style

margin: compound style
margin-top: top margin
margin-bottom: bottom margin
margin-left: left margin
margin-right: right margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>box model-Margin</title>
    <style>
        /*Features:
        1,won't hold big boxes
        2,Can be set to a negative value*/
        div{
            width: 200px;
            height: 200px;
            /*Inline block element*/
          /*  1,Can set width and height
            2,will not wrap
            3,When multiple inline block tags are written together, they are arranged from left to right*/
            /*display: inline-block;*/
        }
        #div1{
            border: 2px solid green;
            /*top margin*/
            margin-top: 20px;
            /*!*Bottom margin*!*/
            margin-bottom: 20px;
            /*!*Left margin*!*/
            margin-left: 20px;
            /*!*right margin*!*/
            margin-right: 20px;
            /*margin: auto;*/
        }
        #div2{
            border: 2px solid red;
            margin-top: 30px;
        }
    </style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

2. CSS float

1. CSS float

document flow
Like flowing water, flowing water, electromagnetic flow is electromagnetic, document flow is element! The content displayed on the screen can be one-to-one corresponding to an element in the document
CSS float
Floating is actually to make the element deviate from the normal document flow. When the normal document layout cannot be resolved, it needs to deviate from the normal document flow.
CSS float pros and cons
Advantages: Make the element out of the document flow, move in the specified (left and right) direction, and stop when it encounters the parent boundary or adjacent element
Disadvantage: Floating will bring about the problem of height collapse.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS float</title>
    <style>
        #div1,#div2,#div3{
            width: 100px;
            height: 100px;
        }
        #div1{
            background: red;
             float: left;
        }
        #div2{
            background: green;
             float: left;
        }
        #div3{
            background: blue;
            float: left;
    </style>
</head>
<body>
<div id="div4">
    <div id="div1">i am red div</div>
    <div id="div2">i am green div</div>
    <div id="div3">i am blue div</div>
</div>
</body>
</html>

2. The solution to the height collapse

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The solution to high collapse</title>
    <style>
        .clearfix:after{
            content: " ";
            display: block;
            clear: both;
        }
        ul{
            width: 400px;
            /*height: 50px;*/
            border: 2px solid darkgoldenrod;
            /*overflow: hidden;*/
        }
        li{
            list-style: none;
            width: 60px;
            height: 50px;
            background: chartreuse;
            float: right;
        }
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
<ul class="clearfix">
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
    <li>li4</li>
    <li>li5</li>
</ul>
<div class="rap1">Life can't give you the sweetness, maybe I can</div>
</body>
</html>


The solution to the height collapse:
1. Add height to parent (not recommended)
2. Add overflow: hidden to the parent
3. Add an empty div
4. Use pseudo-elements:

.clearfix:after{
	content: "";
	display: block;
	clear:both;
}

3. Floating applications

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>floating app</title>
    <style>
        .clearfix:after{
            content: "";
            display: block;
            clear: both;
        }
        ul{
            width: 400px;
            border: 2px solid blueviolet;
        }
        li{
            list-style: none;
            width: 50px;
            height: 60px;
            background: chartreuse;
            float: right;
            /*small circle*/
            margin: 5px;
            line-height: 50px;
            text-align: center;
            /*Processing angle*/
            border-radius: 50%;
        }
    </style>
</head>
<body>
<ul class="clearfix">
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
    <li>li4</li>
    <li>li5</li>
</ul>
</body>
</html>


Features of float:
out of document flow
Float left/right until it encounters the parent element or another floating element
Floating causes the height of the parent element to collapse
Floating elements take up no space

3. CSS positioning

1. CSS positioning

Positioning is positioning an element anywhere on a web page
static
Static positioning (no positioning) default
relative
Relative positioning, positioning relative to the normal position (the position before the original position), but also occupying the position
absolute
Absolute positioning, without occupying a position, makes the element completely out of the document flow; without positioning the parent, it is offset relative to the entire document; positioning with reference to the nearest non-static ally positioned parent
fixed
Fixed positioning, relative to the browser window
Positioning square words:
left,right,top,bottom

2. relative positioning

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position</title>
    <style>
        #rap1{
            width: 100px;
            height: 100px;
            background: chocolate;
            /*relative relative positioning*/
            position: relative;
            /*Only after the positioning has the entire property, otherwise there is no*/
            left: 50px;
            top: 50px;
            /*margin: 50px;*/
        }
        #rap2{
            width: 200px;
            height: 200px;
            background: orange;
        }
    </style>
</head>
<body>
<div id="rap1">Life can't give you the sweetness, maybe I can</div>
<div id="rap2">Life can't give you the sweetness, maybe I can</div>
</body>
</html>


Relative positioning will still occupy the original position

3, absolute absolute positioning

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position</title>
    <style>
        #rap1{
            width: 100px;
            height: 100px;
            background: chocolate;
            /*relative relative positioning*/
            /*position: relative;*/
            position: absolute;
            /*Only after the positioning has the entire property, otherwise there is no*/
            left: 50px;
            top: 50px;
            /*margin: 50px;*/
        }
        #rap2{
            width: 200px;
            height: 200px;
            background: orange;
        }
    </style>
</head>
<body>
<div id="rap1">Life can't give you the sweetness, maybe I can</div>
<div id="rap2">Life can't give you the sweetness, maybe I can</div>
</body>
</html>


Absolute positioning is similar to floating, it will not occupy the original position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>absolute positioning</title>
    <style>
        .dv3{
            width: 50px;
            height: 50px;
            background: orange;
            position: absolute;
            /*Positioning relative to the document flow*/
            left: 50px;
        }
        .dv2{
            width: 100px;
            height: 100px;
            background: deepskyblue;
            /*When there is a positioned parent, the child is positioned relative to the parent*/
            position: absolute;
            left: 50px;
        }
        .dv1{
            width: 200px;
            height: 200px;
            background: olive;
            position: absolute;
            left: 50px;
            /*Parenting and positioning parent are two concepts*/
        }
    </style>
</head>
<body>
<div class="dv1">
    <div class="dv2">
        <div class="dv3"></div>
    </div>
</div>
</body>
</html>


Absolute positioning, if there is no parent, is relative to the entire document positioning, where parent positioning and parent are two concepts.
If there are multiple parent anchors, the closest anchor will be used

4, fixed fixed positioning

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fixed positioning</title>
    <style>
        .fixed{
            width: 200px;
            height: 200px;
            background: sandybrown;
            position: fixed;
            bottom: 0;
            right: 0;
        }
    </style>
</head>
<body style="width: 2000px; height: 5000px">
<!--scroll bar can appear-->
<div class="fixed"></div>
</body>
</html>

5. Level

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hierarchy</title>
    <style>
        ul{
            position: relative;
        }
        li{
            width: 100px;
            height: 100px;
            list-style: none;
            position: absolute;
        }
        .l1{
            background: aqua;
        }
        .l2{
            background: bisque;
            z-index: 1;
            /*The default is 0, the larger the value, the higher the level, similar to the ps layer*/
        }
        .l3{
            background: chocolate;
        }
        .l4{
            background: salmon;
            /*z-index: -1;*/
            /*Downgrading is generally not recommended*/
        }
    </style>
</head>
<body>
<ul>
    <li class="l1">li1</li>
    <li class="l2">li2</li>
    <li class="l3">li3</li>
    <li class="l4">li4</li>
</ul>
</body>
</html>


When multiple windows are together, there will be coverage, so which one should be displayed can be controlled by the level, the z-index is 0 by default, and the priority can be controlled through this

Fourth, reset the style

1,ResetCSS

reset style
When the browser parses certain tags, it comes with some styles, which leads to inconsistent effects when we write styles.
The company will write a set of resetcss belonging to its own company according to the business of each company.
We can use the resetcss provided by others to remove the browser's styles and start over to write our own styles

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>reset style</title>
    <link rel="stylesheet" href="css/chognzhi.css">
</head>
<body>
<div style="width: 200px;height: 200px;background: red"></div>
</body>
</html>


Tags: css3 html css locate

Posted by alex3 on Tue, 17 May 2022 09:56:41 +0300