CSS advanced
1. @ Rules
Aliases: at-rule CSS instruction CSS statements @ rule 1, import @import “path” : import another file
2. The charset @ charset “utf-8” :
Tell the file browser that the CSS file uses a UTF-8 character encoding set
This command must be written on the first line, not if there is no Chinese
Web fonts and ICONS
1. Web fonts
(Use less, because it has to be loaded separately)
Solve the problem that the required font is not installed on the user’s computer, force the browser to download the font file (background download)
But use @font-face to make a new font
The font-family: “good night”
SRC :url (font file location)
2, font icon
Iconfont website: website for font ICONS
Commonly used ali font icon library basically used ICONS can be found or free. There are tutorials on the official website:
It’s customary to use the I element for ICONS
An icon is considered a font, and all properties of the font element can be used on the font icon
BFC formatting context
Blockfor formatting
Is a separate rendering area that specifies the layout of a normal flow block box within that area
The conventional flow block box must be filled horizontally
Regular flows are placed vertically in the containing block
If the margins of conventional flow block boxes are seamlessly adjacent, the margins are merged
Normal flow block boxes automatically height and position regardless of the float element
BFC render area
This area is created by an HTML element, and the following element creates a BFC area within it
The root element
Float and absolute position element Overflow is not equal to visible block boxes
Table cell row block boxes are also created
independent
Different BFC areas, they render without interfering with each other
The bfC elements are created to isolate their internal and external connections, so that internal rendering does not affect the external
Specific rules:
Four, the font reference line
This section is an extension to understand more about how fonts are formed
Super: The element’s baseline is aligned with the parent element’s upper baseline
Sub: The element’s baseline is aligned with the parent element’s lower baseline
Texe-top: The top edge of the element’s virtual-area, aligned with the parent element’s text-top
Text-bottom: The bottom edge of the element’s virtual-area is aligned with the parent element txet-bottom
Top: The Top edge of the element’s virtual-area. The Top edge aligned with the parent element (the highest Top edge in the line) is the Top edge of the line-box
Bottom: Aligns the Bottom edge of the virtual-area element (the lowest Bottom edge in the line) to the Bottom edge of the line-box
Line boxes can be combined to form multiple lines. The area of each line is called line-box. Line-box is the highest top edge of the top line, and the bottom edge is the lowest bottom edge of the box
In fact, the actual height of an element (height automatic), the height calculated via line-box calculation
Line boxes: inline – box
Box: line – box
Value: Offset from baseline, positive up and negative down
Percentage: Indicates the offset from the baseline. Percentage is the height of the virtual area
Line-box is a necessary condition for hosting content. No Line box is generated in the following cases
1. An element has no elements inside it
2. The font size of an element is 0
Replaceable element and line block box baseline
Image: The baseline position is at the bottom margin of the image
Form elements: The base line is at the bottom of the content
5. Browser compatibility
The reasons causing
Competition in the market
Changes to the standard version
Chrome S4 only supports some features of CSS3
Producers prefix
For example, Google’s older versions: box-sizing, webKit-box-siziing, border-box
Market competition, standards are not published
The standards are still being discussed and browser vendors want to support them
Ie: – ms –
Chrome: Safari: WebKit –
Firefox: – moz –
Note: If the browser encounters unrecognized code while processing a style or element, it filters it directly
Google Chrome scrollbar style, -Webkit-ScrollBar
In fact, div plus CSS is used to implement scrollbars in development
css hack
Set different styles and elements according to Internet Explorer of different browser
style
The special prefix of the CSS in Ie
* Properties: compatible with IE6. Ie7, Not compatible with Google Chrome
– (underscore) property, compatible with IE5 and IE6
Background: Red /9 Compatible with IE5 to IE10
Property plus /0 compatible with IE8 through IE10
Property value /9/0 Compatible with IE9 to IE10
Margin bug in IE5 6 7 Floating elements with double left margin
conditional
The Internet Explorer browser can recognize the contents of comments
Progressive enhancement and graceful degradation
There are two ways to solve compatibility problems that affect the writing style of your code
Incremental enhancements: first adapt to most browsers, then write code for the new style added to the new version of the browser, avoid writing compatible code at first, and then gradually add the code in the new standard
Elegant degradation first make complete features, and then in the first version of the browser for special processing, writing code, first do not care about compatibility, complete the rectification function, in view of the lower version of the browser style Caniuse website can find CSS compatibility [caniuse.com]:
Sixth, middle summary
Centered: The box is centered in the containing block
Row box (row block box) center:
Set the line box parent element text-align: center directly, available in text and horizontal center
Conventional flow block boxes are horizontally centered:
Fixed width, set left and right margin to Auto
The floating element
Floating elements cannot be centered horizontally, use CSS3
Absolutely positioned elements are horizontally centered
Fixed width, left and right set to 0, left and right margin set to Auto
Fixed is a special case of absolute positioning, only relative to the viewport
Vertical center of single line of text
Sets the line height of the text element to the height of the entire region
Absolutely centered vertically:
Set the height, set the top and bottom coordinates to 0, (top: 0, bottom: 0) set the top and bottom margin to Auto
other
Vertical center of multiple lines of text in a block or block box. There is no way to do this. Use another way to set the upper and lower inner margin padding to look like center
Seven, style supplement
Display: list-item The box to which this attribute is set is essentially a block box, but it is accompanied by another box. The box generated by the element itself is called the primary box, and the secondary box is arranged horizontally with the primary box. Arrange the secondary boxes first, then the main box.
Related to the CSS list-style type property, set the sub-box property. You can inherit or write the list-style position property in the parent element to set the position of the secondary box relative to the primary box
Clear boxes in reset stylesheet list-style: None
If the image link of an IMG element is broken, you cannot set the width and height to line box or block box, just like line box elements
A row box containing block boxes or replaceable elements will not be tall enough, that is, regardless of the height of its internal block boxes or replaceable elements
text-align-justify
Left: left-aligned
Right; Align right
Center: a Center
The Justify. Scatter alignment except for the last line
If you want to scatter the last line as well
Make a triangle
You can use pictures, you can use glyphs
Direction and writing-mode Question start-> end left left — right End Start and end are relative, different countries have different habits left and right are absolute Direction is the Direction in which the description begins to end: RTL is right to left
Writing-mode: Sets the Writing direction of a text
