Document flow definition, box model related knowledge

1. What is document flow

The document flow （normal flow）

          The web page is a multi-layered structure , Set style style , It is also a layer by layer setting , Finally, we see the top layer

            Document flow is the bottom layer of web pages

          The elements we create are by default , All in the document stream

          Elements are divided into two states ： In the document stream , Off stream

             

      The characteristics of elements in document flow

        A block element

           1: It's going to monopolize a line

           2: The width of the block element is by default the width of the parent element 100%

           3: By default, the height of the block element is extended by the content

        Inline elements （ Inline elements ）

           1: Don't monopolize a line

           2: Width and height are supported by content by default , You can't define the width and height by yourself

        Inline block element

           1、 Width and height can be set

           2、 And won't monopolize one line

      After the element leaves the document stream , No longer distinguish between block elements , Inline elements , It doesn't have the characteristics of elements in the document flow

      Elements that break away from the document flow will be more similar to inline block elements

2. Box model

Think of elements as boxes , rectangular px Can be positive or negative

        Box model , Frame model , The box model （box model）

        Content area  content  -- The refrigerator

        padding  padding  -- plastic

        Frame    border   -- The box

        Margin  margin   -- Express distance （ irrelevant , The box has no effect ）

1:border-width   The default value is usually 3px

Use border-width You can specify the width of each of the four borders

Can be followed by multiple values

   4 It's worth   On   Right   Next   Left

   3 It's worth   On   about   Next

   2 It's worth   Up and down   about

   1 It's worth   The up and down or so

except border-width,CSS There are also four border-xxx-width

  xxx The value of may be top right bottom left

It is specially used to set the width of the specified edge  

2:border-color   Set the color of the border   The default value is black

It's the same width ,color It also provides styles in four directions , Colors can be specified separately

border-xxx-color

3:border-style   Style the border

    Optional value ：

     none, The default value is , No borders

   solid Solid line

      double double

      dashed [dæʃt] Dotted line

     dotted ['dɔtid] Dot border

 style You can also specify the border styles of the four sides respectively , Rules and width Agreement ,

    It also provides border-xxx-style Four styles , To set four sides respectively

 border

   - Abbreviated style of border , Through it, you can set the style of four borders at the same time , Width , Color

   - And there is no order requirement

   - border One designation is to designate four edges at the same time, and cannot be designated separately

border-top border-right border-bottom border-left

  You can set the style of four edges separately , Rules and border equally , It only works on one side