cascading stylesheet

A, CSS2

The selector

  • Basic selector
    • Wildcard selector
    • Label selector
    • Class selectors
    • The id selector
  • Advanced selector
    • Descendant selector div p{}
    • Intersection selector div. Box {}
    • Union selector div,p{}

inheritance

color font-* text-*

Cascading line

Weight is

Common properties

The font

  • Color color
  • The font-family font
  • The font size – the size
  • The high line – height
  • Bold font – weight
  • font-style
    • normal
    • Italic If the English font itself is in italic, the italic style is displayed. If not, the italic font is replaced
    • Oblique is itself a font tilt independent of the style itself
  • Combine font: bold slant font/line height font

The text

  • Align the text – align
  • Modify the text – decoration
    • none
    • underline
    • line-though
    • overline
  • Indented text – indent

The box model

  • High wide width height
  • Padding padding
  • Border border
    • triangle
    p{
	width: 0;
	height: 0;
	border: 20px solid #fff;
	border-top-color: #f00;
	border-bottom-width: 0;
 }
Copy the code
  • From the outside margin

Clear default styles

<style> /* clear the default style, set the initial style */ *{margin: 0; padding: 0; }/* body,ul,li,p{ margin: 0; padding: 0; }*/ ul,ol{ list-style: none; } body{ color: #333; font-size: 14px; font-family: "Arial","Microsoft Yahei","SimSun"; } a{ color: #333; text-decoration: none; } </style>Copy the code

Overflow hidden

  • overflow
    • The visible by default
    • Hidden more than hidden
    • The scroll bar will appear if the content is unnecessary

The margin collapse of the upper and lower boxes is larger

Margin collapse of father-son boxes should be solved by taking a large value:

  • Use padding instead of margin
  • float

Text-align: center

Margin: 0 auto

floating

  • features
    • Being out of position of the standard flow affects the standard flow
    • The float of the child box does not overpower the padding and margin of the parent box
    • Float elements have inline block properties
  • Remove the floating
    • Set the height of the parent box
    • Last float sub box clear: both
    • Overflow: Hidden, *zoom: 1
    • Universal clear float 
      clearfix:after{
content:"";
display:block;
height:0;
visibility:hidden;
clear:both;
}
.clearfix{*zoom:1}
Copy the code

A Label pseudo class

  • : the link
  • : visited
  • : hover
  • : actived

background

  • background-color
  • background-image
  • Background – repeat tile
  • Background-position Position in the background is horizontal and vertical
    • Left /top/right/bottom
    • Pixel representation Sprite diagram
    • The percentage indicates that the width of the box is 100%
  • Image repeat position color
  • background-attachment
    • Fixed Background image is fixed

positioning

  • Relative position relative to original position
  • Absolute Is removed from the document flow relative to the nearest parent element with a position (relative, determinate, fixed any)
  • Fixed positioning fixed relative to the browser window
  • Sticky position relative to fixed combination, such as rolling a certain distance, element fixed
  • Z-index adjusts the hierarchy order, only for positioned elements

Second, the range of

Browser private prefixes:

The Gecko kernel CSS prefix is "-moz-" for firefox WebKit kernel CSS prefix is "-webkit-" for Chrome, Safari Presto kernel CSS prefix is "-O -" for Opera Trident kernel The CSS prefix is "-ms-", for example, IECopy the code

The selector

  • Property selector 
    Old: E[attr] E[attr] E[attr^="val"] New attribute selector E[attr^="val"] selects E elements with attr attributes beginning with val E[attr$="val"] Selects E elements with attr attributes ending with val E[attr*="val"] selects the E element that has the attr attribute and whose value contains valCopy the code
  • Structure pseudo-class selector 
    E:last-child{} E:last-child{} E:nth-child(n){} E:last-child{} E:nth-child(n){} Even (even) odd(odd) E:nth-last-child(n){} Nth-last-child (n){} E:nth-of-type(n){} Select the number expression 2n 2n+1 3n for the child element of type E in the parent element. Select E, the NTH child of the parent elementCopy the code
  • State pseudo-class selector 
        input[type=text]:enabled{
        color: #f00;
    }
    input[type=text]:disabled{
        color: #ff0;
    }
    input[type=radio]:checked{
        background: #f0f;
    }
Copy the code

Border selector

  • Border-radius left upper right upper right lower left lower
  • box-shadow:
    • X-axis offset Y-axis offset Fuzzy value Enhanced value Color inset
    • Positive: downward to the right

Background properties

  • Background-size Specifies the size of the background image
    • length
    • percentage
    • cover
    • contain
  • Background-origin specifies the location area of the background image
    • The placement of background images in the Content-box is based on the content area
    • Padding-box The layout of the background image is based on the padding area
    • Border-box Background images are placed in the border area as reference
  • Background-clip: Specify the drawing area of the background
    • The border-box background extends to the outer edge of the border (but below it).
    • The padding-box background extends to the outer edge of the padding. It’s not drawn to the border.
    • The Content-box background is clipped to the edge of the Content box.
    • Text The background is clipped to the foreground of the text.

The gradient

  • Background: linear gradient
  • Background: radial gradient

The user interface

  • resize
    • Either horizontal or vertical
    • Horizontal yes
    • Vertical, vertical, yes
  • box-sizing
    • Content-box Standard box model default
    • Border-box The width value of the weird box model box includes left and right padding+ left and right border+ content

Multi-column layouts

  • column-width
  • column-rule
  • column-gap
  • column-count

Elastic box

Display :flex/inline-flex axis flex-direction:row/row-reverse/column/column-reverse axis alignment Justify -cotent:flex-start/flex-end/center/space-around/space-between Align-items :stretch /baseline Justify a new line Flex-grow The default value takes effect when the sum of the widths is smaller than the container. Flex-grow the default value takes effect when the sum of the widths is larger than the container. Flex-shrink the default value takes effect when the sum of the widths is larger than the containerCopy the code

transition

Transition-property Transition-duration Transition duration transiton-delay Transition delay transition-timing-function Time function Linear uniform speed Ease slow ease - in accelerating ease - out slows ease - in-out accelerated after the first set of values with commasCopy the code

transform-2d

Rotate Rotate scale Zoom SkeW tilt transform-origin Deformation originCopy the code

transform-3d

Transform-style flat 2D preserve- 3D 3D perspective Usually 500px to 800pxCopy the code

animation

Animation-duration Specifies the animation duration. Animation-timing -function Specifies the time function. Animation-delay Animation delay time animation-Iteration -count Number of iterations infinite Animation-direction Whether to play backwards How does animation-fill-mode apply its style to its target before and after executionCopy the code