Study Notes for CSS Box Model

Chapter 4 CSS Basics

Section 1 Understanding Style Inheritance (20180416)

What is Inheritance: Inheritance means that the child element will automatically have certain properties of the parent element

1. Inheritance happens automatically, the developer does not need to write any extra code
2. How not to inherit it? ? You can restyle the label
3. Not all CSS properties can be inherited by child elements
4. Inheritable properties: color font-size font-weight text-align
5. Non-inheritable properties: background-color
6. Inheritance is transitive
7. Some properties are generic in a certain area of ​​the page

Without inheritance, each element of the area must be styled, resulting in bloated code duplication

Scenarios where inheritance takes place

A CSS property of an element will inherit the parent element only if the following two conditions are met: 1. The element is an inheritable property 2. The property is not declared in the style sheet

Forced inheritance:

1. Also called explicit inheritance, refers to setting the CSS property value to inherit.
2. This is usually done for two reasons: to inherit some non-inheritable properties; to inherit properties that have already been declared.
3. Use structural elements to enclose other tags (elements); do not use text elements to nest other tags (elements)

---

Chapter 5 The CSS Box Model

Section 1 Classification of Boxes

1. Different elements may produce different types of boxes;
2. An element, what kind of box is generated depends on its CSS display property;

CSS display property

• display: none (does not generate boxes, does not occupy page space)
• display: inline (line box) {block boxes can nest line boxes; but line boxes cannot nest block boxes}
• display: block (block box)
• display: other values
• inline-block

The composition of the second box

• margin margin (distance from other boxes)
• border
• padding padding (the distance between the border and the content)
• content width and height of the content (the content between the opening tag and the struct tag)

Section 3 Block Box

contentcontent

meaning

• Meaning: Area used to hold text or other elements
• Similar to a box with space for things

Related properties

width

• Meaning: width
• not inheritable
• Default value: auto (temporarily considered to fill the entire available area)

• other values

  pixel, absolute height, fixed height: px;

  relative length: em (relative to the font size of the element to which the style is applied) percentage (%);

  Take the parent width and put it in percentage %)

• Word segmentation: When the content exceeds the width, the content will be automatically truncated and newline (truncated according to the word segmentation rules)

height

• Meaning: height
• not inheritable
• Default: auto
• Other values ​​(px/em/%)

overflow : beyond the hidden part

min-width

max-width

min-height

max-height

Note: Setting the maximum and minimum width and height is to ensure the current page layout effect and improve user experience

padding padding (padding area)

• Meaning: Indicates the distance from the border to the content; similar to the padding between the box and the bottom space
• Related properties:
• padding-top (meaning: top padding; non-inheritable; default value: 0px; other values: em/%)
• padding-right (meaning: left padding; non-inheritable; default value: 0px; other values: em/%)
• padding-bottom (meaning: bottom padding; non-inheritable; default value: 0px; other values: em/%)
• padding-left (meaning: right padding; non-inheritable; default value: 0px; other values: em/%)
• padding shorthand property, shorthand property (shorthand property is not a real CSS property, it is just a quick way to write CSS)

• Writing format:

  padding：上 右 下 左

  padding：上 左右 左

  padding：上下 左右

  padding：上下左右

• Example:

  padding:10px

  padding:10px 20px

  padding:10px 20px 30px

  padding:10px 20px 30px 40px

dorder border

• Meaning: The boundary separating the inner and outer parts (consisting of four parts: top, right, bottom, left)
• similar to box walls

• CSS related properties:

  border-style (the shorthand property styles all margins at once)

  border-color (a shorthand property that sets the color of all margins at the same time)

  border-width (a shorthand property that sets the thickness of all margins at the same time)

• top border

  border-top-style (meaning: top border style; non-inheritable; default value: none; other values: solid solid line, dashed dotted line, dotted dotted line, double double solid line, others)

  border-top-width (meaning: top border thickness; non-inheritable; default value: medinm; other values: medinm medium, thin thin line, thick thick line, px , em)

  border-top-color (the color of the border changes with the color of the text in the area; if no color is set, the default color is black)

• Top border writing format: border-top: thickness style color;

margin border

• Meaning: Indicates the distance between the border and the adjacent box (between two boxes), which is divided into four parts: top (top), right (right), bottom (bottom) and left (left).