Sites:Front-end development document
Original:CSS selector
Original:CSS inheritance properties
Original:CSS3 Core Module
Original text:CSS box model
Original text:CSS background image
Original text:CSS clear float
Original text:CSS positioning
CSS selector
-
Union: Grouping selectors. Grouped selectors can share the same declaration. UsecommaSeparate the selectors that need grouping.
h1,h2,h3,h4,h5,h6{}
-
Intersection: Both attributes belong to the same element.
-
p.name{}
、p#id{}
、.name1.name2{}
-
-
Descendants (Derived): Defines styles based on the relationship of elements in position, usesSpacesSeparated, offspring selector as far as possible not more than 3, don’t have to list each level, only need to write the key points
li strong {}
-
Child: only child elements as certain elements can be selected, only children are selected, and future grandchildren are not selected.
h1 > strong {}
-
Brothers and Neighboring Brothers: Select immediately after another element and both have the same parent element
h1 + p {}
-
Attribute: Sets the style for HTML elements with the specified attribute, with a weight of 10
-
Attribute selector: with
title
Property sets the style for all elements of the,[title] {}
-
Attribute and value selector: is
title="name"
All elements of the are styled,[title=name] {}
-
Set the style of the form:
input[type="text"] {}
-
Attribute selector: with
-
Pseudo class:
-
:active
: activated element -
:focus
: Element with keyboard input focus -
:hover
: Mouse Hover -
:link
: Unaccessed Links -
:visited
: visited links -
:first-child
: The first child element of the element -
:lang
: with designationlang
The element of the attribute
-
-
Weight:
-
div
(1) -
Class/ class selector
(10) -
id
(100)
-
-
Structure Selector (New Pseudo Class (Face Test))
-
:not
: exclusion -
:nth-child(n)
: which element is set from 1 -
:nth-child(2n)
: even elements are set from 0 -
:nth-child(2n+1)
: odd elements -
:nth-of-type(n)
: which element of the same type of an element -
:nth-last-child
: last element -
:first-child->:nth-child(1)
: -
:fisrt-of-type
: First sibling sibling element -
:last-of-type
: Last sibling element -
:nth-of-type(n)
: Which sibling sibling element -
:last-child
: Last child element -
:only-child
: only one child element -
:only-of-type
: There is only one child element of the same type -
:empty
: empty content -
:checked
: selected mainly forinput
Form element
-
-
Attribute selector
-
E[attr=val]
: -
E[attr|=val]
: can only be equal toval
Or only byval-
Beginning -
E[attr*=val]
: includesval
String -
E[attr~=val]
: There are multiple attribute values, one of which isval
-
E[attr^=val]
: toval
Beginning -
E[attr$=val]
: toval
ending
-
-
Target pseudo class selector
-
:target()
: used to match the target element pointed to by the URL (the style effect will not take effect until the URL points to the matching element)
-
-
Pseudo element:
-
:first-line
: Matches the first line of text and can only be used for block-level elements -
:first-letter
: matches the first character -
:before/:after
: DOM element inserts extra content before and after- Pseudo element encountered
before/after
We will addcontent=''
-
display: block;
: Exclusive line -
display: inline-block;
: not exclusive to one line
- Pseudo element encountered
-
CSS inheritance properties
-
Non-inheritable attribute
-
display
: specifies the type of box the element should generate -
Text properties:
-
vertical-align
: vertical text alignment -
text-decoration
: add text decoration -
text-shadow
: Text Shadow Effect -
white-space
: handling of blank characters -
unicode-bidi
: Sets the direction of text
-
-
Properties of Box Model:
-
width
、height
-
margin
、margin-top/right/bottom/left
-
border
、border-top/right/bottom/left
-
border-style
、border-top/right/bottom/left-style
-
border-width
、border-top/right/bottom/left-width
-
border-color
、border-top/right/bottom/left-color
-
padding
、padding-top/right/bottom/left
-
-
Background properties:
background
background-color
background-image
background-repeat
background-position
background-attachment
-
Location attribute:
float
clear
position
top/right/bottom/left
-
min-width/min-height
、max-width/max-height
overflow
clip
z-index
-
Generate content attributes:
content
counter-reset
counter-increment
-
Profile style properties:
outline-style
outline-width
counter-color
outline
-
-
Inherited attribute
-
Font family properties
-
font
: combined fonts -
font-family
: font family -
font-weight
: font weight -
font-size
: font size -
font-style
: font style -
font-variant
: lowercase letters are converted to uppercase and the font size is smaller -
font-stretch
: for the currentfont-family
Stretch and deform. Not supported by all mainstream browsers. -
font-size-adjust
: Specify a for an elementaspect
Value that maintains the preferred fontx-height
-
-
Text series properties
-
text-indent
: text indent -
text-align
: text aligns horizontally -
line-height
: line height -
word-spacing
: word spacing -
letter-spacing
: character spacing -
text-transform
: Controls the case of text -
direction
: Text Writing Direction -
color
: Text Color
-
- Element visibility:
visibility
-
Table layout properties
caption-side
border-collapse
border-spacing
empty-cells
table-layout
-
List layout properties
list-style-type
list-style-image
list-style-position
list-style
- Generate content attributes:
quotes
- Cursor properties:
cursor
-
Page style properties
page
page-break-inside
windows
orphans
-
CSS3 Core Module
Transition animation
-
transition
: transitional animation-
transition-property
: transition attributeall[attr]
-
transition-duration
: transition time -
transition-delay
: delay time -
transition-timing-function
: type of run-
ease
: (Gradually Slow) Default -
linear
: uniform speed -
ease-in
: acceleration -
ease-out
: slow down -
cubic-bezier
: Bezier curve
-
-
Thinking Steps of Transition Animation Effect:
- Transition attribute found
- Found transition attribute start and end values
- Increase in appropriate position
transition
Attribute
2D transformation
-
transform
: deformation attribute-
rotate()
: rotation function-
deg
: degree -
transform-origin
: Base point of rotation
-
-
skew()
: tilt functionskewX()
skewY()
-
scale()
: The default value of the zoom function is 1scaleX()
scaleY()
-
translate()
: displacement functiontranslateX()
translateY()
-
Animation- Declare Key Frames
-
Key frame-
@keyframes
-
similarly
flash
- Defines the style of animation at each stage, that is, frame animation.
-
The time unit of the keyframe
- Figures:
0%
、25%
、100%
Etc. (Sets the style of any point in time within a certain period of time) - Characters:
from(0%)
、to(100%)
:
- Figures:
-
Format
-
@keyframes
: animation name {Animation Status}
-
-
Animation- Invoke Animation
-
Required attribute
-
animation-name
: Animation Name (Key Frame Name) -
animation-duration
: Animation Execution Time
-
-
Optional attributes:
-
animation-timing-function
-
linear
: uniform speed -
ease
: buffering -
ease-in
: from slow to fast -
ease-out
: from fast to slow -
ease-in-out
: from slow to fast and then to slow -
ease-bezier(num,num,num,num)
: For a specific Bezier curve type, 4 values must be within [0,1] interval
-
-
animation-delay
: animation delay -
animation-iteration-count
: number of repetitions -
animation-direction
: direction of animationnormal|reverse|alternate|alternate-reverse
-
animation-play-state
: animation statusrunning|paused
-
animation-fill-mode
: Status after Animationnone|forwards|backwards|both
-
3D transformation
-
transform-style: flat|preserve-3d
: 3D Space Display -
perspective
: Depth of Field Effect -
transform: persective(800px)
: acts directly on child elements -
transform
: add function-
translate3d(tx, ty, tz)
:translateX()
translateY()
translateZ()
-
rotate3d(rx, ry, rz, a)
:rotateX()
rotateY()
rotateZ()
-
scale3d(sx, sy, sz)
:sacleX()
sacleY()
sacleZ()
-
Rounded border-radius
-
border-radius
: 1-4 digits /1-4 digits- Horizontal radius/vertical radius
- The four numerical directions areTop left, top right, bottom right, bottom left
-
No
/
The horizontal radius is the same as the vertical radiusborder-radius: 10px/5px;
- border-radius: 60px 40px 30px 30px/30px 20px 10px 5px
- Example: Circular Ellipse, Semicircular Sector
Linear-gradient
-
linear-gradient
: ([< starting point > | | < angle >,]? < point >, < point > …) - Can only be used in the background
- Color changes along a straight axis
-
Parameter
- Starting point: Start gradient direction
- Angle: Start Gradient Angle
- Points: Color and Position of Gradient Points
- Repeated linear gradient
Radial-gradient
radial-gradient
- Color Gradient from “One Point” to Multiple Directions
-
shape
Shape:ellipse
、circle
Or set the horizontal radius, vertical radius -
size
: The size of the gradient, that is, where the gradient stops:-
closet-side
: leftmost -
farthest-side
: farthest edge -
closet-corner
: nearest corner -
farthest-corner
: farthest angle (default)
-
-
position
: Keywords | Numeric | Percent - Repeated radial gradient
Background
-
background-origin
-
padding-box
: Frompadding
Area display -
border-box
: Fromborder
Area display -
content-box
: Fromcontent
Area display
-
-
background-clip
-
padding-box
: Frompadding
Region clipping outward -
border- box
: Fromborder
Region clipping outward -
content-box
: Fromcontent
Region clipping outward -
text
: text clipping
-
-
background-size
-
100% 100%
: percentage -
10px 10px
: value -
contain
: Shrink according to the original scale, the background image is complete, but it does not necessarily cover the whole container. -
cover
: Shrink according to the original scale, the background map may not be complete, but it covers the whole container.
-
-
background-attachment
- The background picture is scroll/fixed
fixed
(fixed) by default is rolling
- The background picture is scroll/fixed
Box shadow
-
box-shadow
:h v blur spread color inset;-
h
: horizontal offset -
v
: vertical offset -
blur
: fuzzy radius -
spread
: extended radius -
color
: color -
inset
: inner shadow, default is outer shadow
-
Text shadow
-
text-shadow
:x y blur color-
x
Axis offsety
Axis offset blur color - The multi-layer shadow creates the three-dimensional effect of the text, and sets various colors, separated by commas in the middle.
-
-
Text Add Border
-
text-stroke
:2px blue- By setting
1px
The transparent border of can make the text smooth. - Setting the color to transparent can create hollow fonts.
- By setting
-
Filter
-
-webkit-filter:normal;
: normal -
-webkit-filter:grayscale(1);
: gray scale, value range 0-1 -
-webkit-filter:brightness(0);
: brightness, value range 0-1 -
-webkit-filter:invert(1);
: reverse color, the value range is 0-1, 0 is the original image, 1 is completely reverse color -
-webkit-filter:sepia(0.5);
: Overlay brown, value range 0-1 -
-webkit-filter:hue-rotate(30deg);
: hue (clockwise according to color ring rotation) (red-orange-yellow-yellow-green-green-blue-green-blue-blue-purple-purple-purple-red) here is the superimposed yellow filter -
-webkit-filter:saturate(4);
: saturation, the value range is 0-*, 0 is no saturation, 1 is the original image, the higher the value, the greater the saturation -
-webkit-filter:contrast(2);
: contrast, the value range is 0-*, 0 is no contrast (gray), 1 is the original image, the higher the value, the greater the contrast -
-webkit-filter:opacity(0.8);
: transparency, with values ranging from 0 to 1, 0 being fully transparent and 1 being the original image
Mask
-
mask-image
: -
mask-position
: -
mask-repeat
:
CSS box model
border
Frame
-
Triangle arrow:
- Any two adjacent sides of a square, and then rotate a certain angle to obtain the arrow in any direction we need.
-
border
、border-width
、border-style
、border-color
-
Triangle:
-
border
The 3 attributes of:border-width/border-style/border-color
, width and height are0
, triangle arrow direction set color, other direction color set to transparenttransparent
-
margin
Margin
-
margin
Margin overlap: take a large value, not the sum of the two. -
margin-top
Transmission of: large box nested small box, small box plusmargin-top
Value, passed to the big box, causing the whole to move down.-
Solve
margin
Compatibility issues for:float: left;
overflow: hidden;
padding-top: 0/1px;
border-top: 1px solid transparent;
-
CSS background image
background
Background
Main attributes:
-
background-color
: background color, abbreviationbackground
- Cannot inherit, default is
transparent
-
inherit
Specifies the background color, inherited from the parent element
- Cannot inherit, default is
-
background-image
: background picture-
url
: picture URL address -
node
: no picture placed on default background -
inherit
: Specifies that the background picture is inherited from the parent element -
One element can introduce multiple background pictures;
- Specify one or more background pictures to use. By default,
background-image
Place in the upper left corner of the element and repeat the vertical and horizontal directions
- Specify one or more background pictures to use. By default,
- Attributes cannot be inherited
-
-
background-repeat
: duplicate background- Default repetition
background-image
The vertical and horizontal directions of -
repeat
Default -
repeat-x
Only horizontal positions are repeated -
repear-y
Only vertical positions are repeated -
no-repeat
Do not repeat -
inherit
Inherit from parent element
- Default repetition
-
background-position
: background positioning- Sets the starting position of the background picture
-
x
、y
Horizontal position, vertical position. The upper left corner is0
. Units (px, keywords, percentages) - Keywords appear in pairs.
left right top bottom center
, specifying only one keyword, the other values will becenter
- Set only
x
Axis direction, defaulty
Axis iscenter
-
inherit
Inherit from parent element
-
background-attachment
: background association- Set the background picture to be fixed or scroll with the rest of the page
-
scroll
Default -
fixed
Fixed -
inherit
Inherit from parent element
-
background-size
: Size of background image-
<length>
The length value specifies the image size. Negative values are not allowed -
<percentage>
Percentage specifies the image size. Negative values are not allowed -
auto
The true size of the image -
cover
Scales the background image to completely cover the container, possibly beyond the container. -
contain
The width/height of the container is equal to the width/height of the container, and the background image is always contained in the container.
-
-
background-origin
: Sets the reference origin (position) of the background image-
padding-box
: Frompadding
Area (includingpadding
) Start displaying background -
border-box
: Fromborder
Area (includingborder
) Start displaying background -
content-box
: Fromcontent
The area begins to display the background
-
-
background-clip
: Sets the area where the background image of the object is cropped outward-
padding-box
: Frompadding
Area (excludingpadding
) Start cropping the background outward -
border-box
: Fromborder
Area (excludingborder
) Start cropping the background outward -
content-box
: Fromcontent
The area begins to crop the background outward -
text
: Cut outward from the shape of the foreground content (such as text) as a clipping region to achieve masking effects such as using the background as a fill color.
-
- Sprite map:
background-position: x y
CSS clear float
overflow: hidden
-
overflow
Spill concealment - Clear float
- Solve
margin-top
The problem of transmission of
(face-to-face questions):
-
Ellipsis appears in single-line text (4 required conditions, none required)
-
width
Width (width not written, default inherits width of parent element) -
overflow: hidden;
(Overflow Hidden) white-space: nowrap;
-
text-overflow: ellipsis;
Text is hidden by ellipsis
-
-
Ellipsis appears in multiline text (required condition, mainly applied on mobile side)
-
display: -webkit-box;
Elastic box model -
-webkit-box-orient: vertical;
Specifies the arrangement of elements: vertically -
-webkit-line-clamp: 2;
: Number of lines of text (custom) -
overflow: hidden;
Spill concealment
-
-
Method for displaying multiple elements in one line
display: inline;
display: inline-block;
float: left/right;
display: inline-block;
Characteristics of Elements
- Boxes are arranged horizontally.
-
verticle-align
Attributes affectinline-block
Element, the value may be set totop
- You need to set the width of each column.
-
If there are spaces between elements in HTML source code, there will be gaps between columns.
-
Solution:
- If an element is added
dispay: inline-block;
, the parent element adds an attributefont-size: 0;
, while adding to the element itselffont-size
Attribute to override
- If an element is added
-
-
display:inline-block;
Incompatible Solutions under IE6/7- Increase
display: inline; zoom: 1;
Attribute
- Increase
IE7 Lower Block Element Compatibilitydisplay: inline-block;
Writing?
- Directly set block elements as inline objects (set attributes
display: inline;
), and then triggers the of the block elementlayout
(e.g.:zoom: 1;
, etc.). - The code compatible with each browser is as follows:
div {display: inline-block; *display: inline; *zoom: 1; }
float
Floating
float
Characteristics of Elements
- Show on one line
- Set the property value to
left
, floating elements are arranged from the left side of the parent box to the right in turn - It automatically has attributes of block-level elements and does not need to be added.
display: block;
- Detach from document flow
- Child elements do not inherit floating attributes
- The element below the floating element cannot recognize the height and position of the floating element and occupies the position of the floating element.
- All elements can use floating attributes
Document Flow and Departure Document Flow
- Document Flow: Elements are automatically arranged from left to right and from top to bottom in the process of element layout.
- Each non-floating element block level element has an exclusive row, and floating elements float at one end of the row according to rules. If the current row is full, another row will float.
- Inline elements do not have an exclusive line
- Almost all elements (including block-level, introverted, and list elements) can generate sublines to place subelements.
- Standard document flow level: divided into two levels, block level element and inline element
- Departure from the document flow: normal elements in the document flow cannot recognize this element (elements that depart from the document flow are e quivalent to floating on the document flow in parallel)
float
The influence of elements
- The parent element sets the background color
background-color
Not working - The parent element sets the padding property
padding
Will not be spread out - Parent Element Sets Border Attributes
border
Will not be spread out
Clear floatfloat
How to Clear Floating
- Adds a fixed height to the parent element of a floating element
height
(not recommended) - Adds an overflow hidden attribute to the parent element of a floating element
overflow: hidden;
; -
Add a block-level element after the last floating element with
clear: both;
Attribute-
clear
Clear the influence of floating elements on elements in the document stream (it can make the elements in the document stream recognize the height of floating elements) -
left
Removefloat
Forleft
The impact of -
right
Removefloat
Forright
The impact of -
both
Removefloat
All impacts -
inherit
Inherit the attribute value from the parent element
-
-
clearfix
Clear Float (Fixed Code)- Using pseudo elements
:after
Clear floating prerequisites, one is indispensable. -
display: block;
Ensure that the element is a block level element -
clear: both;
Floating objects are not allowed on the left and right sides. -
content: '';
Pseudo element:brfore/:after
Self-contained attributes, if not written, pseudo elements will not work. - Write full style attributes; Not a prerequisite
-
height: 0;
Prevents default in earlier browsersheight: 1px;
The situation, withheight: 0;
To cover -
font-size: 0;
Font size -
overflow: hidden;
Spill concealment -
visibility: hidden;
Hide all visible elements
- Using pseudo elements
overflow: hidden;
Andvisibility: hidden;
What’s the difference?
(Face-to-Face Questions): How to Make an Element Disappear?
-
opacity: 0;
[0-1] Transparency -
display: none;
Hide -
widht/height/line-height + overflow
: width/height/row height+overflow hiding -
visibility: hidden;
Hide all visible elements
clear: both;
The characteristics of
- Element needs to be a block level element
- Element cannot have floating attribute
- Element must be placed after the last floating element
CSS positioning
-
Relative positioning-
position: relative;
- No departure from document flow
- The reference is the position of the element itself
- When
top
Andbottom
At the same time there is a value,top
The value takes effect and supports negative values. - When
left
Andright
At the same time there is a value,left
The value takes effect and supports negative values. - Any element can set the relative positioning attribute
- The displacement of the relative positioning element changes, but the original position of the element will still be occupied, and other elements will normally recognize the original position of the element.
-
Absolute positioning-
position: absolute;
- Detach from document flow
- You can set a reference object. The reference object must be its parent element (immediate parent). If there is no direct parent, it will look up until the outermost root element is found.
- In case of width and height,
top
Andbottom
At the same time there are values,top
Entry into force;left
Andright
At the same time there are values,left
Effective. - Without width and height,
top
Andbottom
At the same time, when setting the value, the box will be enlarged, the upper and lower values will play a role, and the left and right are the same. - You can set up hierarchical relationships
z-index
The attribute must be used together with the positioning element (absolute, relative, fixed) to be effective. - Positioning (absolute positioning) can be used when one element is positioned on another element or when two elements are superimposed.
- The absolute positioning must set the relative reference object
-
Fixed positioning-
position: fixed;
- Detach from document flow
- The reference object is the visual window of the browser.
- Any element can be set with fixed positioning
- Can be set
top/bottom/left/right
Four directions - Through
z-index
Change hierarchy
-
z-index
Characteristics of attributes- The default is that the positioning element with the writing order after overwrites the positioning element with the order before
- Can be used
z-index
Attribute to modify the hierarchical relationship of positioning elements - For all positioning elements
z-index
The default values are the same -
z-index
The value is a number with no unit. Negative numbers are supported. - Generally, the same level elements are used for level comparison.
- When the reference object is relative or absolute, there are no parent elements
z-index
Value of the child elementz-index
Value for comparison