Front-end css style --- web page layout (to be supplemented later)

web layout

  • web layout

    Web page layout can be understood as typesetting, there are many tools that can be used for typesetting, such as world PPT, ps and many other software

    Web typography refers to the elements we want to display on the browser using a specific format to display

There are three ways of web layout/typesetting

  • standard stream
  • floating stream
  • positioning flow

standard stream

Also known as document flow/normal flow, the so-called document flow is the flow typesetting of elements from left to right and top to bottom automatically during the element typesetting process.

Element classification:

  • Block level (exclusive line)
  • Inline (how big the text takes up)
  • Inline block level (occupancy position can be adjusted)

Typography

  • Vertical typesetting: When the element is block-level, use vertical typesetting

    Typesetting vertically (including inline blocks) when using block-level tags

  • Horizontal typesetting: When the element is inline or inline block level, use the horizontal typesetting method

    Typesetting horizontally when using inline tags

block-level tags:
div:  

floating stream

What is out of document flow?

  1. Floating flow elements out of document flow mean

    No more in-line, block-level, in-line block-level, no matter what level elements can be typed horizontally

    Elements of any level can be set to width and height

  2. Summary: Elements in float streams are much like block-level elements in standard streams

Code:

HTML code:
<div class="box1"></div>
<div class="box2"></div>


css code: 
.box1{
    width: 200px;
    height: 200px;
    background-color: red;
    float: left;
}

.box2{
    width: 300px;
    height: 300px;
    background-color: yellowgreen;
}
/* after the first float, The second one will automatically complete, It's a collapse, I'll talk about it later
/* if both float, Then it will be arranged at the same time as inline tags, If it is not enough, it will automatically wrap to the rear.(Belongs to the off-label document)

Notice:

There is only one typesetting method for floating flow, that is, horizontal typesetting, only left and right alignment, no top and bottom center alignment

Once floating flow is used, margin s cannot be used

Put two block-level elements on one line, two methods
1. Revise display The property value is inline-block
2. How to use floating stream
(1)
HTML code;
<div class="box1"></div>
<div class="box2"></div>


css code
.box1{
    width: 200px;
    height: 200px;
    background-color: red;
    display: inline-block;
}

.box2{
    width: 300px;
    height: 300px;
    background-color: yellowgreen;
    display: inline-block;
}

(2)
HTML code
<div class="box1"></div>
<div class="box2"></div>


css code
.box1{
    width: 200px;
    height: 200px;
    background-color: red;
    float: left;
}

.box2{
    width: 300px;
    height: 300px;
    background-color: yellowgreen;
    float: left;
}

What is out of document flow?

out of document flow

  • Completely detached: the space occupied by the element will be reclaimed, and the space will be allocated to the required label for use
  • Semi-detachment: who floats first in the same direction, who is in front, floats in different directions to find the left and right directions
Completely out of the flow of the document is all tabs floating


Display using three tab modules:  floating will be side by side, 
div1 and div2 after float, div3 will make up
 This is half out of document flow
HTML code
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

css code
.box1{
    width: 200px;
    height: 200px;
    background-color: white;
    border: 2px solid purple;
    float: left;
}

.box2{
    width: 300px;
    height: 300px;
    background-color: yellowgreen;
    float: left;
}
.box3{
    width: 300px;
    height: 300px;
    background-color: pink;
}
  • Floating stream snapping problem

When the width of the parent element is enough to display all the elements, the floated elements will be displayed side by side

When the width of the parent element is not enough to display all the elements, the floating element will lean down,

HTML code:
<div class="fad">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

css code:
.box1{
    width: 200px;
    height: 200px;
    background-color: white;
    border: 2px solid purple;
    float: left;
}

.box2{
    width: 300px;
    height: 300px;
    background-color: yellowgreen;
    float: left;
}
.box3{
    width: 300px;
    height: 300px;
    background-color: pink;
}

.fad{
    width: 500px;
    height: 500px;
    border: 5px solid black;
}
  • Floating element text wrapping phenomenon

When the picture is floated, the text will not be covered by the floating picture, but will be arranged around the floating picture

HTML code:
<div class="fad">
    <div class="box1"></div>
    <p>
Zhao Lusi, born on November 9, 1998 in Chengdu, Sichuan, is an actress from Mainland China and graduated from Mingdao University in Taiwan.  In 2016, participated by Mango TV Launched the singer talent show "Super Girl" audition.  In 2017, he entered the showbiz for his role in the costume romance drama "Phoenix Prisoner".  On April 25, 2018, he starred in the costume romance fantasy web drama "Oh! My Majesty the Emperor" was broadcast on Tencent Video, which played Luo Feifei, a girl born with a Mercury retrograde constitution in the play [1]  . 2019 On January 12, 2018, he won the annual Internet Potential Actor Award at the 3rd Jinguduo Internet Film and Television Festival [2]  ;On May 30 of the same year, the fantasy drama "Blue Sac Biography" starring the Republic of China was launched on Youku [3]  . 2020 In 2009, the starring costume fairy "Three Thousand Crows Killing" and costume romance drama "The Rumored Chen Qianqian" were broadcast successively. [4]  ,9 On the 15th, the starring urban romantic comedy "I, Like You" was broadcast.
    </p>
</div>

css code
.fad {
    width: 400px;
    height: 400px;
    border: 5px solid pink;
    color: #31b0d5;
}
.box1{
    width: 200px;
    height: 200px;
    background-image: url("../img/lusi1.jpg");
    background-size: 200px;
    background-repeat: no-repeat;
    border: 2px solid purple;
    float: left;
}
  • Floating Flow Typography Exercise

Standard flow for vertical layout and floating flow for horizontal layout

Layout from top to bottom

Layout from left to right

The horizontal direction can be divided into one left and one right, and then adjust the position

The first step is to cancel all default margins

*{

 margin: 0;

padding: 0;

}
  • Floating flow element height problem (collapse)

In the standard flow, the height of the content can support the height of the parent element

In the floating flow, the floating element blog garden supports the height of the parent element, and when the son element is floated, the height of the father becomes 0

The parent element seems to collapse, so it becomes a collapse

<div class="nva1">
    <div class="nva2"></div>
</div>


.nva1{
    background-color: #bce8f1;
    border: 1px solid purple;
}

.nva2{
    width: 200px;
    height: 400px;
    border: 1px solid purple;
    background-color: #31b0d5;
    /*float: left;*/
}
  • clear float

Use the top of the pixel directly, and cover the floating area with the pixel,

way 2

Use clear: none left right both

value

none: the default value, allows floating objects on both sides

left: Disallow floating objects on the left

right: prohibit floating on the right

both: do not allow floats on both sides

grasp two points

  1. Elements are loaded from top to bottom, left to right
  2. clear: left; works on itself and will not affect other elements. Once there is a floating element on the left, start the protection and prevent it from occupying the foot position
<div class="nva1"></div>
<div class="nva2"></div>


.nva1{
    width: 300px;
    height: 200px;
    background-color: #bce8f1;
    float: left;
}
.nva2{
    width: 200px;
    height: 400px;
    background-color: #31b0d5;
    clear: both;
}

Note: When the clear property is used, the margin-top property will be invalid,

  • remove float 3

partition wall

exterior wall method

Add an extra block-level element between two boxes

Add the additional element clear: both; attribute to this

Note that you can also use the margin-top and margin-bottom properties together to achieve the effect

clear float 4

The basic principle is the same as the interior wall method, but we use the pseudo-element selector to achieve,

Add .attribute: after or .attribute:before to the elements that need to be separated

overflow method

overflow: hidden; can be added to the parent class

positioning flow

Format:

position: relative

It needs to be used with 4 attributes

top: xxpx

left: xxpx

right: xxpx

bottom:xxpx

pending

Tags: css

Posted by karan23424 on Sat, 14 May 2022 10:49:31 +0300