21. What is Css Hack? What are the hacks of ie6,7,8?
Answer: The process of writing different CSS codes for different browsers is a CSS hack.
Examples are as follows:
#test {
width:300px;
height:300px;
background-color:blue; /*firefox*/
background-color:red\9; /*all ie*/
background-color:yellow; /*ie8*/
+background-color:pink; /*ie7*/
_background-color:orange; /*ie6*/ }
:root #test { background-color:purple\9; } /*ie9*/
@media all and (min-width:0px){ #test {background-color:black;} } /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/
22. Please use Css to write a simple slideshow page
Answer: I know I want to use css3. Use animation animation to achieve a simple slide effect.
/**HTML**/
div.ani
/**css**/
.ani{
width:480px;
height:320px;
margin:50px auto;
overflow: hidden;
box-shadow:0 0 5px rgba(0,0,0,1);
background-size: cover;
background-position: center;
-webkit-animation-name: "loops";
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes "loops" {
0% {
background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat;
}
25% {
background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat;
}
50% {
background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat;
}
75% {
background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat;
}
100% {
background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat;
}
}
24. What is the specific difference between inline elements and block-level elements? Can the padding and margin of inline elements be set?
Block-level elements (block) characteristics :
always occupy a line, behave as a new line start, and the following elements must also be displayed on a new line;
width (width), height (height), inner margin (padding) and outer margin The distance (margin) can be controlled;
Inline element (inline) characteristics :
in the same line as the adjacent inline element;
width (width), height (height), inner margin top/bottom (padding-top/padding-bottom) and outer margin top /bottom (margin-top/margin-bottom) can not be changed (that is, the left and right of padding and margin can be set), which is the size of the text or picture inside.
So the question is, the browser also has a default inline-block element (with built-in size, height and width can be set, but it will not automatically wrap), what are there?
Answer:<input> 、<img> 、<button> 、<texterea> 、<label> .
25. What is margin overlap? What is the result of the overlap?
Overlapping margins is margin-collapse.
In CSS, the margins of two adjacent boxes (which may be siblings or ancestors) can be combined into a single margin. This method of combining margins is called folding, and the combined margins are called folded margins.
The folding result follows the following calculation rules: When
two adjacent margins are both positive, the folding result is the larger value between them.
When two adjacent margins are both negative, the result of folding is the larger of the absolute values of the two.
When two outer margins are one positive and one negative, the folding result is the sum of the two.
26. What is the difference between the transparency effects of rgba() and opacity?
Both rgba() and opacity can achieve transparency, but the biggest difference is that opacity acts on the element and the transparency of all content within the element,
while rgba() only acts on the color of the element or its background color. (The child elements of elements that set rgba transparent will not inherit the transparency effect!)
27. What are the two attributes that can make text overlap in the vertical and horizontal directions in css?
Vertical direction: line-height
Horizontal direction: letter-spacing
So the question is coming, do you know what is the magical effect of letter-spacing?
Answer: It can be used to eliminate the space gap between inline-block elements.
28. How to center a floating element vertically?
// 方法一：已知元素的高宽
#div1{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; //父元素需要相对定位
top: 50%;
left: 50%;
margin-top:-100px ; //二分之一的height，width
margin-left: -100px;
}
//方法二:未知元素的高宽
#div1{
width: 200px;
height: 200px;
background-color: #6699FF;
margin:auto;
position: absolute; //父元素需要相对定位
left: 0;
top: 0;
right: 0;
bottom: 0;
}
So the question is, how to center one vertically <img>? (Use a simpler method.)
#container //<img>的容器设置如下
{
display:table-cell;
text-align:center;
vertical-align:middle;
}
29. The difference between px and em.
Both px and em are length units. The difference is that the value of px is fixed, and the calculation is easier to specify. The em value is not fixed, and em will inherit the font size of the parent element.
The default font height of the browser is 16px. Therefore, the unadjusted browsers conform to: 1em=16px. Then 12px=0.75em, 10px=0.625em.
30. Describe a "reset" CSS file and how to use it. Do you know normalize.css? Do you understand the difference between them?
There are many reset styles. Any front-end developer must have a commonly used reset CSS file and know how to use them. Do they do it blindly or do they know why they do it? The reason is that different browsers have different default styles for some elements. If you don't deal with it, there will be necessary risks or more dramatic occurrences in different browsers.
You may use Normalize instead of your reset style file. It does not reset all styles, but only provides a set of reasonable default style values. It can make many browsers reach a consistent and reasonable level without disturbing other things (such as bold titles).
In this regard, it is impossible to do every reset reset. It does have more than one reset, and it deals with quirks that you never need to consider, such as inconsistent HTML audio elements or inconsistent line-height.
31. What are Sass and LESS? Why should everyone use them?
They are CSS preprocessors. It is an abstraction layer on CSS. They are a special syntax/language compiled into CSS.
For example, Less is a dynamic style language. CSS gives dynamic language features, such as variables, inheritance, operations, and functions. Less can run on the client (support IE 6+, Webkit, Firefox) or all The server is running (with the help of Node.js).
Why use them?
The structure is clear and easy to expand.
You can easily shield the browser's private syntax differences. Needless to say, it encapsulates the repeated processing of browser grammatical differences and reduces meaningless mechanical labor.
Multiple inheritance can be easily achieved.
It is fully compatible with CSS code and can be easily applied to old projects. LESS is just an extension of CSS syntax, so old CSS code can also be compiled with LESS code.
32. What is the difference between display: none and visibility: hidden?
display: hide the corresponding element but do not occupy the original space of the element.
visibility: hide the corresponding element and squeeze the original space of the element.
That is, after using the CSS display: none attribute, the width, height and other attribute values of the HTML element (object) will be "lost"; and after using the visibility: hidden attribute, the HTML element (object) is only seen visually It is missing (completely transparent), and the space it occupies is still there.
34. The difference between link and @import in CSS is:
Link belongs to the html tag, and @import is provided
in CSS. When the page is loaded, the link will be loaded at the same time, and the CSS referenced by
@import will be loaded after the page is loaded. @import is only available if the page is above ie5 It can be recognized, and link is an html tag, and there is no browser compatibility problem.
Link's import style is more important than @import's reference (@import is to import the referenced style into the current page)
35. Introduction to the box model:
There are two CSS box models: IE box model, standard W3C box model model.
Box model: content, inner margin, outer margin (generally not included in the actual width of the box), border
36. Why do you want to initialize the style?
Due to browser compatibility issues, different browsers have different default style values for tags. If not initialized, it will cause display differences between different browsers.
However, initializing CSS will have a small impact on search engine optimization.
37. What is BFC?
BFC (Block Formatting Contexts), a box that creates a new BFC is laid out independently, and the layout of the elements in the box does not affect the elements outside the box. Two adjacent boxes in the same BFC have overlapping margins in the vertical direction.
BFC refers to the creation of an independent rendering area in the browser. The layout of all elements in this area will not affect the layout of elements outside the area. , This rendering area only works on block-level elements
38. What is html semantics?
When the page style fails to load, it can make the page present a clear structure. It
is conducive to seo optimization and being included by search engines (more convenient for search engine crawlers to identify). It is
convenient for project development and maintenance, and the html code is more readable. It is easy to analyze by other devices.
39. What is the role of Doctype? What is the difference between strict mode and promiscuous mode?
Used to tell the browser which mode to render the document inStrict mode: page layout and JS parsing are executed according to the highest standard supported by the browser.
Mixed mode: not strictly according to the standard, mainly used for compatibility with old browsers and backward compatibility