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<p> belonging to its parent element Each <p> element of the element.
p:last-of-type Selects each <p> element that is the last <p> element of its parent element.
p:only-of-type Selects each <p> element that is the only <p> element of its parent element.
p:only-child Selects each <p> element that is the only child element of its parent element.
p:nth-child(2) Selects each <p> 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; }
/* 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
