HTML plus CSS for front-end interview questions

1. A 200*200 div is centered up, down, left and right on different resolution screens, implemented by css

Method one
uses negative values to achieve centering. It can be brain-filled that the screen is 50% from the left and right, which can be centered, but where the DIV is located, the width from the left and right outer borders is minus 50%.

div{
    
    
	position:absolute;
	width:200px;
	height:200px;
	top:50%;
	left:50%;
	margin-left:-100px;
	height:-100px;
}

div{
    
    
 	position:absolute; 
    width:200px; 
    height:200px; 
    top:50%; 
    left:50%;
    transform: translatey(-50%) translateX(-50%) 
}

2. Write a left, center, and right layout that fills the screen. The left and right blocks have a fixed width of 200 and the middle is self-adaptive. It is required to load the middle block first. Please write the structure and style:

HTML part

	 <body>  

        <h3>实现三列宽度自适应布局</h3>  

        <div id = "left">我是左边</div>  

        <div id = "right">我是右边</div>  

        <div id = "center">我是中间</div>  

	</body>

CSS part

html,body{
    
     
	margin: 0px;
	width: 100%; 
}  

h3{
    
    
	height: 100px;
	margin:20px 0 0;
}  

#left,#right{
    
    
	width: 200px;
	height: 200px; 
	background-color: #ffe6b8;
	position: absolute;
	top:120px;
}  

#left{
    
    
	left:0px;
}  

#right{
    
    
	right: 0px;
}  

#center{
    
    
	margin:2px 210px ;
	background-color: #eee;
	height: 200px; 
}

3. Explain several ways to clear floats (common problems)

1. The parent div defines the height

Principle: Manually define the height of the parent div to solve the problem that the parent div cannot automatically obtain the height.

Advantages: simple, less code, easy to understand.

Disadvantages: Only suitable for fixed-height layouts. The exact height must be given. If the height is different from the parent div, problems will occur

Recommendation: not recommended, only recommended for fixed height layout

2. The parent div definition overflow: hidden

Principle: width or zoom:1 must be defined, and height cannot be defined at the same time. When overflow:hidden is used, the browser will automatically check the height of the floating area.

Advantages: simple, less code, good browser support

Disadvantages: cannot be used with position, because the excess size will be hidden

Recommendation: Only recommend to friends who do not use position or who have a deeper understanding of overflow:hidden

3. Parent div definition overflow: auto

Principle: You must define width or zoom:1, and you cannot define height. When overflow:auto is used, the browser will automatically check the height of the floating area.

Advantages: simple, less code, good browser support

Disadvantages: When the internal width and height exceed the parent div, a scroll bar will appear.

Recommendation: Not recommended. Use it if you need scroll bars or make sure your code does not show scroll bars.

4. The parent div defines pseudo-classes: after and zoom

Principle: IE8 and above and non-IE browsers only support: after, zoom (IE proprietary properties) can solve the floating problem of IE6 and IE7

Advantages: The browser has good support and is not prone to strange problems (currently: large websites are used)

Disadvantages: too much code, many beginners do not understand the principle

5. Add an empty div tag clear: both at the end

Principle: Add an empty div, use css to improve clear:both to clear the float, and let the parent div automatically get the height.

Advantages: simple, less code, good browser support, not prone to problems

Disadvantages: Not recommended, but this method is a method of clearing floats mainly used before

4. Explain how to use css sprites?

CSS Sprites actually integrates some background images in a web page into an image file, and then uses the combination of CSS "background-image", "background-repeat", and "background-position" for background positioning. Background-position can be used The number can accurately locate the position of the background picture.

CSS Sprites saves bandwidth for some large websites, improves the user's loading speed and user experience, and does not need to load more images

5. What are the common attributes of box-sizing? What is the role of each?

Attribute value

box-sizing：content-box

box-sizing：border-box

box-sizing：inherit

content-box
This is the default attribute value of box-sizing

Is the width and height display behavior specified in CSS2.1

The width and height defined in CSS correspond to the content box of the element

Draw the padding and border of the element outside the width and height defined in CSS

border-box

The width and height set by the micro element in CSS determines the element's border box

That is, the element is drawn within the set width and height when setting the inner margin and border

The width and height set in CSS minus the border and inner spacing can get the actual width and height occupied by the element content

(Q1)box-sizing: content-box|border-box|inherit;
(Q2)content-box: width and height are respectively applied to the content box of the element. Draw the inner margin and border of the element outside of the width and height (the default effect of the element).
border-box: Any inner margins and borders specified by the element will be drawn within the set width and height. The width and height of the content can be obtained by subtracting the border and inner margin from the set width and height respectively.

6. What are the CSS selectors, the priority of the weight of the selector

Selector type

ID #id
class .class
Label p
General *
Attribute [type="text"]
Pseudo class: hover
Pseudo-element::first-line

Weight calculation rules

First class: Represents inline style, such as style="", weight 1000.
Second class: ID selector, such as #id, weight 0100,
The third class: representative class, pseudo-class and attribute, such as .class, weight 0010.
The fourth class: represents the note selector and the element selector, such as div, p weight 0001.
Wildcard, such as * weight 0000

7. The difference between px and em

px means pixel (a point on the computer screen: 1px = 1/96in), which is an absolute unit and will not change due to changes in the size of other elements;

em represents the font size relative to the parent element. em is a relative unit, there is no fixed measurement value, but a relative value determined by the size of other elements.

8. Please briefly describe the margin overlap problem and the solution

The margins of two adjacent boxes in the vertical direction will overlap, and the larger value is taken instead of adding.

Solution:
　　parent setting padding instead of margin
　　parent setting overflow: hidden
　　current element to set a transparent border
　　use absolute positioning
　　use float or set as an inline block
　　I
　　said so much for a 1-pixel inner margin , can’t you just do that? How good is it to write a margin value?

9.h5/c3 new features

New features of h5 and c3

10.display none visibility hidden区别？

1. display:none disappears completely, does not occupy a position in the document stream, and the browser will not parse the element; visibility: hidden is visually disappeared, which can be understood as the effect of 0 transparency, occupying a position in the document stream, The browser will parse the element;

2. Using visibility: hidden is better than display: none in terms of performance. When display: none is switched to visibility, the page will reflow (when part of the elements on the page need to be changed in scale, size, layout, display and hide, etc., the page is rebuilt. Reflow. All pages need to be reflowed the first time they are loaded), and the visibility switch will not cause reflow when they are displayed.