Draw a line 1px high to make it look the same across different browsers

<div style="height:1px; overflow: hidden; background: red"><div>
Copy the code

The box model

There are two types of box models: The IE box model is made up of content, padding, margin and border, while the IE box model’s content area includes border and padding You can use box-sizing: border-box to set the IE box model

The CSS can clear floats in several ways

  • Place another label under the float element and useclear:bothRemove the floating
<ul>
  <li>11</li>
  <li>22</li>
  <li>33</li>
  <span></span>
</ul>

<style>
  ul {
    background: yellow;
  }
  li {
    background: red;
    float: left;
    width: 100px;
    height: 100px;
    margin: 10px;
  }
  span{
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
  }
</style>
Copy the code
  • Creating a Formatting Context (BFC)
<ul>
  <li>11</li>
  <li>22</li>
  <li>33</li>
</ul>

<style>
ul {
  background: yellow;
  overflow: hidden;
  float: left;
  /* position: fixed; * /
  /* position: absolute; * /
  /* display: inline-block; * /
  /* display: table-cell; * /
  /* display: table-caption; * /
  /* overflow: hidden; * /
  /* overflow: scroll; * /
  /* overflow: auto; * /
}

li {
  background: red;
  float: left;
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>
Copy the code
  • add::afterPseudo elements
<ul class="clearfix">
  <li>11</li>
  <li>22</li>
  <li>33</li>
</ul>
<style>
  li {
    background: red;
    float: left;
    width: 100px;
    height: 100px;
    margin: 10px;
  }

  ul {
    background: yellow;
  }

  /* Add the pseudo-element */
  .clearfix::after {
    content: "";
    height: 0;
    display: block;
    clear: both;
  }
</style>
Copy the code

How to hide elements

div {
  /* Set transparency to take up space */
  opacity: 0;

  /* Hide occupied space */
  visibility: hidden;

  /* Location: set top left to negative space */
  position: absolute; /* flexd */
  top: -99999px;
  left: -99999px;

  /* Hiding does not take up space */
  display: none;
}
Copy the code

The difference between link and @import

  • Link is a tag, there is no compatibility, the page load synchronously load, can use JS to operate
  • @import is used by CSS to import stylesheets. Only after the CSS is loaded will other CSS be referenced, which can be recognized by IE5+

The difference between pseudo-classes and pseudo-elements

  • Pseudo-classes use a single colon:, pseudo-elements use double colons: :
  • Pseudo-classes are used for existing elements to add styles to them in certain states, such as::link :hover :active
  • Pseudo-elements are used to create and style elements that do not exist in the DOM, such as::after ::before

What are the CSS selectors? Which attributes can be inherited? How is the priority algorithm calculated? CSS3 new pseudo class has those?

Id selector (# myID) 2. Class selector (.myclassName) 3. Tag selector (div, H1, P) 4. Adjacent selector (H1 + P) 5. Child selector (ul < Li) 6. Descendant selector (Li A) 7. Wildcard selector (*) 8. Attribute selector (a[rel = "external"]) 9. Pseudoclass selector (a: hover, Li: nth-child) * * uninheritable: border padding margin width height; * The nearest priority principle, the closest style definition shall prevail; * The loading style is based on the last loaded location; The priority is:! CSS3 new pseudo-class example: p:first-of-type Selects each <p> element that belongs to the first <p> element of its parent element. P :last-of-type Selects each <p> element that belongs to the last <p> element of its parent element. P :only of type Selects each <p> element that belongs to the <p> element unique to its parent element. P :only-child Selects each <p> element that belongs to the only child of its parent element. P :nth-child(2) selects each <p> element that belongs to the second child of its parent. :enabled, :disabled Controls the disabling status of form controls. :checked, checkbox or checkbox is selected.Copy the code

What are the specific differences between inline elements and block-level elements? Are the padding and margin of the inline elements settable?

  • Block-level elements feature:

Always monopolize a line and appear to start on another line, and subsequent elements must also appear on another line; Width, height, padding, and margin are all controllable;

  • Inline elements feature:

On the same line as the adjacent inline element; Width/height/padding-top/padding-bottom/margin-top/maring-bottom are immutable

  • An element that defaults to inline-block

What is margin overlap? What’s the result of the overlap?

Margin overlap is margin-collapse.

In CSS, the margins of two adjacent boxes (which may be siblings or ancestors) can be combined to form a single margin. This way of combining margins is called folding, and the resulting margins are called folded margins.

The folding results follow the following calculation rules:

  1. When two adjacent margins are both positive, the result of folding is the larger value between them.
  2. When two adjacent margins are both negative, the result of folding is the greater value of their absolute values.
  3. When two margins are positive and negative, the result of folding is the sum of the two.

What is the difference between rGBA () and opacity?

Opacity both rgba() and opacity work, but the biggest difference is that opacity works on an element and any content inside it, while rgba() only works on the element’s color or its background color

Method of overlapping text center and horizontal direction

Horizontal direction: letter-spacing

How to center vertically

  • Absolute positioning
.main {
  width: 100px;
  height: 100px;
  / * * /
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
}

.main {
  width: 100px;
  height: 100px;
  / * * /
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)}.main {
  width: 100px;
  height: 100px;
  / * * /
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
Copy the code
  • Flex layout
<div id="box">
  <div id="main"></div>
</div>
Copy the code
#box {
  display: flex;
  /* Set the inner box to be vertically centered */
  align-items: center;
  /* Set the inner box horizontally centered */
  justify-content: center;
}
#main {
  width: 200px;
  height: 200px;
  background: red;
}
Copy the code
  • Img center
.content {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
Copy the code

BFC

Block Formatting Context (BFC) is a CSS rendering mode for the layout of a box model in a Web page. It refers to an independent rendering area or an isolated independent container.

Conditions for the formation of BFC

  • Float element, float a value other than None
  • Position element, position (Absolute, fixed)
  • Display is one of the following inline-block, table-cell, table-caption values
  • Overflow values other than visible (hidden, auto, scroll)

The characteristics of landing

  • The internal boxes will be placed one after the other vertically.
  • The vertical distance is determined by margin
  • The region of the BFC does not overlap with the element region of float.
  • When calculating the height of the BFC, floating elements are also involved
  • A BFC is a separate container on the page, and the child elements inside the container do not affect the outside elements.