Day07 CSS class notes
1 Review
1. CSS Styles: background background-color background-image background-repeat background-position / background-position-x / background-position-y background-attachment background 2. CSS Styles: mouse cursor styles cursor: pointer / move 3. CSS Styles: list properties list-style-type list-style-position list-style-image list-style 4. CSS Styles: table properties table-layout: fixed border-collapse: collapse border-spacing cpation-side empty-cells 5. Combination selector 5.1 Descendant element selector 5.2 Child Selector 5.3 Intersection selector 5.4 Union selector 6. Pseudo class selector :link :visited :hover :active
2. In depth explanation of box model
2.1 composition of box model
① Related concepts of box model
w3c treats each element as a box, and the page layout is the stacking of boxes. The knowledge points of the box model include the following components:
Content: it is the core area of the box. The text content of the element and the descendant elements are displayed in the content area.
padding: the distance between the content and the box boundary.
Border: the border of the box.
Outside margin: outside the boundary of the box, it is the distance between the box and other boxes.
② Factors affecting box size
1. The size of the box is determined by the size of the content, the size of the inner margin and the width of the border Box size = Content size + padding + Border width 2. The size of the outer margin does not affect the size of the box!
2.2 content area in box
① Set the CSS property of the width and height of the content area
| CSS property name | function | Attribute value |
|---|---|---|
| width | Set content area width | length |
| min-width | Sets the minimum width of the content area | length |
| max-width | Sets the maximum width of the content area | length |
| height | Set content area height | length |
| min-height | Sets the minimum height of the content area | length |
| max-height | Sets the maximum height of the content area | length |
② Rules for setting width and height values
1. The maximum and minimum width and height are generally not set together with the fixed width and height. 2. The maximum and minimum width and height settings are mainly used to limit the width and height calculated by default. 3. Use percentage to set the element width and refer to the parent element content width; Use the percentage to set the height of the element to reference the content height of the parent element. 4. Use percentage to set the element height. If the parent element has no fixed height, it is invalid!
③ Calculation rule for the default content width of block level elements
Default total width of block level elements = Parent element content width - The left and right margins of the element Default content width for block level elements = Parent element content width - The left and right margins of the element - The left and right margins of the element itself - Width of left and right border of element
2.3 padding of inner edge of box
① Related CSS properties
| CSS property name | function | Attribute value |
|---|---|---|
| padding-left | Set left inner margin | length |
| padding-right | Set right inner margin | length |
| padding-top | Set the upper and inner margins | length |
| padding-bottom | Set lower inner margin | length |
| padding | Set interior margins in multiple directions | Multiple lengths separated by spaces |
② Setting rules for padding composite properties
padding: Four directions; padding: Up, down, left and right; padding: Up, left, right and down; padding: Upper right lower left;
③ Rules for inner margin values
1. Use the percentage to set the inner margin, which refers to the width of the parent element content regardless of the inner margin in any direction. 2. The value of the inside margin cannot be negative.
④ Rules for setting inner margins for elements in different display modes
1. In line elements can set the left and right inner margins perfectly, and the upper and lower inner margins are not perfect! 2. Block level elements and inline block elements can perfectly set the inner margin in four directions.
2.4 border
| CSS property name | function | Attribute value |
|---|---|---|
| border | Border compound properties | |
| border-style | Border style | none: no style, default value Solid: solid line. Dashed: dashed line. Dotted: dotted line. Double: double solid line. |
| border-width | Border width | length |
| border-color | Border color | colour |
| border-left border-left-style border-left-color border-left-width border-right border-right-style border-right-color border-right-width border-top border-top-style border-top-color border-top-width border-bottom border-bottom-style border-bottom-color border-bottom-width |
**Note: * * border width cannot be set by percentage!
2.5 outer margin margin
① Related css properties
| CSS property name | function | Attribute value |
|---|---|---|
| margin-left | Left outer margin | length |
| margin-right | Right outer margin | length |
| margin-top | Upper outer margin | length |
| margin-bottom | Bottom outer margin | length |
| margin | Multi direction outer margin | Multiple lengths separated by spaces |
② margin setting rules
Setting rules of margin composite attribute:
margin: Four directions; margin: Up, down, left and right; margin: Up, left, right and down; margin: Upper right lower left;
Rules for setting margin value:
1. Use the percentage to set the outer margin, which refers to the width of the parent element content in either direction. 2. The outer margin can be set to a negative value 3. Block level elements set the left and right outer margins to auto，Implementation is horizontally centered in the parent element.
Set the outer margin for elements in different display modes:
1. In line elements can have left and right outer margins. Setting up and down outer margins is invalid! 2. Block level elements and inline blocks perfectly set the outer margins in 4 directions.
③ margin collapse
What is margin collapse?
1. margin Collapse occurs only for block elements 2. The upper margin of the first child element collapses on the parent element, and the lower margin of the last child element collapses on the parent element.
How to solve margin collapse?
Scheme 1: set the inner margin for the parent element as long as the inner margin is not 0. Scheme 2: set the border for the parent element, and the border width is not 0 Scheme 3: setting for parent element CSS Properties: overflow:hidden
④ margin merge
What is margin merge?
1. margin Merging occurs only for block elements 2. The lower margin of the upper sibling element is merged with the upper margin of the lower sibling element.
How to solve margin merging?
No need to solve!
2.6 content overflow
| CSS property name | function | Attribute value |
|---|---|---|
| overflow | Set how content overflow is displayed | Visible: visible, the default value. hidden: hide the overflow part. auto: if the content overflows, there will be a scroll bar. Scroll: there is a scroll bar whether the content overflows or not. |
| overflow-x | Set the display mode of horizontal content overflow | ditto |
| overflow-y | Set the display mode of vertical content overflow | ditto |
2.7 hidden elements
Hidden elements can be realized by setting the CSS attribute display: none or visibility:hidden.
Differences between the two:
display The element does not occupy a position after hiding. visibility After the element is hidden, it is invisible but still occupies a position.
3 style inheritance and default styles
3.1 style inheritance
Some styles can be inherited and used by descendant elements.
The inherited styles include font style, text color and text style (except vertical align)
Styles that cannot be inherited include: box model related (width and height, inner and outer margins, border), background, etc
3.2 default style
Some elements have their own default styles
p The element has its own top and bottom margins h1 ~ h6 With top and bottom margin, bold font and font size ul,ol With upper and lower outer margins and left inner margins body Comes with 8 px Margin em With italics strong With bold style a With text color and underline .....
3.3 inherited style, default style and directly set style
Priority relationship of three style sources:
Style directly > The default style that comes with the element > Styles inherited from ancestor elements