Summary of css basic styles for Web Front-end development, and css styles for web Front-end development
Web Front-end development css basic style summary color and unit use text style (text)
- Font-style: font style italic and oblique italic
- Font-size: Set the font size.
- Font-weight: Specifies the font width and bolder width.
- Font-family: set text fonts, fonts, and books
- Font short attribute: style weight size family (Space) order must follow this format. Generally, after the short attribute is used, the line spacing letter-spacing should be placed behind the font attribute, otherwise it will overwrite.
Border and background other styles (table, list, transparency, cursor) day03 Box Model
The box model is divided into elements, margins, borders, and margins,
1. Set elements of a certain size
1). width: Set the element width. 2). height: Set the element height.
2. Set the padding
- Padding-top/bottom/right/left
- Padding
3. Set the outer margin (the distance from the border to the edge of the browser or to the next box)
- Margin-top/bottom/left/right
- Margin
4. Set the minimum and maximum sizes (when the width is set to the percentage, expand or contract the browser or change the screen or small screen display to prevent element misplacement or overflow)
- Min-width: the minimum value is the sum of the two div widths.
- Max-width: Maximum Value
5. Handling element content Overflow
- Overflow-x/y: x or y-axis overflow
- Overflow: Short Form: scroll sets the scroll bar (overflow processing method)
6. Change the element type
1). element types include:
- Inline line element: the width and height cannot be set on the page, and the row is not exclusive, B, span
- Inline-block in-line block-level element: a row cannot be exclusive, but the width and height can be set. img element
- Block-level element: exclusive row. You can set the width and height, p, and div elements.
2). Change the element type display:
- Element types can be converted to each other. After conversion, the element properties also change.
- Div is generally not converted into an in-Row Element and will be discarded.
3). Hidden element: display: none
7. Floating and blocking element Stack
- Float: left/right
- Eliminate elements stacked together: clear: both (both left and right are eliminated)
8. case:
Baidu page construction:
- Tip: to center the div, directly margin: 0 auto;
- In order to initially not execute the default features of the browser: * {margin: 0px; padding: 0px}
- To prevent div block overflow, set the maximum and minimum values. The minimum value is the sum of the left and right sides of the div.
- Vertical text center: line-height
- For navigation, add the link a label to the li label.
Layout style 1. Positioning Method position
- Static: default value. The element is a common element and the Document Stream is located from top to bottom.
- Relative, only top can be used, and left is relative to its previous position.
Fixed (fixed): located relative to the browser window,Frequently used !!!, The position before displacement is not occupied, and can be used up, down, left, right, and right,Common small advertisement TechniquesThe scroll bar keeps moving, and his position remains unchanged. He will leave the Document Stream and float on the top of the Document Stream. His position on the top, bottom, and left is relative to the edge. For example, top50px does not move 50px up, you can also set the buttom distance between the element and the top border to 50 PX, and the position of the pulled scroll bar will not change.
Absolute (absolute): An ancestor element whose relative position value is not static determines who changes the child element based on the changes of the ancestor element, which of the following cannot be static? The default value is static ),Displacement location between parent and child or between ancestor and descendant Elements
2. Positioning LayoutTop/bottom/left/right
3. z-indexUsed to set the display layers of elements and elements. Positive and Negative Numbers are acceptable.
Must be used with position
Transition, deformation 1. Transition: elements gradually change from one style to another
Attribute:- Transition-delay: sets the latency before transition.
- Transition-duration: Set the transition time
- Transition-property: sets the attributes of transition participants.
- Transition-timing-function: transition Rate (linear speed)
Transition: Short Form (property duration timing-function delay)
Reverse Transition:Paste the content set in hover to the div.
2. Deformation
- Transform: Specifies how to deform
- Transform: scaleX/Y (1.5) zoom 1.5 times
- Transform: rotate (360deg) Rotating 360 deg represents the degree, with the transition time works well
- Transform: skew (X axis angle, Y axis angle) skew Angle
- Transform: the distance between the X axis and the Y axis
