css interview summary

Summary of questions: 160cbf11b8e13f https://segmentfault.com/a/1190000040189169
px rem em difference
A.px

1. Relative length unit. Relative to the monitor screen resolution.

2. There is a browser incompatibility problem.

Two.em

1. Relative length unit. Relative to the font size of the text in the current object.

2. The em value is not fixed, em will inherit the size of the parent element.

3. If the parent sets font-size: 20px. Then 1em=20px. 2em=40px; If the parent sets font-size to 30px. 1em=30px. 2em=60px.

4. There are problems that easily cause confusion in font settings.

Three.rem

1. Relative length unit. It is calculated relative to the html font size of the root node. The default font height of any browser is 16px.

2. If the html root node sets the font font-size to 100px. Then 1em=100px. 2em=200px. It has nothing to do with the parent font.

3. The browser compatibility is better.

the difference between display: none and visibility: hidden?

display:none hides the corresponding element, no more space is allocated to it in the document layout, and the elements on each side of it will collapse.
As if he never existed.
visibility: hidden hides the corresponding element, but still retains the original space in the document layout.

is the difference between link and @import in CSS?

(1) Link is an HTML tag, and @import is provided by CSS;
(2) When the page is loaded, the link will be loaded at the same time, and the CSS referenced by @import will wait until the page is loaded before loading;
(3) Import can only be recognized above IE5, and link is an HTML tag, so there is no compatibility problem;
(4) The weight of the link style style is higher than the weight of @import.

introduce the box-sizing attribute and box model?

Box model: content + border + padding +margin

The box model is divided into: basic model (w3c standard box model) + IE model (basic model width=content IE model width=content+border+padding)

How to distinguish between basic model and IE model

The new attribute Box-sizing in Css3 has two values: content-box (basic model) and border-box (IE model)

Get the width and height corresponding to the box model: dom.style.width/height

The box-sizing attribute is mainly used to control the analytical mode of the element's box model. The default value is content-box.

content-box: Let the element maintain the W3C standard box model. The width/height of the element is determined by the width/height of border + padding + content. Setting the width/height property refers to the width/height of the content part
border-box: Let the element maintain the IE traditional box model (IE6 and below and the weird mode of IE6~7). Setting the width/height property refers to border + padding + content
In standard browsers, the box model is analyzed according to W3C specifications. Once the border or inner margin of the element is modified, the box size of the element will be affected, and the box size of the element will have to be recalculated, thereby affecting the layout of the entire page.

CSS selectors? Which 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. Sub-selector (ul> li)
6. Descendant selector (li a)
7. Wildcard selector (*)
8. Attribute selector (a[rel = "external"])
9. Pseudo-class selector (a: hover, li: nth-child)

inheritable style : font-size font-family color, text-indent;

non-inheritable style : border padding margin width height;

priority of is 160cbf11b8e4c6: !important> id> class> tag (important has higher priority than inline, but inline is higher than id)

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 every <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 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 every <p> element that belongs to the second child element of its parent element.
:enabled :disabled Controls the disabled state of form controls.
:checked The radio button or check box is checked.

position value, relative and absolute relative to whom are they positioned relative to?

absolute

 生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。

fixed (old IE does not support)

生成绝对定位的元素，相对于浏览器窗口进行定位。 

relative

生成相对定位的元素，相对于其在普通流中的位置进行定位。 

static default value. No positioning, the element appears in the normal flow

What are the new features of CSS3?

Official website tutorial: https://www.runoob.com/css3/css3-tutorial.html

CSS3 implements border-radius, box-shadow,
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);//rotate, zoom, position, tilt
Added more CSS selectors multi-background rgba
The only pseudo-element introduced in CSS3 is ::selection.
Media query, multi-column layout
border-image

's understanding of the BFC specification?

BFC is a block-level formatting context. It is a relatively independent rendering area in the page. It determines how the internal sub-elements are placed and positioned, and the relationship between the internal elements of the area and the external elements of the area.
Features :

     1.bfc可以包含浮动元素

     2.bfc所确定的区域不会与外部浮动元素发生重叠

     3.位于同一bfc下的相邻块级子元素在垂直方向上发生margin重叠

how to create bfc : float value is not none, overflow value is auto, display value is inline-block, position value is flex or absolute

common compatibility issues?

• The png24-bit picture appears as a background on the iE6 browser. The solution is to make it into PNG8. You can also quote a script for processing.
• The browser default margin and padding are different. The solution is to add a global *{margin:0;padding:0;} to unify.
• IE6 double-side distance bug: After the block attribute tag is float, there is a horizontal margin, and the margin is larger than the setting in IE6.

• Double distance caused by floating ie (IE6 bilateral distance problem: Under IE6, if the element is set to float and margin-left or margin-right is set at the same time, the margin value will be doubled.) #box{ float:left; width :10px; margin:0 0 0 100px;}

  In this case, IE will generate a distance of 20px. The solution is to add-_display:inline; to the label style control of the float to convert it into an inline attribute. (_This symbol is only recognized by ie6)

• The method of progressive identification gradually excludes the part from the whole.

  First, cleverly use the "\9" mark to separate the IE browser from all situations.
  Then, use "+" again to separate IE8 from IE7 and IE6, so that IE8 has been independently identified.

  css

  .bb{
   background-color:#f1ee18;/*所有识别*/
  .background-color:#00deff\9; /*IE6、7、8识别*/
  +background-color:#a200ff;/*IE6、7识别*/
  _background-color:#1e0bd1;/*IE6识别*/ 
  } 
  

• Under IE, you can use the method of getting general attributes to get custom attributes.
  You can also use getAttribute() to get custom attributes;
  Under Firefox, you can only use getAttribute() to get custom attributes.
  Solution: Get custom attributes uniformly through getAttribute().
• Under IE, the event object has x, y attributes, but no pageX, pageY attributes;
  Under Firefox, the event object has pageX and pageY attributes, but no x and y attributes.
• Solution: (Conditional comment) The disadvantage is that it may increase the number of additional HTTP requests under the IE browser.
• In the Chrome Chinese interface, text smaller than 12px will be forced to display at 12px by default.
  It can be solved by adding the CSS property -webkit-text-size-adjust: none;.
• The hover style does not appear after the hyperlink is accessed. The hyperlink style that has been clicked and visited no longer has hover and active. The solution is to change the order of the CSS properties:
  L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
• Weird mode problem: Omitting to write DTD statement, Firefox will still parse web pages according to the standard mode, but it will trigger the weird mode in IE. In order to avoid the weird pattern from bringing us unnecessary trouble, it is best to develop a good habit of writing DTD statements. Now you can use html5 recommended writing: <doctype html>
• Coincidence of upper and lower margins
  Both ie and ff exist, the margin-left and margin-right of two adjacent divs will not overlap, but the margin-top and margin-bottom will overlap.
  The solution is to develop a good code writing habit, and use margin-top or margin-bottom at the same time.
• IE6 does not support png image format well (quote a script for processing)

What are the methods to clear floats?

Floating elements leave the document flow and do not take up space. The floating element touches the border that contains it or the border of the floating element stays.
1. Use an empty label to clear the floating .

This method is to add an empty tag definition css clear:both after all floating tags. The disadvantage is that it adds meaningless tags.

2. Use overflow .

Add css attributes overflow:auto; zoom:1; zoom:1 to the parent tag containing floating elements for compatibility with IE6.

3. Use the after pseudo object to clear the floating .

This method is only applicable to non-IE browsers. Please refer to the following example for specific writing. Pay attention to the following points during use. 1. In this method, height:0 must be set for the pseudo object that needs to clear the floating element, otherwise the element will be several pixels higher than the actual one;

.clearfix:after;{

    content:"";

    display:block;

    height:0;

    clear:both;

    visibility:hidden;

 }

realize the two-column layout? (Assuming that the left side is 200 wide and the right side is adaptive -)

1. Use float: the left box uses float: left; the right box uses margin-left: 200px

2. Use positioning: absolute+margin

3. Use flex: Big box flex, right box flex is set to 1

4. Use float + BFC: use float for left box: left and right box set overflow: hidden(float+BFC)

achieve three-column layout? (Assuming the height is known, please write a three-column layout, where the left and right widths are each 300px, and the middle is adaptive)

<div class="box1">
　　<div class="left1"></div>
　　<div class="right1"></div>
　　<div class="center1"></div>
</div>

1. Use floating : the left and right boxes float left and right center to set margin-left: 300px and margin-right: 300px

2. Use absolute positioning : Absolute positioning absolute left: 0 right: 0 top: 0, center setting margin-left: 300px and margin-ringht: 300px

3. Use flexible layout : large box box1 set display: felx, center box set felx: 1

4. Use display: table to layout : set display: table for the big box, set display: table-cell for the left and right boxes

is centered vertically and horizontally?

1. Horizontally centered : Set a width to the div, and then add the margin:0 auto attribute

2. Turn the element into a positioning element position: absolute ;

Set the positioning position of the element, the distance from top, bottom, left, and right is 0

left:0;

right:0;

top:0;

bottom:0;

margin：auto；

*Good compatibility, disadvantages: browsers below IE7 are not supported

3. Turn the element into a positioning element position: absolute ;

Set the positioning position of the element, the distance from top and left is 50%

left:50%;

top:50%;

Set the left and top margins of the element to minus 1/2 of the width and height

margin-left:-100px;

margin-top:-200px;

}

* Good compatibility; Disadvantages: You must know the width and height of the element

4. Turn the element into a positioning element position: absolute+transform ;

Set the positioning position of the element, the distance from top and left is 50%

left:50%;

top:50%;

Set the offset of the element relative to itself to minus 50% (that is, half of the element's own size)

transform:translate(-50%,-50%);

*This is the style in css3; Disadvantages: compatibility is not good, only supports IE9+ browsers

5. Use flex layout

The parent box sets display: flex;

align-items:center;/ vertical center /

justify-content:contenr/ horizontally centered /

Triangle style