CSS

Introduce the CSS box model?

(1) There are two types, IE box model and standard W3C box model; the content part of IE includes border and pading;

(2) Box model: content, filling (padding), border (margin), border (border).

What are the CSS selectors? What properties can be inherited? How is the priority algorithm calculated? What are the new pseudo-classes in CSS3?

* 1. 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 selection Selector (a[rel = "external"])
9. Pseudo-class selector (a: hover, li: nth - child)

* Inheritable styles: font-size font-family color , UL LI DL DD DT;

* Non-inheritable styles: border padding margin width height ;

* Priority principle, the closest style definition shall prevail under the same weight;

* The loading style is subject to the last loaded positioning;

The priority is:

!important > id > class > tag

important has a higher priority than inline

Example of new pseudo-class in CSS3:

p:first-of-type selects the first

belonging to its parent element Each

element of the element.
p:last-of-type Selects each

element that is the last

element of its parent element.
p:only-of-type Selects each

element that is the only

element of its parent element.
p:only-child Selects each

element that is the only child element of its parent element.
p:nth-child(2) Selects each

element that is the second child of its parent element.
:enabled :disabled controls the disabled state of the form control.
:checked The radio button or check box is selected.

How to center a div? How to center a floated element?

Set a width for the div, and then add the margin:0 auto attribute

div{
width:200px;
margin:0 auto;
}

Center a floating element

Determine the container's width, height, width, 500 and height 300 layers
Set the margins of the layer

.div {
Width:500px; height:300px;//The height can be left unset
Margin: -150px 0 0 -250px;
position:relative; relative positioning
background-color:pink;//Easy to see the effect
left:50%;
top:50%;
}

List the display values and describe their functions. What is the value of position, relative and absolute positioning origin?

1.
block is displayed like a block type element.
none Default value. Appears like an inline element type.
inline-block is displayed like an inline element, but its content is displayed like a block type element.
list-item is displayed like a block type element and adds style list markup.

2.
*absolute
Generate an absolutely positioned element, positioned relative to the first parent element other than static positioning.

*fixed (old IE does not support)
Generate absolutely positioned elements, positioned relative to the browser window.

*relative
Generates a relatively positioned element, positioned relative to its normal position.

* static Default value. Without positioning, the element appears in the normal flow
* (ignoring top, bottom, left, right z-index declarations).

* inherit specifies that the value of the position attribute is inherited from the parent element.

What are the new features of CSS3?

CSS3 implements rounded corners (border-radius: 8px), shadow (box-shadow: 10px),
Add special effects to text (text-shadow,), linear gradient (gradient), rotation (transform) )
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//Rotation, scaling, positioning, tilt
Added more CSS options Device multi-background rgba

How to design a full-screen character layout?

What are the compatibility of frequently encountered CSS? Cause and solution?

Why initialize CSS styles.

- Due to browser compatibility issues, different browsers have different default values for some tags. If CSS is not initialized, page display differences between browsers will often occur.

- Of course, the initialization style will have a certain impact on SEO, but you can’t have your cake and eat it too, but try to initialize it with the least impact.

*The simplest initialization method is: * {padding: 0; margin: 0;} (not recommended)

Taobao style initialization:
body, h1, h2, h3 , h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0 ; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100 %; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

##absolute containing How is the block calculation method different from the normal flow?

What will happen when the features of position, display, margin collapse, overflow, and float are superimposed on each other?

Understanding of BFC specifications?

(A concept in the W3C CSS 2.1 specification that determines how an element positions its content, as well as its relationship and interaction with other elements.)

defined by css Weight

The following are the weight rules: the weight of label is 1, the weight of class is 10, and the weight of id is 100. The following examples demonstrate the weight values of various definitions:

/* The weight is 1*/
div{
}
/*The weight is 10*/
.class1{
}
/*The weight is 100*/
#id1{
}
/*The weight is 100 1=101*/
#id1 div{
}
/*The weight is 10 1=11*/
.class1 div{
}
/*The weight is 10 10 1=21*/
.class1 .class2 div{
}

If the weights are the same, the last defined style will work, but it should To avoid this situation

Explain float and how it works? Tips for clearing floats

Have you ever used media queries for mobile layout?

Use CSS preprocessor? Like that one?

SASS