A. The outline attribute

  • Outline represents the outer outline of an element
    • No space
    • The default display is outside the border
  • The outline attributes are
    • outline-width
    • Outline -style: the value is the same as that of the border, such as solid and dotted
    • poutline-color
    • Outline: short properties for outline width, outline style, outline color, similar to border
  • Examples of application
    • Except for the focus outline effect of the A element and the input element
< span style> /* color: RGB (50, 50, 50); font-family: arial, sans-serif; font-size: 14.0px; background-color: RGB (255,255,255);" width: 100px; background-color: pink; outline: 10px solid black /* border:10px solid red */ } span { background-color: yellow; } </style> <body> <div class="div1"></div> <span>span</span> </body>Copy the code

2. The height – width attributes

  • Width: the width of the
    • Min-width: indicates the minimum width, which is greater than or equal to min-width regardless of the content
    • Max-width: indicates the maximum width. No matter how much the content is, the width is less than or equal to max-width
  • Height: height
  • Min-height: The minimum height, regardless of the content, the height is greater than or equal to min-height
  • Max-height: The maximum height, regardless of the content, the height is less than or equal to max-height

All HTML elements can be thought of as boxes, and in CSS, the term “box model” is used for design and layout.

CSS box model is essentially a box that encapsulates the surrounding HTML elements, including: == margin (margin), border (border), padding, actual content (content) four attributes. = =

The box model allows us to place elements in the space between other elements and the borders of surrounding elements.

Padding and margin attributes

3.1 the padding

  • Padding-left: left inside margin
  • Padding-right: right inner margin
  • Padding-top: Upper inner margin
  • Padding-bottom: Lower inner margin
  • Padding-top: Padding-right, padding-bottom, and padding-left are shorthand attributes
  1. Set the value clockwise: top, right, bottom, left
  2. If left is missing, left uses the value of right
  3. If bottom is missing, then bottom uses top

3.2 margin

  • Margin-left: the left margin
  • Margin-right: margin-right
  • Margin-top: margin-top
  • Margin-bottom: margin-bottom
  • Margin: short for margin-top, margin-right, margin-bottom, and margin-left

3.3 Up-down margin pass

3.3.1 margin – top

If the top line of a block-level element overlaps the top line of the parent element, the margin-top value of the block-level element is passed to the parent element

  • Margin-left :20px
    • Margin-left is not passed to the parent element
<style> .div1 { width: 100px; height: 100px; background-color: pink; } .div { width: 200px; height: 200px; background-color: red; } .div2 { width: 100px; height: 100px; background-color: black; If the top line of the block-level element overlaps the top line of the parent element, the margin-top value of the block-level element is passed to the parent element */ margin-left: 20px; } </style> <body> <div class="div1"></div> <div class="div"> <div class="div2"></div> </div> </body>Copy the code

  • margin-top:20px;
    • Margin-top is passed to the parent element

3.3.2 rainfall distribution on 10-12 margin – bottom

If the bottom line of the block-level element overlaps the bottom line of the parent element, and the height of the parent element is auto, the margin-bottom value of the block-level element is passed to the parent element

<style> .div1 { width: 100px; height: 100px; background-color: pink; } .div { width: 200px; background-color: red; } .div2 { width: 100px; height: 100px; background-color: black; If the bottom line of the block-level element overlapped the bottom line of the parent element, and the height of the parent element was auto, then the margin-bottom value of the block-level element was passed to the parent element */ * margin-left: 20px; */ margin-bottom: 20px; } </style> <body> <div class="div"> <div class="div2"></div> </div> <div class="div1"></div> </body>Copy the code

3.3.3 How to Prevent transmission Problems?

  • Padding-top \padding-bottom for the parent element
  • Set the border to the parent element
  • Trigger BFC: Set Overflow to Auto /hidden (Block formatting context)

.div1 { width: 100px; height: 100px; background-color: pink; } .div { width: 200px; height: 200px; background-color: red; /* padding-top: 5px; */ /* border-top: 1px solid #ccc; */ overflow: hidden } .div2 { width: 100px; height: 100px; background-color: black; Add padding 1.2 add border 1.3 Add BFC: */ margin-top: 20px; margin-top: 20px; margin-top: 20px; }Copy the code

3.4 Upper and lower margin folding

  • Two adjacent margins (margin-top, margin-bottom) in vertical direction may merge into one margin. This phenomenon is called collapse.

  • A horizontal margin (margin-left, margin-right) will never collapse

  • Calculation rule of final value after folding

    • The two values are compared and the larger value is taken

  • How to prevent margin collapse?

    • Set margins for only one of the elements

  • Fold the upper and lower margins between two sibling block-level elements

    • < span style> /* margin: 0px; padding: 0px; And the margin - top: 20 px; */. Div1 {width: 100px; height: 100px; background-color: pink; margin-bottom: 20px; } .div2 { width: 100px; height: 100px; background-color: red; margin-top: 20px; } </style> <body> <div class="div1"></div> <div class="div2"></div> </body>Copy the code

  • Margin folding between parent and child block-level elements

  • The block-level element folding problem may seem a bit confusing, but it actually has some practical applications

    • Margins between consecutive paragraphs, for example, need this folding effect

Four. Border properties

  • Border width
    • Border-top-width, border-right-width, border-bottom-width, border-left-width
    • Border-width is a shorthand attribute for the above four attributes
  • Border color
    • Border-top-color, border-right-color, border-bottom-color, border-left-color
    • Border-color is a shorthand attribute for the above four attributes
  • Border style
    • Border-top-style, border-right-style, border-bottom-style, border-left-style
    • Border-style is a shorthand attribute for the above four attributes

4.1 border-style Border style

  • None: There is no border. The border color and width are ignored
  • Dotted: The border is a series of dots
  • The bounding frame is a dashed line
  • Solid: The border is a solid line
  • Double: The border has two solid lines. The sum of the width of the two lines and the width of the whitespace is equal to the value of border-width
  • Groove: The border looks as if it was carved into the canvas
  • Ridge: In contrast to grove, the border appears to bulge out of the canvas
  • Inset: This border makes the frame look like it is embedded in the canvas
  • Outset: As opposed to inset, it makes the entire frame appear to bulge out of the canvas

4.2 border shorthand

  • Border: Sets borders in all four directions
  • Border color, width, style writing order arbitrary

border:1px solid #ccc
Copy the code

4.3 border implements various shapes

4.4 border – radius rounded corners

  • The properties related to fillet radius are
  • border-–-radius defines the radius of a quarter ellipse
    • The first value is the horizontal radius
    • The second value is vertical radius (if not set, follows the value of horizontal radius)
  • You can also set percentages
    • Refer to the width of the border-box: padding+border+content
  • Border-radius is an abbreviated attribute
  • The slash/front is the horizontal radius and the back is the vertical radius
  • The order of the four values is top-left, top-right, bottom-right, bottom-left (clockwise)
    • If bottom-left is not set, top-right is followed
    • If bottom-right is not set, follow top-left
    • If top-right is not set, follow top-left

5. The box – shadow attributes

  • The box-shadow property can set one or more shadows
    • Each shadow is denoted by
    • Multiple shadows are separated by commas and stacked from front to back
  • The common format is as follows:
    • Number 1: horizontal offset, positive offset to the right
    • Number 2: vertical offset, positive offset downward
    • Blur radius (blur radius)
    • Fourth: Extend the distance
    • : Shadow color, if not set, follows the color of the color property
    • Inset: The outer frame shadow becomes the inner frame shadow
/* box-shadow:x extension y extension blur radius color */. Div1 {height: 100px; width: 100px; background-color: pink; box-shadow: 5px 0px 5px red } span { background-color: yellow; } </style> <body> <div class="div1"></div> <span>span</span> </body>Copy the code

5.1 Shadow Exercise

5.1.1 Exercise 1: Shadows on three sides

< span style> /* box-shadow:x; box-shadow: y; box-shadow:x; width: 100px; background-color: pink; /* Box-shadow: 5px 5px 10px red, -5px 5px 5px red; */ /* Box-shadow: 0 5px 5px 5px rgba(0, 0, 0, 0.5); margin: 30px auto; } span { background-color: yellow; } </style> <body> <div class="div1"></div> </body>Copy the code

5.2 Shadow exercise two: hover appear shadow

< span style> /* box-shadow:x; box-shadow: y; box-shadow:x; width: 400px; margin: 30px auto; Border: 1px solid skyblue}. Div1 :hover {box-shadow: 0 5px 5px 5px rgba(0, 0, 0, 0.5); } .div2 { height: 100px; background-color: lightskyblue; text-align: center; line-height: 100px; font-size: larger; } < / style > < body > < div class = "div1" > < div class = "div2" > more configuration < / div > < / div > < / body >Copy the code

Vi. Text-shadow attribute (text shadow)

  • Text-shadow is similar to box-shadow and is used to add a shadow effect to text
  • Text-shadow also applies to ::first-line, ::first-letter

span { text-shadow: 5px 5px 5px red; } p::first-letter { text-shadow: 1px 1px 1px blue } p::first-line { text-shadow: 1px 1px 1px skyblue; } </style> <span> At around 5 am local time on May 5, three Myanmar policemen on duty at the Mandalay section of the China-Myanmar oil and gas pipeline were assassinated. The incident took place near Toma Village in Koh Sai Town district of Mandalay Province, near Koh Sai University. At present, Myanmar police have sealed off the scene and launched an investigation, the identity of the suspect is unknown, and no group has claimed responsibility. It is learnt that the operation of the China-Myanmar oil and gas pipeline has not been affected. </p>Copy the code

7. The box – sizing properties

  • Box-sizing is used to set the behavior of width and height in the box model
    • Content-box: padding and border are placed outside width and height
    • Border-box: add, add, add; border-box: add, add; border-box: add; border-box: add; border-box: add

7.1 box-sizing: content-box;

  • The actual width of the element = border + padding + width
  • The actual height of the element = border + padding + height

7.2 box-sizing: border-box;

  • The actual occupied width of the element = width
  • The actual occupied height of the element = height

7.3 Box Model