1, guide

Page creation process

  • Designers make designs

  • The front end engineer makes the page

    • Zoning (most important, most complicated)
    • Filled areas

How to divide areas

  • Use different, appropriate elements to represent different regions to divide regions
  • Set the size, position, background, and other styles of the area

Partition the CSS in a region

  • Each element creates a rectangular area in the page, which CSS calls a box.

  • A box is a box.

    • Box model The composition of a single box
    • Visual formatting model the arrangement, interaction, and influence of multiple boxes
    • Layout practical application

2. Overview of box model

The box model is one of the cornerstones of CSS. It dictates how elements appear on a page, and to some extent how elements interact with each other

  • Classification of boxes

    • What boxes does an element produce in relation to its display property

  • Composition of a box

    • It consists of margin, padding, border, and content

Classification of boxes – How are elements displayed

Block-level elements

  • Occupy all available widths, starting with a newline
  • Usually used with larger content, such as headings or structured elements

Inline elements

  • Take up only as much width as your content needs and place it one after the other in the same line
  • Usually used quickly with smaller content, such as some words selected to be bold or italic

So different elements generate different types of boxes, so what type of box does it generate depends on its display property

Each element has a default display attribute value, but it can be overridden

Properties: the display

Inheritance: No

Default value: inli’ne

Attribute values

Commonly used:

Display: None Generates no boxes

Display: inline line boxes

Display: block, the block boxes

Display :inline-block inline block box

More values: www.runoob.com/cssref/pr-c…

Composition of a box

  • Margin (distance from other boxes)
  • Border border
  • Padding Inner margin (distance between the border and the content)
  • Content (width and height of content)

Borders and:

  • It consists of border, padding, and content
  • When the browser is debugging, the element size displayed on the page refers to the size of the border box
  • Element, which overrides the border box by default

Fill the box:

  • Consisting of padding and content,
  • Strictly speaking, overflow refers to an overflow box

Content box:

  • Consists of the content
  • By default, the width and height attributes refer to the width and height of the content box
  • Width and height can be set using the box-sizing property

If the content in an element exceeds the given width and height attributes, the Overflow attribute determines whether to display behavior such as scroll bars.

Overflow

Add overflow attributes to the element

Content overflow box value:

  • overflw:visible

    The default value. Content is not pruned and is rendered outside the element box.

  • overflow:hidden

    The content is trimmed and the rest of the content is not visible. (Parts beyond the padding will be hidden)

  • overflow:scroll

    The content is trimmed, but the browser displays a scroll bar to view the rest of the content. (Hide spilled content and a scrollbar appears, but the content does not overflow the scrollbar appears)

  • overflow: auto;

    If the content is trimmed, the browser displays a scroll bar to view the rest of the content. (a)

Ex. :

.box2 { width: 100px; height: 100px; padding: 20px; background-color: aqua; /* Overflow: visible; /* Overflow: hidden; /* Overflow: scroll; (Hide overflow and scroll bar, but scroll bar does not overflow) Overflow: auto; Hide overflow content and a scroll bar appears, but the content does not overflow the scroll bar will not appear)}Copy the code

For example: The content overflow part is hidden, but it is displayed when the mouse moves in. You can set it in the following way

<div class="box2"> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veniam exercitationem sapiente unde accusantium soluta fugiat aspernatur nulla nostrum dignissimos, consequuntur repudiandae alias, labore velit laborum excepturi quis expedita at ad! </p> </div>Copy the code
.box2{ width: 100px; height: 100px; background-color: limegreen; overflow: hidden; Box2 :hover{height: 600px; }Copy the code

Content overflows because the box is not tall enough, so it can be displayed using the :hover selector to set the height.

Supplement:

Son box

Meaning: A box generated by an element consists of four regions, which can be combined to form an element subbox

  • Border – box border box
  • Padding – box filler box
  • The content – box content box
The content – box content box

Represents a complete box consisting only of content

  • By default, the width and height attributes refer to the width and height of the content box

  • This can be modified using the box-sizing property

    • Contnet-box Defaults to the width and height of the content box
    • Border-box Width and height of the border box

Calculation value of box size:

  • box-sizing: content-box; (Default content box)
  • box-sizing: border-box; (Border box automatically calculates width and height of content)

Ex. :

.box3{ width: 200px; height: 200px; border: solid; border-width: 10px; border-color: pink; padding: 10px; background-color: rgb(62, 219, 172); overflow: scroll; margin-top: 20px; /* Default contents box */ box-sizing: content-box; /* width and height of content */ box-sizing: border-box; }Copy the code
Border – box border box

Indicates a complete box consisting of border + padding + content

  • To enable browser debugging, the size of the element displayed on the page refers to the size of the border box,
  • The background of the element overrides the border box by default, which can be modified with background-clip
Padding – box filler box

Represents a complete box made up of padding + content

  • Strictly speaking, overflow refers to overflow of fill boxes
Outside the outline border
  • The location of the presence is outside of boder
  • The size of the outer border does not count towards the size of the box

Clear the inner and outer margins

Depending on the element, the browser applies default margins and inner margins to the element to facilitate readability

The default internal and external margins may be different for different browsers and elements, and you can reset all defaults to zero using the reset technique

3. Visual model

Basic Concepts:

Visual formatting Model is a mechanism that specifies the arrangement, interaction, final size and position of boxes on a page. (Each element in HTML generates boxes on the page. How the boxes are arranged and how they affect each other is defined by the visual formatting model.)

The core ideas

In the visual formatting model, each element in the document tree generates one or more boxes, and the final size and position of the boxes are influenced by these factors:

  • Box type and box size

    • The display property determines the type of the box, the dimensions of the four parts of the box model, the dimensions of the box itself
    • Width, height, padding, border, etc. involved in the box model are only for reference in the visual formatting model, and are not necessarily the final position and size of the box

  • Positioning system

    • Each element will belong to a certain positioning system, and different positioning systems will affect the size and position of the box

viewport

  • Viewport, usually the viewport area of the browser
  • Viewport size is only affected by the size of the browser’s visible window, not the content
  • When the size of the web page content exceeds the viewport size, the browser automatically appears a scroll bar

Containing block

  • Each element has a contain block, which is an area where the element is placed on the page
  • Typically, an element’s containing block is its parent element’s content-box

4. Overview of positioning system

The visual formatting model specifies three positioning systems: normal flow, floating, and absolute positioning

Any element must belong to a positioning system, and there may be some differences in the size and position of the element in the containing block in different positioning systems.

4.1 Normal Flow (Normal Flow)

Normal flow, also known as normal flow, document flow, normal document flow, streaming layout

Regular flow is the most common positioning scheme, and all elements are regular flow positioning by default

The box location

Boxes are placed vertically along the containing blocks (in HTML writing order)

The size of the box occupied in the containing block is the size of the entire box

Vertically, if the two margins are adjacent, fold

  • Vertical: Does not overlap horizontally
  • Margins are adjacent: there is no border, padding, or content between two margins
  • Merge: take the largest for all integers, take the smallest for all negative numbers, and add one positive and one negative number

4.2 Float

Elements are floating when their float property value is left or right

Float :none; float:none;

Float :left Floating position

Float :right Floats to the right

Floating box position

  • Left-floating boxes line up to the left
  • The right float boxes are arranged up and to the right
  • The top edge of the floating box shall not be higher than the top edge of the previous box
  • If there is no room left for the floating box, the box moves down until there is enough room for the box, and then moves left or right (newline)

When regular flow meets floating flow

Mix regular flow boxes and floating boxes
  • Floating boxes should be placed away from conventional flow boxes
  • Regular flow boxes ignore floating boxes when placed
  • Automatic height calculation of normal flow box ignores floating box (height collapse, normal flow box ignores floating box)
Clear float

  • Use clear:both on the last child element to prevent height collapse of the parent

  • The clear value:

    • None (does not clear the float)
    • Right (Clears the right float and the element is placed under the right float box)
    • Left (Clears the left float and places the element under the left float box)
    • Both (clear left and right floats, with elements placed under floating boxes)

Parent: after {

content:””;

display:block;

clear:both;

}

4.3 positioning

Every element must belong to one of these positioning systems. There are some differences in the size and position of elements in the containment block in different positioning systems

In general, an element is absolutely positioned if its position attribute is set

Position :static Default value, static positioning

Position :relative

Relative positioning

Offset from the original position of the box

The original space is the same, not out of the document flow

Usually used to decide which parent element to locate

Position: Absolute Absolute position

Absolute positioning is offset from parent elements with positioning attributes set (except static)

If not, offset with respect to the HTML element

Separate from the document flow and take up no space

  • When the float element is set to absolute positioning

    • Element’s float property is forced to none (float property is invalid)

  • The influence of absolute positioning elements on other elements

    • Absolute positioning elements have no effect on other elements

  • Absolutely locates the position of the element

    • Can be adjusted by top, right, bottom or left

Child absolute parent phase: child element absolute position, parent element relative position, parent element position changes, child element changes

Use z-index to change the stack order. The larger the value is, the higher the stack will be.

Ex. :

   <div class="o1">
        <div class="o2"></div>
        <div class="o3"></div>
        <div class="o4"></div>
    </div>
Copy the code
.o1{
    width: 400px;
    height: 400px;
    background-color: cornflowerblue;
    position: relative;
    top: 20px;
    left: 30px;
}
.o2{
    width: 90px;
    height: 90px;
    background-color: cyan;
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 3;
}
.o3{
    width: 90px;
    height: 90px;
    background-color: darkmagenta;
    position: absolute;
    top: 60px;
    left: 60px;
    z-index: 2;
}
.o4{
    width: 90px;
    height: 90px;
    background-color: rgb(65, 12, 211);
    position: absolute;
    top: 70px;
    left: 70px;
    z-index: 1;
}
Copy the code

You can also set the following effects through positioning:

Part of the picture is blocked, the mouse moves up the blocked part will appear, the blocked part will disappear from top to bottom

<section>
        <img src="./img/imgB_l.jpg" alt="">
        <div></div>
    </section>
Copy the code
section { width: 300px; height: 400px; position: relative; /* Through overflow: hidden; */ overflow: hidden; } img { width: 300px; height: 400px; } div { width: 300px; height: 200px; Background: rgba(219, 240, 128, 0.2); position: absolute; bottom: 0; } section:hover div { position: absolute; /* Move the image down by setting bottom */ bottom: -200px; /* Transition: all linear 2s; }Copy the code

Position: Fixed Indicates a fixed position

Fixed position relative to the browser window, does not change as the user scrolls

Position: Sticky position

Scrolling dependent on the user, in position:relative; And the position: fixed; Switch between

Sticky positioning takes effect only when one of the four thresholds is specified: top, left, right, and bottom