catalogue
1. css and js are two ways to realize div right shift 1000px animation?
2. What are the differences among visibility, display and opacity?
3. Single line truncation css?
6. What is the difference between transition, transform and translate?
7. How to draw a 0.5px border?
9. CSS vertically centered scheme?
10. What is the difference between pseudo elements and pseudo classes?
11. Several attributes and meanings of position?
14. What is the difference between responsive layout and adaptive layout?
15. How to improve the rendering performance of animation?
16. Name at least five css performance optimization schemes?
17. How many css selectors are there? What are their priorities?
18. How to clear the influence of floating?
1. css and js are two ways to realize div right shift 1000px animation?
answer:
css method:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
#box{
width: 100px;
height: 100px;
background-color: brown;
position: relative;
animation: mytest 3s linear 1s;
-webkit-animation: mytest 3s linear 1s;
}
@keyframes mytest {
1%{left: 0px;}
20%{left: 200px;}
50%{left: 500px;}
70%{left: 700px;}
100%{left: 1000px;}
}
@-webkit-keyframes mytest {
1%{left: 0px;}
20%{left: 200px;}
50%{left: 500px;}
70%{left: 700px;}
100%{left: 1000px;}
}
</style>
<body>
<div id="box"></div>
</body>
</html>
js native method:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
#box{
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
</style>
<body>
<div id="box"></div>
</body>
</html>
<script>
var oBox = document.getElementById("box")
oBox.onclick = function(){
moveDiv(1000)
}
function moveDiv(data){
clearInterval(mytimer)
var mytimer = setInterval(function(){
let speed = 10;
if(oBox.offsetLeft != data){
oBox.style.left = oBox.offsetLeft + speed + 'px'
}else{
clearInterval(mytimer)
}
},50)
}
</script>2. What are the differences among visibility, display and opacity?
answer:
visibility: hidden； It controls the display and hiding of the element style. It will not eliminate the dom element, and the element still exists;
display: none； Is the display attribute of the control element, so that the dom element is cleared and the element does not exist;
opacit: 0； Is the style that controls the transparency of the element. When 0, the transparency is 100%, and the element still exists.
3. Single line truncation css?
answer:
.box{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}4. flex layout?
Answer: flexible layout.
5，flex: 1？
Answer: Flex is the abbreviation of flex growth, flex shrink and flex basis. flex:1； Indicates flex growth: 1;
Indicates that the element will automatically enlarge and fill the parent element;
6. What is the difference between transition, transform and translate?
answer:
transform is an attribute of css3, which controls the transformation of elements;
translate is an attribute value of transform, indicating 2D transformation; transform:translte(X,Y)； 10. Y is the size of the value that controls the transformation of the element.
transition Within a certain period of time, the animation process of transforming one set of css attributes to another set of attributes. Can be used to achieve dynamic effects, css3 properties. Syntax transition: the time required for attribute transformation Controls how long the animation speed change is delayed before execution.
7. How to draw a 0.5px border?
answer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
#box1{
width: 300px;
height: 300px;
border: 1px solid #000;
}
#box2{
width: 300px;
height: 300px;
position: relative;
}
#box2::after{
content: " ";
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
z-index: -1;
border: 1px solid #000;
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform: scale(0.5);
-webkit-transform: scale(0.5);
}
</style>
</head>
<body>
<p>Border is 1 px</p>
<div id="box1"></div>
<p>Border is 0.5px</p>
<div id="box2"></div>
</body>
</html>8. Talk about BFC?
answer: bfc, that is, the block level formatting context, determines how an element locates its content, as well as its relationship and interaction with other elements. Elements with bfc can be regarded as isolated independent containers, and the elements in the container will not affect the elements outside the container in layout.
Formation conditions: floating elements, except float: none;
Absolute positioning element, position:absolute;position:fixed;
display is inline block, table cells and flex;
overflow values other than visible: hidden, auto, scroll;
Common functions: prevent the outer margin from folding;
After the floating element is included, the problem of floating out of the text stream is solved;
Prevent floating element overrides
9. CSS vertically centered scheme?
answer:
Using absolute positioning and transform
<style>
*{
padding: 0;
margin: 0;
}
#father{
width: 500px;
height: 500px;
background-color: darkseagreen;
margin: 0 auto;
position: relative;
}
#child{
width: 100px;
height: 100px;
background-color: black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
<body>
<div id="father">
<div id="child"></div>
</div>
</body>Absolute positioning combined with margin:auto;
<style>
*{
padding: 0;
margin: 0;
}
/* Absolute positioning combined with margin; */
#father{
width: 500px;
height: 500px;
background-color: darkseagreen;
margin: 0 auto;
position: relative;
}
#child{
width: 100px;
height: 100px;
background-color: black;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}
</style>
<body>
<div id="father">
<div id="child"></div>
</div>
</body>flex layout
<style>
*{
padding: 0;
margin: 0;
}
/* flex layout */
#father{
width: 500px;
height: 500px;
background-color: darkseagreen;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
#child{
width: 100px;
height: 100px;
background-color: black;
}
</style>
<body>
<div id="father">
<div id="child"></div>
</div>
</body>10. What is the difference between pseudo elements and pseudo classes?
answer:
Fundamentally speaking, the pseudo element creates a new element, and the pseudo class does not create a new element;
In terms of expression, pseudo elements are (E::before/after, etc.) and pseudo classes are (E::hover/focus, etc.);
In terms of use: a selector can only use one pseudo element, and multiple pseudo classes can be used;
11. Several attributes and meanings of position?
answer:
static: default value, indicating no positioning;
Relative: relative positioning, indicating that the element is positioned according to its normal position;
Absolute: absolute positioning, indicating that the element is positioned according to the first element with positioning attribute in the parent element;
Fixed: fixed positioning, indicating that the element is positioned according to the browser window;
12. Talk about the box model?
Answer: all HTML elements can be regarded as a box. The box model consists of four parts: content, padding, border and margin; There are two kinds of box models. One is the standard box model and the other is the IE box model (also known as the weird box model). The difference between them is that width refers to the data meaning, standard refers to the content width, and weird refers to the width of content+padding+border.
13. Responsive layout scheme?
Answer: responsive layout means that the same page has different layouts under different screen sizes.
Scheme: 1. Media query; 2. Percentage layout; 3. rem layout; 4. Viewport unit (vw/vh); 5. Grid system relying on bootstrap framework;
14. What is the difference between responsive layout and adaptive layout?
Answer: develop a set of interfaces in a responsive manner, and display different layouts and contents by detecting the viewport resolution and doing code processing on the client for different clients; Adaptive needs to develop multiple sets of interfaces. By detecting the viewport resolution, it can judge whether the currently accessed devices are pc, tablet and mobile phone, so as to request the service layer and return to different pages.
15. How to improve the rendering performance of animation?
Answer: transform:translateZ(0); Or will change: transform;
16. Name at least five css performance optimization schemes?
Answer: 1. Pictures are loaded asynchronously; 2. Try to use sprite chart; 3. Use the selector correctly; 4. js and css file compression;
5. The background image is loaded and displayed step by step after segmentation; 6. png format is preferred for pictures;
17. How many css selectors are there? What are their priorities?
answer: ID selector, class selector, element selector, descendant selector, child selector, pseudo class selector, wildcard, group selector, attribute selector, etc;
Priority: ID > class > element > wildcard
18. How to clear the influence of floating?
answer:
1. Use:: after pseudo element
E::after{
content:" ";
clear:both;
display:block;
}2. Add an empty element after the floating element and add clear:both;
3. Add explicit width and height to the parent element;
4. Add overflow:hidden to the parent element;
19. Why initialize css style?
Answer: because the compatibility of each browser is different, the default display of HTML tags is different, and the initial css excludes the influence of differences;