Vertical center solution

  • Elastic box
    • display:flex
    • align-items:center
    • justify-content:center
  • translate
    • position: absolute
    • top: 50%
    • left: 50%
    • transform: translate(-50%,-50%)
  • Relative positioning
    • position: absolute
    • top/right/bottom/left:0
    • margin:auto
  • table+vertical-align
    • display: table-cell
    • vertical-align: middle

Clear the float and BFC

  • Clear floating Principle
    • Clear floating code
    .clearfix:after{
    content:' '; diaplay:block; Clear :both} clearfix{*zoom:1}Copy the code
    • Main attributes =>clear:both specifies that floating elements are not allowed on the left and right sides
    • display:block Clear only works on block-level elements
    • Visibility: hidden/height: 0 as long as the value of the content is empty, write not write it doesn’t matter
  • Landing the definition
    • The block-level formatting context is a separate render area
    • The elements inside the BFC are isolated from the elements outside, so that the positioning of internal and external elements does not affect each other.
  • The BFC condition is triggered
    • The root element
    • position: absolute/fixed
    • display: inline-block / table
    • Float elements
    • ovevflow ! == visible
  • Landing the rules
    • Two adjacent boxes belonging to the same BFC are arranged vertically
    • Margins of two adjacent boxes belonging to the same BFC will overlap
    • BFC The left side of the margin box of the neutron element, touching the left side of the containing block (BFC) border box (except for the child element Absolute)
    • The region of the BFC does not overlap with the element region of float
    • When calculating the height of the BFC, the floating child element is also calculated
    • The text layer is not covered by the floating layer, which surrounds the text layer
  • Landing the application
    • Prevent margin overlap
    • Can include float elements – clear internal float (clear float because both divs are in the same BFC region)
    • Adaptive two-column layout
    • You can prevent elements from being overwritten by floating elements
    • The float/clear/vertical properties of its children are invalidated

Common CSS Layouts

  • The box model includes the weird box model
  • positioning
  • Fluid layout
  • Liquid layout
  • flex
  • The grid layout

CSS weight

  • CSS weight
    • Precedence of styles. There are two or more styles that apply to an element
    • The style with the highest weight works on the element
    • With the same weight, the style written after will override the style written before.
  • Class of weights
    • ! Important, added after the style attribute value, has a weight value of 10000
    • Inline styles, such as: style=””, have a weight value of 1000
    • The ID selector, such as: #content, has a weight of 100
    • Class, pseudo-class, and property selectors such as: Content, :hover weight value 10
    • Tag selectors and pseudo-element selectors such as: div/p/:before have weight values of 1
    • Universal selector (*), sub-selector (>), adjacent selector (+), sibling selector (~), weight value 0

The difference between p/em/rem

  • Px (pixel): unit of relative length. The pixel PX is relative to the display screen resolution
  • em(A unit of relative length, the font size relative to the text in the current object): EM is a unit of relative length. Font size relative to the text in the current object (the reference is the parent’s font size) relative to the browser’s default font size if the current parent’s font size is not set
    • Feature: the value of em is not fixed /em inherits the font size of the parent element
  • rem(Root EM, root EM)
    • Postcss-px2rem is used in VUE
    • Automatically convert px in vUE project to REM
    • Postcss-plugin-px2rem excludes all CSS files in a folder from px to REM.
    • Rem is a new relative unit in CSS3. Rem is a unit of length calculated relative to the font size of the HTML root element
    • Advantage: you can scale the entire page just by setting the size of the root directory
    • Rem compatibility: Rem is supported in all browsers except IE8 and earlier
  • The difference between EM and REM:
    • Rem is the font size relative to the root element (HTML), while EM is the font size relative to its parent element
    • How to make 1rem=10px? HTML{font-size: 62.5%; } can
  • Supplementary content:
    • Vw is relative to the width of the viewport, and the length is equal to 1/100 of the width of the viewport
    • The VH is relative to the height of the viewport. The length is equal to 1/100 of the height of the viewport
    • The smallest VM is divided into 100 units

Site graying – filter

  • filter:grayscale(100%)

Text overflow

  • A single line of text overflows and omits
    • Overflow :hidden
    • White-space :nowrap(set text to be displayed on one line, no line wrapping)
    • Text-overflow :ellipsis(specifies to display ellipsis when the text overflows to represent the trimmed text)
  • Multiple lines of text overflow and ellipsis(WebKit kernel only)
    • -webkit-line-clamp:2(used to limit the number of actual lines of text in a block element)
    • Display :-webkit-box(used in combination with 1 to display an object as a stretchable box)
    • -webkit-box-orient:vertical(used with 1 to set or retrieve the arrangement of the children of a scale object)
    • overflow:hidden
    • text-overflow:ellipsis

Pseudo-class/pseudo-element

  • Pseudo elements
    • :: Fist-line adds a use style to the first line of text for an element
    • ::first-letter adds a use style to the first letter or first word of the text of an element
    • ::before inserts something before an element
    • ::after inserts something after an element
    • :: Selection Adds a style to the element that the cursor selects
  • pseudo-classes
    • :link
      • Select an unvisited hyperlink element, which changes color as soon as it is clicked. This attribute is used to indicate which link has not been visited
    • :visited
      • In contrast, it is used to mark which links have been visited to prevent repeated clicks
    • :hover
      • Select an element to hover over, which is usually used on PC, but is rarely used on mobile
    • :active
      • Select the element in the point and use it to style the action feedback when you want the button to have feedback
      • It’s not just for buttons
    • :focus
    • :empty
      • Select elements that have no children, such as an empty span
      • Note that even whitespace is not null and will not be selected by this pseudo-class
    • :checked
      • Select the checked input element for radio/ Checkbox only
    • :disabled
      • Select the disabled form element
    • :first/last/nth-child/:nth-last-child(an+b)
    • :only child(select only child element)
    • :not
      • The pseudo-class itself has no priority
      • The priority is determined by what is inside the parentheses

Redraw and backflow

  • Redraw: When the elements of the current page are not separated from the flow of the document, and simple style changes are made, such as changing the color background, browser drawing style, etc
  • Reflux: When the size, position, or properties of the DOM in the document stream change, causing the browser to rerender part or all of the document
  • Reflux consumes more performance than plotting

HTML 5 new features

  • The Canvas element used for drawing
  • Video and Audio elements for media playback
  • SVG, geolocation
  • Better support for local offline storage localStorage(5M storage space >> COOKIES 4K)
  • Semantic tags article, footer, Header, nav, section
  • WebSocket long links

css3

  • Pseudo elements
    • ::first-line
    • ::first letter
    • ::before inserts something before an element
    • ::after inserts something after an element
  • Box-sizing: border-box
  • Elastic box
    • define
      • A layout that ensures that elements behave appropriately when the page needs to accommodate different screen sizes and device types
      • An elastic box consists of a Flex Container and a Flex item.
      • An elastic container is defined as an elastic container by setting the value of the display property to either Flex or inline-flex.
    • flex-directionOrder specifies the location of elastic child elements in the parent container.
      • Row: Horizontal left-to-right arrangement (left-aligned), the default arrangement.
      • Row-reverse: Indicates a horizontal arrangement that is reversed (right aligned, from the back to the front, with the last item first)
      • Column: The column is arranged vertically.
      • Column-reverse: The column is arranged vertically in reverse order, from the back to the front, with the last item at the top.
    • justify-contentProperties (control spindle)
      • justify-content: flex-start | flex-end | center | space-between | space-around
      • Flex-start Elastic items are filled right next to the wardrobe. The default value
      • Flexing -end Elastic items are filled right next to the end of the row.
      • Center Elastic items are centered next to fill.
      • Space-between Elastic items are evenly distributed on the row, and both ends are aligned.
      • Space-around Elastic items are evenly distributed on the line, with half space on each side.
    • align-itemsSets or retrieves the alignment of elastic box elements along the lateral (vertical) axis
      • Flex-start: The boundary of the lateral (vertical) starting position of the elastic box element is immediately adjacent to the lateral starting position of the row.
      • Flex-end: The boundary at the start of the lateral (longitudinal) axis of an elastic box element is immediately adjacent to the lateral end boundary of the row.
      • Center: The elastic box element is centered on the lateral (vertical) axis of the row. (If the size of the row is less than the size of the elastic box element, it will overflow the same length in both directions).
      • Baseline: Equivalent to ‘flex-start’ if the in-row axis and side axis of the elastic box element are the same. In other cases, this value participates in baseline alignment.
      • Stretch: Default value that automatically stretches the child elements to the height of the container
    • flex-wrapProperty is used to specify how the child elements of an elastic box will be newline
      • Nowrap – By default, the elastic container is a single line. In this case, the elastic subitem may overflow the container.
      • Wrap – Elastic containers have multiple rows. In this case, the overflow of the elastic subitem is placed on a new line, and a line break occurs within the subitem
      • Wrap-reverse – Reverses the wrap arrangement.
    • align-contentProperty is used to modify the behavior of the flex-wrap property. Similar to alignment-items, but instead of setting the alignment of elastic child elements, it sets the alignment of individual lines.
      • Stretch – the default. The rows will stretch to take up the remaining space.
      • Flex-start – Lines are stacked to the starting position of the elastic box container.
      • Flex-end – The rows are stacked to the end of the elastic box container.
      • Center – The rows are stacked toward the middle of the elastic box container.
      • Space-between – The rows are evenly distributed in the elastic box.
      • Space-around – The rows are evenly distributed in the elastic box, with half of the spacing between child elements remaining at each end.
    • align-selfProperty is used to set the alignment of the elastic element itself along the lateral (longitudinal) axis
      • Auto: If ‘align-self’ has a value of ‘auto’, it evaluates to the ‘align-items’ value of the element’s parent, and ‘stretch’ if it has no parent.
      • Flex-start: The boundary of the lateral (vertical) starting position of the elastic box element is immediately adjacent to the lateral starting position of the row.
      • Flex-end: The boundary at the start of the lateral (longitudinal) axis of an elastic box element is immediately adjacent to the lateral end boundary of the row.
      • Center: The elastic box element is centered on the lateral (vertical) axis of the row.
      • Baseline: Equivalent to ‘flex-start’ if the in-row axis and side axis of the elastic box element are the same. In other cases, this value participates in baseline alignment.
      • Stretch: If the side axis size attribute is set to’ auto’, the value will make the item’s margin box size as close to the row size as possible, but will comply with the ‘min/max-width/height’ attribute.
    • The Flex attribute is used to specify how the elastic child element allocates space
    • Eg: Flex -basis:200px; flex-basis:200px;
  • Background and border
    • border-radius
    • box-shadow
    • border-image
    • background-size
    • background-origin
    • content-box
    • padding-box
    • border-box
    • Multiple background backstory image: URL (bg_flower.gif), URL (bg_flower_2.gif);
    • Text-shadow: 5px 5px 5px #FF0000;
    • Word-wrap allows you to allow text to force text to wrap even if it means breaking up words
  • The font
    • Store the font file on the Web server, and it will be automatically downloaded to the user’s computer when needed (it was previously downloaded locally)
    • Defined in the @font-face rule
      • First define the name of the font (such as myFirstFont) and then point to the font file
  • 2 d / 3 d conversion
    • CSS3 transformation, we can move, scale, rotate, stretch, or stretch elements
    • The 2 d transformation
      • translate()–translateX/Y
        • transform: translate(50px,100px); Move the element 50 pixels from the left and 100 pixels from the top
      • rotate():transform: rotate(30deg); Rotate the element clockwise by a given Angle. If negative values are allowed, the elements will rotate counterclockwise
      • Scale ()–scaleX/Y transform: scale(2,4) –scaleX/Y transform: scale(2,4)
      • skew()SkewX /Y the element flips the given Angle according to the given horizontal (X-axis) and vertical (Y-axis) parameters
        • transform: skew(30deg,20deg); Flip the element 30 degrees around the X axis, 20 degrees around the Y axis
      • matrix()
        • Combine all the 2D conversion methods together
        • The matrix() method takes six parameters and contains mathematical functions that allow you to: rotate, scale, move, and tilt elements
    • 3 d conversion
      • translateX(x) /translateY(y)/translateZ(z)
      • scale3d(x,y,z)/scaleX(x)/scaleY(y)/scaleZ(z)
      • rotate3d(x,y,z,angle) /rotateX(angle)/rotateY(angle)/rotateZ(angle)
  • Transition effect
    • transition: property duration timing-function delay;
    • The transition
    • The transition – property: properties
    • The transition – duration: interval
    • The transition – the timing – function: curve
    • The transition – delay, delay
  • animation
    • @keyFrames create animation rule (from-to/0%~100%)
      • @keyframes myfirst{from {background: red; }to {background: yellow; }}
    • animation: myfirst 5s linear 2s infinite alternate;
    • Animation-timing: Specifies the velocity curve of the animation. The default is to ease
    • Animation-delay: Specifies when the animation starts. The default is 0
    • Animation-iteration count: Specifies the number of times an animation can be played. The default is 1
    • Animation-direction: Specifies whether the animation will play backwards in the next cycle. The default is normal
    • Animation-play-state: Specifies whether the animation is running or paused. The default is running
    • Animation-fill-mode: Specifies how to get forwards towards the target of the animation before and after execution. Default is None
  • Easter Egg: What’s the difference between transition and animation?