If this article is useful to you, you can search my wechat public number: climb, which will push the latest blog articles in time, we make progress together oh!

For a better reading experience, check out the latest content at climbtw.com at blog.climbtw.com.

This article mainly involves the introduction of CSS, basic style, box model, positioning mechanism, BFC, selector, CSS3 and so on.

---

directory

• 1 introduction
  • 1.1 Basic CSS Syntax
• 2 Basic CSS styles
  • 2.1 Description of px, EM and REM units
  • 2.2 CSS Font (5 Common attributes)
  • 2.3 CSS Text (14 Common Attributes)
  • 2.4 CSS Background (8 Common Attributes)
  • 2.5 CSS Outline (Four Common Attributes)
  • 2.6 CSS Links: There are four states
  • 2.7 CSS List: Modify the tags of the entries (Four common attributes)
  • 2.8 CSS Table (Five Common Attributes)
• 3 CSS Box Model, margin collapse (4 common attributes)
  • 3.1 Summary of horizontal and vertical center
    • 3.1.1 Transformation of element Display mode (2 common attributes)
  • 3.2 Box model attributes (2 common attributes)
• 4 CSS location mechanism
  • 4.1 CSS float
    • 4.1.1 Clearing floats
  • 4.2 the CSS positioning
• 5 Block formatting Context (BFC) Block formatting context
  • 5.1 Processing method of single-line text and multi-line text overflow hiding
• 6 CSS selector
  • 6.1 Basic selectors
  • 6.2 Compound selectors
  • 6.3 Add a transparent mask to the element over the mouse (pseudo-element selector application)
• 7 Three features of the CSS
  • 7.1 Rules for calculating the weights of the CSS
• 8 Other attributes are added
  • 8.1 CSS size
  • 8.2 Other Attributes
• 9 Sprite graph technology
• Sliding door technology
• 11 New CSS3 features
  • 11.1 CSS3 Font: Use a customized font
  • 11.2 CSS3 text: Text shadow, auto-wrap mode, multi-column display
    • 11.2.1 Multi-Column Display
  • 11.3 CSS3 background: size, area
  • 11.4 CSS3 borders: Rounded corners, border shadows, box model types
  • 11.5 range of transition
  • 11.6 CSS3 2D Transformation
  • 11.7 CSS3 3D transformation
    • 11.7.1 Rotating Cast diagram: 3D transformation example
  • 11.8 range of animation
    • 11.8.1 Setting of animation group
  • Flex: Flex layout (Flex layout)
• 12 Prefix of browser properties

---

1 introduction

Reference: CSS reference manual on W3school website.

• CSSCascading Style Sheets: Cascading Style Sheets
• Cascading style sheet priority: high to low
  • ! importantstyle
  • Inline style/inline style
  • Internal style sheet
  • External style sheets
  • Browser Default Settings

1.1 Basic CSS Syntax

CSS rules: Selector + one or more declarations. CSS comments: /*… * /

For example:

p { color: red; font-size: 14px; }
p { color: #ff0000; }
p { color: #f00; }
p { color: rgb(255.0.0); }
p { color: rgb(100%.0%.0%); }
p { color: rgba(255.0.0.0); }
p { font-family: 'sans serif'; }  /* If the value is several words, the value is quoted */
p {					/* Readability */
  text-align: center;
  color: black;
  font-family: arial;
}
Copy the code

Note that:

• The last rule is you don’t need to addA semicolonBecause a semicolon is one in EnglishseparatorIs not the closing sign. However, most experienced designers will add this at the end of every statementTrailing semicolonAnd the advantage of doing that is that when you learn from the existing rulesIncrease or decrease in the statementAs much as possibleTo reduce the errorThe possibility of.
• The child element follows the parent elementinheritanceProperties. But it doesn’t always work that way.

2 Basic CSS styles

2.1 Description of px, EM and REM units

unit	instructions
px	Virtual pixelRelative unit, as opposed toEquipment pixel, unit pt. When the device pixel ratioDPR=1When,1px = 1pt.
em	Virtual pixelRelative unit, as opposed toThe current element 或 The parent elementSize of text.
rem	Virtual pixelRelative unit, as opposed toThe root elementSize of text.

2.2 CSS Font (5 Common attributes)

The CSS has five common font attributes: font, font-style, font-weight, font-size, and font-family

Generic Font template:

body {
  /* Default English font for Mac: 'Helvetica Neue', Helvetica Neue (a modified version of Helvetica) Arial: 'PingFang SC'; Arial: 'PingFang SC'; 'Hiragino Sans GB', 'Heiti SC', 'Microsoft YaHei' (Black, black - Jane, Microsoft YaHei) 'WenQuanYi Micro Hei' last option font: Sans-Serif */
  font-family: 'Helvetica Neue', Helvetica, Arial, 'PingFang SC'.'Hiragino Sans GB'.'Heiti SC'.'Microsoft YaHei'.'WenQuanYi Micro Hei', sans-serif;

  /* The browser minimum font size is 16px */
  font-size: 16px;
}
Copy the code

Related attributes:

attribute	describe	Attribute values	instructions
font	Set the font style for comprehensive writing	font: font-style font-weight font-size font-family;	Not much.
font-style	The font style	1. Normal: Default value, standard font style. 2. Italic. It’s a style, not a simple tilt. Oblique: Simplicity of the standard styletilt. Inherit: From the parent elementinheritance.	–
font-weight	The font size	1. Lighter is lighter. 2. Normal: default value. equivalentfont-weight: 400;. 3. Bold: It’s bolder. equivalentfont-weight: 700;. 5. Number:100 ~ 900The whole hundred value between, representsFrom fine to coarseThe degree of. Inherit: From the parent elementinheritance.	–
font-size	The font size	1. Pixel size. Negative values are not allowed. 2. Percentage: font size relative to parent element. 3. Xx-small: super small. Jenny: That’s x-small. He’s small. 6. Medium: The default value is normal size. A. large B. large C. large D. large 8. X-large: Larger. 9. Xx -large. 10. Smaller: smaller than the parent element. 11. Larger: Larger than parent element. Inherit: From the parent elementinheritance.	–
font-family	HTTP:	By font series composition, see at the beginningGeneric Font template.	1. Use multiple fontsA comma in EnglishSeparated. 2. The English font name must be in the Chinese font namebefore. 3. Chinese font nameOr,If there are Spaces in an English font, all need quotation marks. I’m using single quotes, as opposed to HTML. 3. Chinese font nameYou can use the correspondingEnglishRepresents, can also be used In Chinese\ + UnicodeTo represent (in quotes). Such as: Microsoft jas black = 'Microsoft YaHei' = '\5FAE\8F6F\96C5\9ED1' blackbody = SimHei = '\9ED1\4F53' Song typeface = SimSun = '\5B8B\4F53'

2.3 CSS Text (14 Common Attributes)

There are 14 common CSS text attributes:

• 12 common attributes:color.line-height.white-space.letter-spacing.word-spacing.direction.unicode-bidi.
  
  text-indent.text-align.vertical-align.text-transform.text-decoration.
• CSS3 attributes 2:text-shadow.word-break

Related attributes:

attribute	describe	Attribute values	instructions
color	Text color	1. Built-in color name:color: red; 2. Hexadecimal:color: #FF0000; 3. The RGB:color: rgb(255, 0, 0); 4. Rgba:Color: rgba(255, 0, 0, 0.5); Inherit: From the parent elementinheritance.	–
line-height	The text line height	1. Normal: The default value is a reasonable value. 2. Pixel size. Negative values are not allowed. 3. Percentage: relative to current font size. 4. Number: A multiple of the current font size. Inherit: From the parent elementinheritance.	–
white-space	The textThe blank space.A newlineWhitespace, etc	1. Normal: the default value. All whitespace characters are ignored. But text out of area isIt will wrap itself. 2. nowrap: Ignores all whitespace characters. But the text is out of the areaIt doesn't wrap. You can use<br />A newline. 3. pre: Preserve all whitespace. But the text is out of the areaIt doesn't wrap. 4. Pre-wrap: Keep all white space. But the text is out of the areaIt wraps automatically. 5. Pre-line: ReservedA newlineTo ignoreThe blank space. But the text is out of the areaIt wraps automatically. Inherit: From the parent elementinheritance.	–
letter-spacing	Letter spacing	1. Normal: the default value is the sameletter-spacing: 0 2. Pixel size. Negative values are allowed. Inherit: Inherit from the parent elementinheritance.	–
word-spacing	The word spacing	Same as above.	–
direction	Text orientation (CSS processing)	1. LTR: default, left to right. 2. RTL: right to left. Inherit: Inherit from the parent elementinheritance.	1. Directly applies to block-level elements. 2. For inline elements, only whenunicode-bidi Applies only when embed is set to embed, or Bidi-Override.
unicode-bidi	Text direction (Unicode processing)	1. Normal: default value, which does not allow inline elementsdirectionProperties. Embed: ExactlydirectionProperties. 3. Bidi-override: Exactly according todirectionProperties.	That’s the only way to understand it.
text-indent	Indented text	1. Pixel size. By default, 0inheritableNegative values are allowed. 2. Percentage: width relative to parent element.	rightInline tagsInvalid, can use leftInside/outsideMargin instead.
text-align	Horizontal text alignment	1. Left: default value, left aligned. 2. Right: Align right. 3. Center: Align with center. 4. Justify: Justify both ends. Inherit: From the parent elementinheritance.	–
vertical-align	Baseline alignment of inline elements	B: Bottom: by elementAt the bottom of theAlignment. 2. Baseline: default value, by elementThe baselineAlignment. 3. Middle: By elementThe midlineAlignment. 4. Top: by elementAt the top of theAlignment.	1. In the table, this property sets the cell contentsVertical alignment. 2. Usually used, especiallyInline block elements.Images, tables, forms, text fields, and the textVertical alignment.
text-transform	Changing the case of text	1. None: The default value is not changed. 2. Uppercase: All uppercase. Lowercase: all lowercase. Capitalize the first letter of each word. Inherit: From the parent elementinheritance.	–
text-decoration	The text to modify	1. None: the default value. Standard text. 2. Underline I overline it. 4. It’s a line-through. 5. Blink. Inherit: From the parent elementinheritance.	Can set multiple values at the same time, usingThe blank spaceSpace. Such as: h2 { text-decoration: underline overline; }
text-shadow	Text shadow,CSS 3 properties	Shadow X wheelbase from shadow Y wheelbase from shadow Blur distance Shadow color Concave effect: text-shadow: 1px 1px 1px #FFF, -1px -1px 1px #000; Convex effect: text-shadow: 1px 1px 1px #000, -1px -1px 1px #FFF;	1. The distance between x and yIs required. generalShadow blur distanceI’m going to set it pretty much the same as x and y. Shadow colorTransparency can be set using RGBA. 2. Can set multiple shadows, useThe commaSeparated.
word-break	Rules for wrapping text,CSS 3 properties	1. Normal: the default line breaking rule of the browser. 2. Break-all: Default to allow line breaks within words. 3. keep-all: Word breaking is not allowed (not includedHyphen word -).	–

2.4 CSS Background (8 Common Attributes)

There are eight common CSS background attributes:

• There are 6 common attributes:background.background-color.background-image.background-repeat.background-attachment.background-position
• CSS3 attributes 2:background-size.background-origin

Note that:

• backgroundIt only appears in theThe content areaOn.

Related properties: All background properties cannot be inherited.

attribute	describe	Attribute values	instructions
background	Sets the background style for composite writing	Background:background-color background-image background-repeat background-attachment background-position;	1. SupportMore backgroundSet up and useThe commaSeparated. If you haveoverlapIn order, the first will cover the last. 2. You don’t use much.
background-color	The background color	1. Built-in color name:background-color: red; 2. Hexadecimal:background-color: #FF0000; 3. The RGB:background-color: rgb(255, 0, 0); 4. Rgba:Background: rgba(255, 0, 0, 0.5); The color is transparent.	–
background-image	The background image	1. None: The default value. No background image is displayed. 2. url('URL'): URL is the path of the image.	–
background-repeat	Background image repetition mode	1. Repeat: Default value, x, y axis simultaneously. 2. Repeat -x: x axis repeat. 3. Repeat -y: y axis repeat. I don’t want to be a no-repeat.	–
background-attachment	Background image fixed way	1. Scroll: the default value to scroll with the page. 2. Fixed: When the page is rolling, the image is not rolling.	–
background-position	Background image location	1. xpx/em/rem yPx //em/rem** : the upper-left corner of the background imagecoordinates. 2. x% y%: in the upper-left corner of the background imagePercentage position, the width and height relative to the parent element. Either way, if you specify only one value, the other value will be50%. 3. Positional keywords: If you specify only one keyword, the second value will becenter. Left top: upper left. -Leonard: Left bottom. -Leonard: Right bottom. Right top: Right top. Top center: Left center: left center. -Penny: Bottom center. Right center: right center. Center center.	–
background-size	Background width and height,CSS 3 properties	1. width, height: Width/height, or percentage (width/height relative to the image itself). If you change only one of the width and height values, the image will notThe distortion. 2. Cover: Covered area with overflow hidden. 3. ContaincompleteThe image.	–
background-origin	The background is located in the region of the element,CSS 3 properties	1. Content-box: default, background is locatedcontentArea. 2. Padding-box: The background is locatedInside border + contentArea. 3. Border-box: The background is locatedBorder + inner border + contentArea.	–

2.5 CSS Outline (Four Common Attributes)

CSS outline attributes include four common attributes: outline, outline-color, outline-style, outline-width

Related attributes:

attribute	describe	Attribute values	instructions
outline	Sets the outline style for composite writing	outline: outline-color outline-style outline-width;	Not much.
outline-color	Outline of the color	1. Built-in color name:outline-color: red; 2. Hexadecimal:outline-color: #FF0000; 3. The RGB:outline-color: rgb(255, 0, 0); 4. Rgba:Outline: rgba(255, 0, 0, 0.5); 5. Invert: Default value, element background colorInversion of color. Inherit: From the parent elementinheritance.	1. The Settings have been setoutline-styleProperty to take effect. 2. The contour lineDoesn't take up spaceIt doesn’t have to be a rectangle.
outline-style	Outline style	1. None: Default value, no outline. 2. Solid: solid line. 3. The dashed line appears to have been consistent. 4. The Great Britain Population 5. There’s a double. 6. Inset: 3D concave edge. 7. Outset: 3D rim There’s a 3D groove. A 3D ridge. Inherit: Inherit from the parent elementinheritance.	–
outline-width	Silhouette width	1. Pixel size. He’s thin. 3. Medium: The default value is medium. He was thick. Inherit: From the parent elementinheritance.	1. The Settings have been setoutline-styleProperty to take effect.

2.6 CSS Links: There are four states

The four states of a link, also known as pseudo-class selectors:

• a:link:Are not access toThe link. The default color isblue.
• a:visited: the userHave access toThe link. The default color ispurple.
• a:hover: mouse pointer over linkedabove. The default color isredAnd withThe underlineModification.
• a:active: links areTime of click.

Note that:

• If you set links at the same timeMore than one state, then:
  • A: Hover must be located after A: Link and a: Visited.
  • A: Active must come after a:hover.

Related attributes:

attribute	describe	Attribute values	instructions
color	Control linkText color	–	–
text-decoration	Control linkThe underline	–	–
font	Control linkThe font	–	–
background	Control linkbackground	–	–

2.7 CSS List: Modify the tags of the entries (Four common attributes)

Unordered list

, ordered list < OL >, their entry identifier attribute is list-style.

The CSS lists have four common attributes: list-style, list-style image, list-style type, and list-style position

Related attributes:

attribute	describe	Attribute values	instructions
list-style	Set the entry tag style for comprehensive writing	list-style: list-style-image list-style-type list-style-position;	–
list-style-image	The image of the entry tag	1. None: The default value. No image is displayed. 2. url('URL'): URL is the path of the image.	–
list-style-type	Type of the entry marker	1. None: Indicates no flag. 2. disc: Default value,The solid center. 3. circle:Empty circle. 4. square:Solid square. 5. decimal: Numbers. 6. decimal-leading-zero: numbers starting with 0 (01, 02, 03…) 7. lower-alpha: Lowercase letters. 8. upper-alpha: Uppercase letters. 9. lower-roman: Lower Roman numerals (I, II, III, iv, v…) 10. upper-roman: Capital Roman numerals (I, II, III, IV, V…)	–
list-style-position	Position of the entry marker	1. Outside: Default value, located to the left of the text,The lateral. 2. Inside the text,The inside of the.	–

2.8 CSS Table (Five Common Attributes)

Tables have no borders by default.

The CSS table has five common properties: border-collapse, border-spacing, empty-cells, Caption -side, and table-layout

Related attributes:

attribute	describe	Attribute values	instructions
border	Controls the borders of the table	–	–
border-collapse	Controls whether the borders of the table areunity	1. Separate: Default, borders are separated. 2. Collapse: Borders will merge into a single border.	–
border-spacing	Controls cell bordersspacing	1. The x, y,: x indicates horizontal spacing, and y indicates vertical spacing.	1. border-collapse 为 separate, takes effect.
empty-cells	Whether blank cells are displayed	1. show: By default, draws around empty cellsA border. 2. Hide: Do not display blank cells.	1. border-collapse 为 separate, takes effect.
caption-side	Set table title<caption>Position of occurrence	1. Top: The default position is above the table. B: It’s in the bottom.	–
table-layout	Column width calculation mode	1. Automatic: indicates the default value.Automatic table layoutThe column width is set by the cell contents. 2. Fixed:Fixed table layoutThe horizontal layout depends only onTable width,The column width,Table border width,Cell spacing, regardless of the contents of the cell.	–
width	Controls the width of the table	–	–
height	Control the height of the table	–	–
text-align	Horizontal alignment of cell content	–	–
vertical-align	Of the cell contentsVertical alignment	Cell contentsVertical center:vertical-align: middle;	–
padding	The inside margin of a cell	–	–

3 CSS Box Model, margin collapse (4 common attributes)

CSS box model: The HTML page elements as a rectangular box, each rectangle is composed of element content, padding, border, margin four parts.

There are four common box model attributes:

• There are three common attributes:border.padding.margin
• CSS3 attributes 1:border-radius

A few points to note:

• In CSS,width 和 heightRefers to theThe content areaWidth and height.

Increasing margins, borders, and margins does not affect the size of the content area, but does increase the overall size of the element box.

• Inline elements:

Inner margin does not affect the calculation of row height, left and right normal, left and right auto is not centered. Margins up and down are invalid, left and right will not merge normally, left and right auto will not center. For example: If an inline element has both an inner margin and a background, it will visually extend to other lines and overlap with other content.

• Block-level elements:

Inside margin normal, left and right auto will not center. Margin, left and right auto will be centered. It merges in the vertical direction, that is, margin collapse. Merging rules:

• If it isNext to each other: Then the vertical margin is takenLarger value.
• If it isInside and outside the adjacent: If the parent element does not have oneA border 或 padding, will occurMargin merge. The vertical margin will be takenLarger valueAnd,Applied to the parent elementUp, the child will stick to the parentThe edge.

Solution to margin collapse:

1. To the parent elementSet the borderOr,Add inner margins.
2. Triggers the parent elementBFCBlock-level formatting context, such as adding attributes to the parent elementoverflow: auto;.

• Float element:From the outsideWill not merge.
• Box model attributes use priority:width > padding > margin

Overrides the browser’s default box model style:

* {
  margin: 0;
  padding: 0;
}
Copy the code

Related attributes:

attribute	describe	Attribute values	instructions
border	The border style of the element for composite writing.	border: border-width border-style border-color;	1. Use more. 2. And contour propertiesoutlineThe difference: the contour isDon't take up spaceAnd the contour has no transparency attribute valuetransparent. Pay attention to themIntegrated writingThe order is different.
border-width	The border width of the element	1. Pixel size. He’s thin. 3. Medium: The default value is medium. He was thick.	1. You can use four values at the same time and set them separatelyOn the lower leftThe border width of the. If you omitDown or leftThey default to equalOr on the rightThe value of the.
border-style	The border style of the element	1. None: Default, no border. 2. Hidden: No border. But the application in theform, border conflicts can be resolved. 3. Solid: solid line. 4. The dashed line indicates that the module has been bootstrapped. 5. Which of the following was an increase? 6. There’s a double. 7. Inset: 3D concave edge. 8. Outset: 3D rim There’s a 3D groove. 10. Ridge: 3D.	As above, 4 values can also be set.
border-color	The border color of the element	1. Built-in color name:border-color: red; 2. Hexadecimal:border-color: #FF0000; 3. The RGB:border-color: rgb(255, 0, 0); 4. Rgba:Border-color: rgba(255, 0, 0, 0.5); The color is transparent.	As above, 4 values can also be set.
There is no	Four groupsA borderSet the property group separately.	On the border: border-top border-top-width border-top-style border-top-color Right margin: border-right border-right-width border-right-style border-right-color Under the border: border-bottom border-bottom-width border-bottom-style border-bottom-color Left margin: border-left border-left-width border-left-style border-top-color	–
border-radius	The length of the element’s border fillet radius,CSS 3 properties	1. Pixel size.Generally set to half the height of the element. 2. Percentage: Control the rounded cornersThe shape of.	–
padding	The inner margin of the element	1. Pixel size. Negative values are not allowed. 2. Percentage: width relative to parent element. 3. Auto: Calculates the inner margin automatically.Not centered.	As above, 4 values can also be set.
There is no	fourpaddingSet properties separately.	padding-top padding-right padding-bottom padding-left	–
margin	The margin of the element	1. Pixel size.Allow the negative. 2. Percentage: width relative to parent element. 3. Auto: calculates the margins automatically.Block-level elements are centered.	As above, 4 values can also be set.
There is no	fourFrom the outsideSet properties separately.	margin-top margin-right margin-bottom margin-left	–
width	Elements of the wide	–	–
height	Elements of high	–	–

3.1 Summary of horizontal and vertical center

The display mode of the element, which can be freely converted using the display attribute.

In the middle	methods
The text centered	1. Inline elements:highlyCannot be set,The width of theIs based onContent adaptationThere is no centering problem. paddingYou can controlLeft and right inside margins. line-heightCan control the line height of the text, so as to achieve inIn the line height 的 Vertical center. 2. Inline block elements: Wide height can be set. text-align: center;You can controlChild elementsThe text is centered. 3. Block level elements: text-align: center;You can controlChild elementsThe text is centered.
Element in the middle	1. Inline elements: You can’t control margins and center elements. 2. Inline block elements: You cannot control margins or center elements. 3. Block level elements: margin:0 auto;Can implement elementsHorizontal center. display: table-cell; vertical-align: middle;: Sets the parent element to be implemented by the child elementVertical center. display: table-cell; vertical-align: middle; text-align: center;: Sets the parent element to be implemented by the child elementCenter vertically and horizontally. position: absolute; left: 50%; transform: translateX(-50%);: Absolute positioning, implementation of elementsHorizontal center. position: absolute; top: 50%; transform: translateY(-50%);: Absolute positioning, implementation of elementsVertical center. position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);: Absolute positioning, implementation of elementsHorizontal and vertical center.

3.1.1 Transformation of element Display mode (2 common attributes)

The display mode conversion properties are display and visibility.

Three display modes for elements:

Display mode	Characteristics of the	Tags, for example,
Inline elements	1. Do not set the width and height in a single line. 2. It’s all about content.	<span>.<a>.<label>And so on.
Block-level elements	1. Occupy a row alone and set the width and height of the row. 2. If no width is given, block-level elements default to 100% of the browser width.	<hr />.<div>.<h1>.<h6>.<p>And so on.
Inline block elements	1. Can stay in line with other elements, can set the width and height.	<img />.<th>.<td>.<form>.<input />.<textarea>And so on.

Display mode properties:

attribute	describe	Attribute values	instructions
display	Controlling elementDisplay mode	1. inline: Default value, inline element. 2. block: block-level element. 3. inline-block: inline block element. 4. flex:Scalable layout modeTo giveThe parent elementSettings. Child elementsSet up theflex: number;To achieve a scalable layout. 5. None: Elements are not displayed, eitherDoesn't take up space.	–
visibility	Provisions of elementsWhether or not visible	1. visible: Default value, element visible. 2. hidden: elements are not displayed, howeverWill take up space. 3. collapse: Used to hide a row or column when used in a table,Won't take the place.	–

3.2 Box model attributes (2 common attributes)

There are two commonly used box model attributes:

• CSS3 added 2:box-sizing.box-shadow

attribute	describe	Attribute values	instructions
box-shadow	Shadow box	Shadow X Wheelbase from Shadow Y wheelbase from Shadow Blur Distance Shadow Color Inside and outside shadow	1. Inner and outer shadow attribute values: Outset: default value, external shadow. Inset: internal shadow. 2. Similar properties: Controls the text shadowtext-shadow.
box-sizing	Box model pattern	1. content-box: Default values, width, heightThe content area. 2. border-box: width, heightThe content area.padding.A border.	–

4 CSS location mechanism

The CSS has three positioning mechanisms: standard flow, floating, and positioning. Both float and position change the display mode of an element to inline block mode.

4.1 CSS float

Float: Away from the standard flow, a floating element can move left or right until its outer edge touches the edge of the parent element or another floating element.

Note that:

• The float will find the one closest to itThe parent elementAlignment, but not beyond the parent elementThe content area.
• Adjacent floatingBetween the two elements ofThere is no distance. And the two next to each otherInline block elementsIs betweenHave a distanceAnd it’s not easy to remove.
• Floating arrangement rules:The preceding element is always on top
  • If the first element does not float and the second element floats, the second element will be in the first element’sThe followingFloat.
  • If the first element floats and the second element does not float, the first element will be in the second element’sThe aboveFloat.
• Below the float elementThe text 会 aroundFloat the element for display, if desiredThe textAround the effect, then giveThe textSet up theRemove the floatingattributeclear, so that its left and right are not allowed to appearThe floating elementCan.

attribute	describe	Attribute values	instructions
float	Controls the float of elements	1. None: the default value is not floating. 2. Left: float left. 3. Right: Float right.	–

4.1.1 Clearing floats

Clear floating: Make floating elements not allowed around block-level elements. Clear float application:

• Let the float elementThe text belowNo longer,aroundFloat element display.

Add the clear float attribute to the text element.

• avoidHeight not setIs caused by the float of the child elementHeight is zeroThe problem.

Add a block-level empty tag below the float element and set the clear float attribute. Specific solutions:

1. Directly in theHTML pageAdd block level empty label to:

Disadvantages: add meaningless tags, poor structure. html

2. Add a block-level empty tag to the end of the parent element using the CSS pseudoelement selector: css.father :after {content: “; display: block; clear: both; } 3. Trigger the parent element’s BFC(block-level formatting context), such as adding the attribute overflow: auto to the parent element; .

attribute	describe	Attribute values	instructions
clear	Clears floating elements around block-level elements	1. None: The default value, allowing the left and right sides to float. 2. Both: NoLeft and right sides of theThere is a float. 3. Left: Not allowedOn the left side of theThere is a float. 4. I’m not allowedOn the right sideThere is a float.	–

4.2 the CSS positioning

Positioning: To move elements out of the standard flow to a specific location.

A few points to note:

• When the child element needs to be set to absolute positioningabsolute, the relative positioning of the parent element is generally setrelative.Prevents child elements from separating from parent elements.

attribute	describe	Attribute values	instructions
positon	Element location type	1. Static: The default value is not located. The elements themselves are relative to each other.The original space is still occupied. 3. Absolute: Absolute position, relative to the first nonstaticPositioning of theThe parent element.The original space will be deleted. If not, relative to the root element. 4. fixedBrowser viewable areaLocate.	–
top	Distance from the top.	1. Pixel size. Negative values are allowed. 2. Percentage: width and height relative to the parent element.	–
right	The distance to the right.	–	–
bottom	The distance from below.	–	–
left	The distance to the left.	–	–
z-index	Elements of theThe stacked sequence	1. Auto: Default value, equal to parent element. 2. The larger the number, the higher it is.Allow the negative. * * z – only in the indexPositioning elementsIn the work. Generally used for absolute positioningposition:absolute;	–

5 Block formatting Context (BFC) Block formatting context

The BFC feature of the element: Makes the element a separate rendering region, and operations within the region do not affect the external elements.

Application Scenarios:

• Trigger the BFC feature of the parent element to solve the problem that the parent element has no border or inner margin when the child element is generatedEdge collapseThe problem.
• Trigger the BFC feature of the parent element to solve the problem that the child element is floating and the height of the parent element is 0.

BFC features:

• In the BFC region/parent element:
  • The child elementFrom the outsideIs relative toThe edge of the parent elementWhether or not a parent element existsA border 或 padding. (i.e.There is no margin collapse)
  • The height calculation of the parent element includes the height of the floating and positioned child elements.
• Outside the BFC region/parent element:
  • The margins of the parent and adjacent elements do not overlap. (i.e.Margins in the BFC area do not overlap)
  • The parent element does not matchAdjacent float elementOverlap occurs.

Triggering rules of the BFC feature:

• The premise conditionThe display mode of the: element must be,block.table.list-itemOne of the.
• The trigger condition: Adds one of the following attributes to the element
  • overflowProperties forvisible.
  • floatProperties fornone.
  • positionProperties forabsolute 或 fixed.
  • displayProperties forinline-block.table-cell.table-caption.flex.inline-flex.

Related attributes:

attribute	describe	Attribute values	instructions
white-space	Text display mode	1. Normal: default value, default processing mode. 2. nowarp: Forces text to be displayed on the same line until it ends or is encountered<br />.	–
overflow	What happens when content overflows	1. Visible: Default, content is not pruned and is rendered outside the element box. 2. hidden: The content is trimmed, and the rest of the content is invisible. 3. Auto: The content is trimmed, but the browser displays a scroll bar to view the rest of the content.	–
text-overflow	Overflow texthandling	1. ellipsisUse:.Instead of overflow text. 2. Clip: The overflow text is directly clipped. Note:text-overflowNeed to cooperatewhite-space 和 overflowIt only works if you use it together.	–

5.1 Processing method of single-line text and multi-line text overflow hiding

Single-line text overflow hiding:

div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
Copy the code

Multi-line text overflow hiding:

div {
  height: 30px;
  overflow: hidden;
  position: relative;
}

div:after {
  content: "...";
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0px 10px;
  background-color: #FFF; /* Default background color is transparent */
}
Copy the code

6 CSS selector

The previous selectors are: CSS linked pseudo-class selectors, and clear float pseudo-element selectors.

6.1 Basic selectors

• Label selector:Tag name, can represent multiple labels
• Class selector:The name of the class, can represent multiple labels
• Id selector:#id
• Wildcard selector:*Represents all labels
• Pseudo-class selector:
  • Link pseudo-class selectors:

  a:link:Are not access toThe link. The default color isblue.a:visited: the userHave access toThe link. The default color ispurple.a:hover: mouse pointer over linkedabove. The default color isredAnd withThe underlineModification.a:active: links areTime of click.

  • Position pseudo-class selector:

  :first-child: Selects the first child of the parent element.:last-child: Selects the last child of the parent element.:nth-child(n): matches the NTH child of the parent element. Values of n include:digital.even(even),odd(odd),Expression with n(n = 0,1…):nth-last-child(n): same as above, but counting from the last child.

  • Target pseudoclass selector: used alone

  :target: Selects the currently active element, such as the selected anchor.

  • Other pseudo-class selectors:

  :focus:The keyboard focusThe element.

• Pseudo-element selector:

E:first-letter: selects the first word or word of the text. E:first-line: selects the first line of the text. E: Selection: Specifies the style of the selected text. E:before: Creates an element at the beginning inside the element. This element is inline and must be used with the Content attribute. The Content property specifies the content of the element, and should be as empty as possible to prevent old browsers from having gaps, such as those generated before Firefox 7.0. E: After: Same as above, create an element at the end position inside the element.

Note: The identifier of the pseudo-element selector in newer browsers is ::, and that in older browsers is:. Newer browsers automatically convert: to: when they encounter:.

For compatibility, use:.

6.2 Compound selectors

• Multiclass selectors:Class name. Class nameSaid,At the same timecontainsMore than the name of the classCan represent multiple labels
• Intersection selector:Tag name. Class name, can represent multiple labels
• Union selector:Selector, selector, can represent multiple labels
• Descendant selector:Selector Selector, can represent multiple labels
• Child element selector:Selector > Selector, can represent multiple labels
• Sibling selector:Selector + selector, the choice ofAdjacent labels, can represent multiple labels
• Property selector:Tag name [attribute = attribute value], can represent multiple labels

Example: E[attr] : the element with the attr attribute. E[attr=val] : the element whose attribute value is equal to val. E[attr*=val] : The attribute value contains the val character and is an element in any position. E[attr^=val] : The element whose attribute value contains the val character and is in the start position. E[attr$=val] : The element whose attribute value contains the val character at the end position.

6.3 Add a transparent mask to the element over the mouse (pseudo-element selector application)

#div {
  width: 300px;
  height: 300px;
  border: 1px solid red;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  position: relative;
}

#div:hover:after {
  content: "Masked text content";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255.255.255.0.8);
}
Copy the code

7 Three features of the CSS

CSS has three major features: cascading, inheritance, and priority. Cascading: In case of style conflicts, the CSS writing order is followed, and the last style prevails. Inheritance: The child tag inherits some of the styles of the parent tag, such as font size, text color, and other attributes of the text class. Priority: When two or more rules are applied to an element at the same time, you need to consider weights.

7.1 Rules for calculating the weights of the CSS

Issues needing attention:

• Inherited styles have a weight of 0.
• Inline styleThe weight of theta is greater than all of thetaThe selector.
• ! importantCommand indicates the maximum priority.
• Same weight at the same time, takeCascading sex.

Calculation rules:

A four-digit string is used to represent weights. Each number represents a level, descending from left to right, with no carry between levels. The final weight value is superimposed by the contributions of each selector.

The selector	Contribution value
inheritance 和 *	0,0,0,0
eachElement selector	0,0,0,1
eachclass.pseudo-classes.Pseudo elements 等	0,0,1,0
eachid	0,1,0,0
eachInline style	1,0,0,0
each! important	infinity

8 Other attributes are added

8.1 CSS size

attribute	describe	Attribute values	instructions
width	The width of the element	–	–
height	The element height	–	–
max-width	Maximum width	–	–
min-width	Minimum width	–	–
max-height	Maximum height	–	–
min-height	Minimum width	–	–

8.2 Other Attributes

attribute	describe	Attribute values	instructions
cursor	The mouse style	1. Default: indicates the default value and style. 2. pointer/hand (Hand, because Firefox doesn’t support it) I need to move. -Serena: I don’t know.	–
opacity	Transparency of elements,CSS3	1. Number: from0.0(Full transparency) to1.0(Completely opaque).	–
resize	Whether elements can be resized by the user	1. None: indicates a userUnable to adjustThe size of the element. 2. Both: User adjustable elementsHeight and width. Horizontal: User adjustable elementsThe width of the. 4. Vertical: Allows users to adjust elementshighly.	–

9 Sprite graph technology

Essence: Gather all the scattered background images involved in a page into one large image, and then use the larger image for the page. When the user accesses the page, he only needs to send a request to the server once. Use: Directly use background-position and other attributes to accurately locate the required background part.

Sliding door technology

Purpose: To enable various special-shaped backgrounds to adapt to the amount of text content in the element while freely stretching and sliding. Key technique: a background image that is wide enough to be set on the background of links and linked text, stretching left and right.

<li>
  <a href="#">
    <span>Navigation bar content</span>
  </a>
<li>
Copy the code

a {
  display: inline-block;
  height: 33px;
  background: url(images/ao.png) no-repeat;
  color: #FFF;
  text-decoration: none;
  line-height: 33px;
}

a span {
  display: inline-block;
  height: 33px;
  background: url(images/ao.png) no-repeat right;
}
Copy the code

11 New CSS3 features

11.1 CSS3 Font: Use a customized font

@font-face {
	font-family: myFirstFont;
	src: url('Sansation_Light.ttf'),
     	url('Sansation_Light.eot'); /* IE9+ */
}

div {
	font-family:myFirstFont;
}
Copy the code

11.2 CSS3 text: Text shadow, auto-wrap mode, multi-column display

The related attributes text-shadow and word-wrap are summarized in CSS text.

11.2.1 Multi-Column Display

attribute	describe	Attribute values	instructions
column-count	Element with text delimitedThe number of columns	–	–
column-gap	Between the columns ofinterval	–	–
column-rule	Between the columns ofSplit edgesstyle	Set the same as border.	–

11.3 CSS3 background: size, area

The related properties background-size and background-origin have been summarized in the CSS background.

11.4 CSS3 borders: Rounded corners, border shadows, box model types

The attributes border-radius, box-shadow, and box-sizing are summarized in the CSS box model.

11.5 range of transition

Note that:

• The transition property is written inElements that need to transitionIn, rather thanThe style of the changed elementIn the water.
• supportMultiple sets ofTransition properties, withThe commaSpace.

attribute	describe	Attribute values	instructions
transition	Add transition attributes to the element itself	transition: Attributes to transition Total transition time Motion curve The start time; 1. Attribute to transition: Write attribute name. If all attributes require a transition transform, writeall. 2. Total transition time: 0s by default. 3. Motion curve: ease: Default value, gradually slowing down. linear: uniform. ease-in: to speed up. ease-out: slow down. ease-in-outSpeed up first, then slow down. 4. Start time: 0s by default.	–
transition-property	Attributes to transition	Is the attribute decomposition above	–
transition-duration	Total transition time	–	–
transition-timing-function	Motion curve	–	–
transition-delay	The start time	–	–

11.6 CSS3 2D Transformation

Multiple deformation groups, separated by Spaces.

attribute	describe	Attribute values	instructions
transform	Total attribute of transformation	1. Displacement: pixel size, percentage (relative to its width and height) translateX(x): Horizontal movement. translateY(y): Vertical movement. translate(x, y): Horizontal and vertical movement. 2. Rotation: Positive value is clockwise, negative value is counterclockwise. rotate(deg): Degree of plane rotation, in unitsdeg. 3. Zoom: Multiple of its width and height. Default is 1. scaleX(x): x scaling factor. scaleY(y): y scaling factor. scale(x, y): x, y scaling multiple. 4. Tilt: skew(deg,deg): Degree of horizontal and vertical reversal.	–
transform-origin	Sets the origin of the 2D transform	1. xpx/em/rem yPx //em/rem** : the origincoordinates. 2. Positional keywords: If you specify only one keyword, the second value will becenter. Left top: upper left. -Leonard: Left bottom. -Leonard: Right bottom. Right top: Right top. Top center: Left center: left center. -Penny: Bottom center. Right center: right center. Center center.	–

11.7 CSS3 3D transformation

Multiple deformation groups, separated by Spaces.

attribute	describe	Attribute values	instructions
transform	Total attribute of transformation	1. Displacement: pixel size, percentage (relative to its width and height) translateX(x): Horizontal movement. translateY(y): Vertical movement. translateZ(z): Move forward and backward. The visual representation is thatThe size of the change. So here’s the referenceView the perspectiveProperty, you can’t see it beyond the viewpoint distance, because it’s like running to the back of the head. translate3d(x, y, z): z can only be setThe length of the value. 2. Rotation: Positive value is clockwise, negative value is counterclockwise. rotateX(deg): Degree of rotation along the x axis, in unitsdeg. rotateY(deg): Degree of rotation along the y axis, in unitsdeg. rotateZ(deg): Degree of rotation along the Z axis, in unitsdeg.	–
transform-style	Change the display mode	Flat: default value, display transformation in 2D mode. 2. Preserve-3d: Display transformations in 3D mode.	–
perspective	Stadia, i.e.,Point of viewdistanceThe screenThe distance from the	Typically set to the parent element and apply to all child elements. Such as:body { perspective: 1000px; }	–
backface-visibility	Whether the element is visible when it is facing away from the screen	1. Visible: Indicates the default value. 2. She was hidden from view.	–

11.7.1 Rotating Cast diagram: 3D transformation example

<! DOCTYPEhtml>
<html lang="zh-cn">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<title>test</title>
		<style>
			body {
				perspective: 1000px;
			}
			section {
				width: 300px;
				height: 200px;
				margin: 100px auto;
				background: url(h.png) no-repeat;
				background-size: cover;
				position: relative;
				transform-style: preserve-3d; 
				transition: all 5s linear;
			}
			section:hover {
				transform: rotateY(360deg);
			}
			section div {
				width: 100%;
				height: 100%;
				background: url(h.png) no-repeat;
				background-size: cover;
				position: absolute;
				top: 0;
				left: 0;
			}
			section div:nth-child(1) {
				transform: rotateY(0deg) translateZ(400px);
			}
			section div:nth-child(2) {
				transform: rotateY(60deg) translateZ(400px);
			}
			section div:nth-child(3) {
				transform: rotateY(120deg) translateZ(400px);
			}
			section div:nth-child(4) {
				transform: rotateY(180deg) translateZ(400px);
			}
			section div:nth-child(5) {
				transform: rotateY(240deg) translateZ(400px);
			}
			section div:nth-child(6) {
				transform: rotateY(300deg) translateZ(400px);
			}
		</style>
	</head>

	<body>
		<section>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</section>
	</body>
</html>
Copy the code

11.8 range of animation

attribute	describe	Attribute values	instructions
animation	Add an animation group to the element itself	animation: The name of the animation Total animation time Motion curve The start time plays Whether to play in reverse rotation; 1. Animation name: one groupSet animationThe name of the. See below for the animation group Settings. 2. Total animation time: 0s by default. 3. Motion curve: ease: Default value, gradually slowing down. linear: uniform. ease-in: to speed up. ease-out: slow down. ease-in-outSpeed up first, then slow down. 4. Start time: 0s by default. 5. Playback Times: The default value is 1. 6. Whether to play backwards: normal: Default value, animation plays normally. alternateAnimation:Take turns to reversePlay.	–
animation-name	The name of the animation	Is the attribute decomposition above	–
animation-duration	Total animation time	–	–
animation-timing-function	Motion curve	–	–
animation-delay	The start time	–	–
animation-iteration-count	plays	–	–
animation-direction	Whether to play in reverse rotation	–	–

11.8.1 Setting of animation group

@keyframesAnimation name {from{// transform operation}to{// transform operation}}/ * or * /

@keyframesAnimation name {0%{// transform operation}50%{// transform operation}100%{// transform operation}}Copy the code

Flex: Flex layout (Flex layout)

Display: Flex; Flex :1; If this parameter is not set, scaling allocation is not involved. Note: The Flex layout syntax has changed a lot and browser support is inconsistent, so it’s not used much.

Parent element partial related attributes:

attribute	describe	Attribute values	instructions
display: flex;	Enable Flex layout	–	–
flex-flow	Flex layout properties, written synthetically	flex-flow: flex-direction flex-wrap;	–
flex-direction	Adjust theThe spindle direction	1. Row: Default value, horizontal. 2. Column: vertical.	–
flex-wrap	The child elementNewline mode	1. Nowrap: default value, no newline, shrink display. Wrap: Wrap lines if necessary. 2. Wrap-reverse: Wrap lines if necessary, in the opposite direction.	–
justify-content	The child elementHorizontal alignment	1. Flex-start: default, left-aligned. 2. Flex-end: right-align. 3. Center: Align with center. 4. Space-between: evenly distributed, left and right child elementsClose to theThe parent element. 5. Space-around: Evenly distributed, with each child aroundSame void.	–

Attributes associated with child elements:

attribute	describe	Attribute values	instructions
min-width	–	–	–
max-width	–	–	–

12 Prefix of browser properties

Resolve compatibility issues with certain attributes.

Browser attribute prefix	The browser
-webkit-	Chrome, Safari, Android
-ms-	IE, Edge
-moz-	Firefox
-o-	Opera
-khtml–	Konqueror