How do I center a div of variable width and height vertically and horizontally?
There is the following code:
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
<title>Document</title>
</head>
<style>
.box {
position: relative;
width: 300px;
height: 300px;
outline: 1px solid black;
float: left;
margin: 10px;
}
.box > div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<body>
<div class="box">
<div>1</div>
</div>
<div class="box">
<div>2</div>
</div>
<div class="box">
<div>3</div>
</div>
<div class="box">
<div>4</div>
</div>
</body>
</html>
Copy the codeEffect:
Now the question is, how do we center the inside div horizontally and vertically without knowing its width and height?
Not much to say, on the code 😴.
The first method: Use transform
/* The first center method */
.box:nth-of-type(1) > div {
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Copy the codeSecond method: Use Flex layout
/* The second method uses flex layout */
.box:nth-of-type(2) {
display: flex;
justify-content: center;
align-items: center;
}
Copy the codeThe third method is to use absolute positioning, which requires setting position: relative in the parent element.
/* Third method */
.box:nth-of-type(3) > div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: pink;
margin: auto;
}
Copy the codeThe final effect of the three methods is the same, from the point of view of code simplicity, useflexThe layout is simpler.
What are the common ways to clear floats?
“Right answer” : Why clear the float?
The main purpose of floating clearance is to solve the problems caused by height collapse. We talked about height collapse in the previous installment. (The height of the parent element is adaptive. After the child element floats, the parent element has no content to expand the height, which will cause the height of the parent element to be zero. This is height collapse.)
So how do you clear the float? Here are four ways to do it 👇.
① Pseudo-element removal:
.clearfix:after{
display: block; /* makes it a block-level element */
content: ""; /* Add empty content to the pseudo-element so that no content from the pseudo-element is displayed on the page */
height: 0; /* To ensure that the pseudo-elements do not affect the page layout, set the pseudo-element height to 0*/
clear: both; /* Clear float */
}
Copy the code② Extra tag method: add a block-level tag at the end of the float element, and set a clear:both attribute to it. Generates a lot of blank labels);
.clearfix> Clear floating tags {
clear: both;
}
Copy the code③ Set the height of the parent element of the floating element.
④ Add overflow attribute to parent element.
/* Overflow property is not defined to clear float, be careful not to overwrite content or trigger unwanted scrollbars * /
.clearfix{
Overflow: hidden/auto
}
Copy the codeOf the above four methods, the pseudo-element method is recommended.
3 The difference between Typeof and Instanceof?
“Correct answer” :
function Person(name) {
this.name = name;
}
Person.prototype.say = function() {
console.log('My name is' + this.name)
}
var xm = new Person('Ming')
Copy the codeTypeof can determine the data typeof a variable, and return a string value.
typeof(xm.say) //"function"
Copy the code② a instanceof b can determine whether b is on the prototype chain of a (a is an instanceof b), and can also determine the data type. The return value is Boolean.
xm instanceof Person // true
xm instanceof Object // true
Copy the code
4 How to determine the equality of two objects?
(1) Check whether two objects point to the same memory.
② Check whether all key values of the two objects are the same. (using Object. GetOwnPropertyNames get all the key name, not including on the prototype chain)
③ Check whether the corresponding key values of the two objects are the same
function ObjectValueEqual(a, b) {
// Check whether two objects point to the same memorytrue
if (a === b) return true
// Get two object key-value arrays
let aProps = Object.getOwnPropertyNames(a)
let bProps = Object.getOwnPropertyNames(b)
// Check whether the array length of two objects is the samefalse
if(aProps.length ! == bProps.length)return false
// Iterate over the key of the object
for (let prop in a) {
// Check whether the key value of A exists in Bfalse
if (b.hasOwnProperty(prop)) {
// Check whether the key value of a is an object, if it is, it is recursivefalse
if (typeof a[prop] === 'object') {
console.log('Object exists in key')
if(! isObjectValueEqual(a[prop], b[prop]))return false
} else if(a[prop] ! == b[prop]) {
console.log('Two objects with different keys')
return false
}
} else {
return false
}
}
return true
}
Copy the codeSo let’s use the code from the last problem
let xh = xm
ObjectValueEqual(xm, xh) // true
let xl = {name: 'Ming'} / /falseBecause the xM prototype had SAY on it
Copy the code
5 Object. The keys () and the Object. GetOwnPropertyNames ()
“Right answer” : Let’s first look at how it is defined in MDN.
The object.keys () method returns an array of a given Object’s own enumerable properties in the same order as the property names would be returned if the Object were iterated through normally.
Object. GetOwnPropertyNames () method returns a specified by the Object of all its attributes of the attribute name (including not enumerated attribute but does not include Symbol value as the name of the attribute) consisting of an array.
-
Common: all return properties of their own, not on the prototype chain.
-
Difference: the Object. The keys () returns to the enumeration, Object. GetOwnPropertyNames all () returns.
Person = function(name){
this.name = name || ' '
}
Person.prototype.sayHello = function() {
console.log('hello')
}
p = new Person('xm')
p.age = 18
// Change age to non-enumerable
Object.defineProperties(p, {
age:{
enumerable:false
}
})
console.log(Object.keys(p)) // ["name"]
console.log(Object.getOwnPropertyNames(p)) // ["name"."age"]
Copy the code
What are prototype objects and prototype chains?
“Correct answer” : ① Prototype object
Each constructor has a prototype property whose value is an object called the constructor’s prototype object. It is generally recommended to bind constructor member properties to the prototype object, because properties on prototype object Prototype are accessible by default through the instance object. This ensures that methods are not created in memory again each time the instance object is created using the new keyword.
(2) the prototype chain
Each constructor has a prototype property, the prototype object. Through the _proto_ attribute of the instance object, the prototype object can also be accessed, and the prototype object is also an object in nature. The object has its own prototype object, and the chain structure is called the prototype chain.
If you don’t understand, look at the following two pictures.
How many seconds is the delay of the click event on the mobile terminal? What causes it? How to solve it?
“Correct answer” : Mobile click events have a 300ms delay.
What causes this? Because the browser to retain double-click the scaling function, caused by the early browser has a double click on the zoom function, the user to click once, the browser will wait for the second click, if the user has carried on the second click within 300 ms, the browser will perform scaling functions, if not click again within 300 ms, Is treated as a click event.
So how to solve it?
① Use touch event to simulate click event.
② Use the Fastclick plugin to solve the problem. FastClick is a lightweight library developed by FT Labs to solve the 300-millisecond click delay problem in mobile browsers. In short, FastClick immediately fires a click event (custom event) that simulates the Click event via a DOM custom event when it detects a Touchend event and blocks the click event that the browser actually fires 300 milliseconds later.
window.addEventListener( "load".function() {
FastClick.attach( document.body );
}, false );
Copy the code③ Disable page zooming.
<meta name="viewport" content="Width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, user - scalable = 0">
Copy the codeLearning without thought is useless; thought without learning is perilous. – Confucius