1. What’s in a box model? Explain box-sizing properties (be sure to, ask several times)

Css sets each element into a rectangular box, and the layout of the page is made up of different boxes placed in corresponding positions. Each box is composed of content, padding, border, and margin. The IE box model differs from the W3C box model in that its content includes padding and border. In addition, box-sizing can set how the box size is calculated. Optional values include content-box, which sets the size of the content area, and border-box, which sets the size of the visible box.

2. Selector weight (must be)

Inline style > ID Selector > Class and Pseudo-Class Selector > Element Selector > Wildcard Selector

3. Clear float (appropriate back some)

  • Extra tag – just add an empty tag to the end of the parent element and writeclear: both;
  • Parent added overflow property method triggeredBFC--overflowforhidden | auto | scrollIt can be done. Can clear float, but also overflow hidden.
  • Clear float for after pseudo-element – write the following class and add a class to the parent element that needs to clear float effects. Find the element with the clearfix class and add an empty block-level element at the end of its contents. Then add a property to clear float for that block-level element.
  • The parent element is set at the end<br clear="all" />
  • Set to the parent elementdisplay:table

 

4. The box is in the center horizontally and vertically (some back is appropriate)

  • Position: Absolute You need to know the height and width of the subbox

    • Large box relative; Small box absolute, topleft 50%, margintopleft- small box half width

  • Margin: Auto

    • Top, right, left, bottom: 0, margin: auto;

  • Transform

    • Ibid. Topleft: 50%, tansform: translate (-50%, -50%)

  • Display:flex

    • Display:flex; justify-content:center; align-items:center;

  • Display:table-cell

    • Control text display:inline-block

  • Js implementation

    • Box. Style. The position = 'absolute'.
    • Box. Style. Left/right = '(winW - boxH/W) / 2 + PX' ' '

 

5. New Css3 features (this one needs to be memorized)

  • Box-shadow
  • Box-radius
  • Css3 selectors last-Child, nTH-Child
  • The gradient
  • Elastic box of flex
  • Transition, animation, deformation

6. Flex layout (this should be done)

  • Flex is a layout tool in CSS. It is mainly used as an alternative to float. Flex can make elements elastic, so that they can change with the size of the page.
  • Elastic containers and elastic elements
  • The container properties include flex-direction, flex-wrap line feed, and justify-content
  • The element attributes include flex-grow, Flex-shrimk, Flex-basis, and ORDER