Center elements horizontally and vertically

html
<div class="wrap">
    <div class="box"></div>
</div>
css
.wrap {
    position: relative;
    width: 400px;
    height: 400px;
    background: #fcf;
}
.box {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    background: # 999;
}
Copy the code

With absolute positioning, this is impossible if the CSS properties top, bottom, left and right are 0, because the.box element has a set width and height, so if you set margin: Auto, it will be centered.

.wrap {
    display: table-cell;
    width: 400px;
    height: 400px;
    background: #fcf;
    vertical-align: middle;
}
.box {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background: # 999;
}
Copy the code

There will be no height limit

To know the width and height of the center element, use a margin negative

.wrap {
    height: 400px;
    width: 400px;
    background: #fcf;
    position: relative;
}
.box {
    height: 200px;
    width: 200px;
    background: #eee;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -100px;
}

Copy the code

What is your understanding of GET and POST in HTTP? When to use them?

  • GET request. The requested data is appended to the URL with? Split URL and transfer data, multiple parameters with & join. The URL encoding format uses ASCII encoding instead of UNIClDE, meaning that all non-ASCII characters are encoded before transmission.

  • POST request: A POST request places the requested data in the body of the HTTP request package.

  • When a GET request is made, the data transferred is limited by the LENGTH of the URL

  • POST, since it is not a URL, is theoretically unrestricted

  • security

POST is more secure than GET. Security here means real security, unlike the security method mentioned in GET above, which simply does not modify the server’s data. For example, during the login operation, the user name and password will be exposed in the URL through the GET request. Because the login page may be cached by the browser and other people may view the browser history, the user name and password can be easily obtained by others. In addition, data submitted by GET requests can cause cross-site request Frogery attacks

  • Common status codes and their meanings are as follows:

200 OK The server successfully processed the request

301/302 Moved Permanently (Redirection) The requested URL has been Moved. The response message should contain a Location URL that indicates the current Location of the resource

The client’s cached resource is up to date and requires the client to use the cached content

404 Not Found The resource was Not Found

501 Internal Server Error The Server encountered an Error that prevented it from serving requests

HTTP request packet

An HTTP request packet consists of four parts: the request line, the request header, the blank line, and the request data.

Reference Article 1

See article 2 message format

The box model

box-sizing : content-box|border-box|inherit;

(1) Content-box, the default value that allows the width and height values to be applied to the element’s content box. The width of the box only contains the content.

Total width =margin+border+padding+width

(2) border-box, set the width value is actually the border+padding+element width except margin. The width of the box contains the border+padding+ content

Total width =margin+width

Many CSS frameworks simplify the calculation of the box model.

Inherit, specify that box-sizing attribute values should be inherited from the parent element

About the use of border-box:

2. Setting the border-box globally is good. First, it is intuitive, and second, it eliminates the need to add and subtract again and again.

The element is centered horizontally and vertically

Unknown height of child element

  1. Css3transform: Translate (-50%; – 50%); Advantages: High, can be used in webKit kernel browsers Disadvantages: not supported IE9 does not support the transform property
  2. Use CSS3 Flex layout
    display: flex;
    justify-content: center;
    align-items: center;
Copy the code
  1. The parent element is set to table and the child element is set to cell-table. Vertical-align: center is used to achieve horizontal center. Advantage: The parent element can dynamically change the height of the table element
.parent1{
    display: table;
    height:300px;
    width: 300px;
    background-color: #FD0C70;
}
.parent1 .child{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    font-size: 16px;
}
Copy the code

HTML data-* attributes, how to use them in JS and JQ?

The data-* property is used to store private custom data for a page or application. The data-* attribute gives us the ability to embed custom data attributes on all HTML elements.

  • Use the.data() function in jQuery to retrieve the data-* attribute value. 2. Data – Attributes are not accessed or changed after the first use of the data attribute (all data values are stored in jQuery
  1. Set the data-* property value using the.attr() function in jQuery

  • The data-* property interacts with JS

    1. Get the Settings using the.dataset () method
    2. Using native getAttribute/setAttribute method

    Refer to the article

JSON

  1. Json.stringify (value[, replacer [, space]]) converts a JavaScript value (object or array) to a JSON string, replacing the value if replacer is specified as a function, Or if replacer is specified as an array, optionally only the specified properties are included.
  2. Json.parse () is used to parse JSON strings and construct JavaScript values or objects described by the string. Provides optional reviver functions to perform transformations (operations) on the resulting object before returning.

Rounding out the article

Intercept get parameters and save them as key-value pairs in JSON data format

function urlVal (url) {	
            let arr=url.split("?") [1];let arr2=arr.split("&"); 
            let jsonarr={}; 
            for(leti=0; i<arr2.length; i++){let arr3 = arr2[i].split("=");
             jsonarr[arr3[0]] = arr3[1];
             }
            return JSON.stringify(jsonarr);
}
Copy the code

Does CSS control what attributes elements display or hide? Visibility and dispiay: none; The difference between them?

Visibility ::hidden elements that are not visible will also occupy space on the page, and dispiay: None; Invisible elements that do not take up page space; Opacity also hides elements.

Js has 2 clock timer is what?

A: 1. Loop execution: window.setInterval (” method name or method “, “delay”); 2. Timed execution: window.settimeout (” method name or method “, “delay”); When the method completes execution, the timer stops (but the timer is still there, just not used). 3. Remove the timer method: window.clearTimeout(timer name variable);

In vue axios, multiple validations return multiple 401 errors. How to write the same error message if you use axios.catch ()?

A: Using interceptors The purpose of interceptors is to make it easier to set up interceptors when we need to process HTTP requests and responses uniformly. You can intercept requests or responses before they are processed by then or catch

/ / add request interceptor axios. Interceptors. Request. Use (function(config) {// Do something before sending the requestreturnconfig; },function(error) {// Do something when requesting an errorreturnPromise.reject (error); }); / / add the response interceptor axios. Interceptors. Response. Use (function(Response) {// Do something about the response datareturnresponse; },function(error) {// Do something when requesting an errorreturnPromise.reject (error); });Copy the code

Please write a single [backgammon] game, the requirements are as follows:

Use native technology, compatible with Chrome browser.

To realize the judgment of victory and defeat, and give the winning tips; Any player wins the game and locks the board.

Please consider the extensibility of the game as much as possible. The interface can be implemented using DOM/Canvas. Consider the lowest cost to implement the subsequent switching interface. (For example, if you choose to implement the interface using DOM, you need to change as little code as possible when using Canvas).

Implement a regret function

Implement an undo regret function

Achieve a man-machine versus function

Consider implementation flexibility and extensibility wherever possible

Var a = [B, a, D, E, F,C] becomes [a, B, C, D, E, F]

function sortArr(arr) {
			for (let i = 0; i < arr.length -1; i++) {
				for (let j = 0; j < arr.length -1 - i; j++) {
					if (arr[j] > arr[j+1]) {
						lettemp = arr[j]; arr[j] = arr[j+1]; arr[j+1] = temp; }}}returnarr; } var example = [15, 44, 66, 2, 90, 67, 1, 3]; console.log(sortArr(example)); // Quicksortfunction sortFast(arr) {
			if (arr.length < 2) {
				return arr;
			}
			var left = [];
			var right = [];
			var middleIndex = Math.floor(arr.length/2);
			var middleNum = arr.splice(middleIndex, 1)[0];
			for (var i = 0; i < arr.length; i++) {
				if (arr[i] < middleNum) {
					left.push(arr[i]);
				}else{ right.push(arr[i]); }}return sortFast(left).concat([middleNum], sortFast(right));
		}
		console.log(sortFast(example));
Copy the code

Add CSS styles

<div class="con">
<div class="left cicle"></div>
<div class="right cicle"></div>
</div>
Copy the code

The.con is centered horizontally and vertically on the body page and both circles are 100px wide and high. That’s all! Add CSS style renderings

What is the process from entering the url in the browser to loading the static page?

  1. After entering the URL, the browser first checks the browser cache – system cache – router cache. If there is one in the cache, the page content will be directly displayed on the screen. If not, skip to the second step.
  2. Parse the URL to find the corresponding IP address
  3. The browser initiates a TCP connection to the server and establishes a TCP three-way handshake with the browser.
  4. After the handshake succeeds, the browser sends an HTTP request to the server for data packets.
  5. The server processes the received request and returns the data to the browser
  6. The browser received an HTTP response
  7. Read page content, browser rendering, parsing HTML source code
  8. Generate Dom trees, parse CSS styles, and interact with JS
  9. Client and server interaction
  10. Ajax query, the specific process of Step 2 is as follows:

Browser cache: The browser keeps DNS records for some time, so it is only the first place to resolve DNS requests; Operating system cache: If this record is not included in the browser cache, the system will call the operating system to get the operating system record (saving the recent DNS query cache). Router cache: If the preceding two steps fail to obtain DNS records, continue to search the router cache. ISP cache: If all the preceding parameters fail, continue to search for the ISP.

6.25 Interview companies

2. Js function execution is mainly variable promotion and immediate execution of variables within the function 3. Enter the URL to the page loading process.

4. Understanding of Vue life cycle;

Beforecreated: El and data are not initialized created: Data is initialized, el is not beforeMount: El and data are initialized. El is {{message}} again, this is the application of the Virtual DOM (Virtual DOM) technology, first trap. Mounted: The vue instance is mounted and destroyed. Once the destruction is complete, we re-change the value of message, and vUE no longer responds to this action. However, the originally generated DOM element still exists, so once you destroy it is no longer under vUE control. beforecreate : Mounted: launches a back end request, retrieves data, and does some routing with the hook beforeDestroy. BeforeDestroy: are you sure to delete XX? Destroyed: the current component has been deleted.

5. What is your understanding of front-end engineering?

Front-end engineering is to standardize the front-end development process, technology, tools and experience according to specific business characteristics. Its purpose is to make front-end development “self-supporting”, maximize the development efficiency of front-end engineers, reduce the cost of coordination and communication caused by technology selection, front-end and back-end joint adjustment.

6.27 PM interview company

1. Use CSS to keep the width of the left element unchanged at 500px, and the right element to adapt to the browser’s size.

<style>
	body,html {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0; 
	}
	.left {
		width: 500px;
		height: 100%;
		float: left;
		box-sizing: border-box;
		border: 1px solid red;
	}
	.right {
		height: 100%;
		margin-left: 500px;
		border: 1px solid red;
		box-sizing: border-box;
	}
	</style>
</head>
<body>
	<div class="left"></div>
	<div class="right"></div>
</body>
Copy the code

HTML and body must be set to height: 100%; Otherwise the height of the child element is 100%; It won’t work;

2. Horizontally and vertically centered elements;

3. What is the preference of CSS selectors?

Answer!!!! Important > Inline Style >ID selector > Class selector > Tag > Wildcard > Inheritance > Browser Default properties Inline style sheet weight 1000 ID selector weight 100 Class selector weight 10 HTML tag selector weight 1 The weight size base is not decimal, it is 256 base

4. What are inline elements and block-level elements?

Inline elements:

  • I – italics
  • Img pictures –
  • Input – An input box
  • Label – Table label
  • Select – Project selection
  • Sub – subscript
  • Sup – superscript
  • Br – a newline
  • Abbr – abbreviation for

Block-level elements

  • div
  • p
  • h1~h6
  • ol
  • ul
  • Hr is horizontal
  • Table form
  • Nav navigation semantic element tag
  • header
  • The footer element describes the bottom area of the document.
  • Section Defines sections (sections, extents) in a document. Such as a chapter, header, footer, or other part of a document
  • The article tag defines individual content
  • An aside tag defines content outside the main area of the page (such as a sidebar).

What’s the difference between title and Alt on a tag?

Alt is an ATTRIBUTE of an HTML tag, and title is both an HTML tag and an HTML attribute. The title tag, which is where the title of the page is written. When title is an attribute, it provides additional descriptive information for the element. For example, add the title attribute to the hyperlink tag A, move the mouse over the link is, the content of the title will be displayed, to achieve the effect of supplementary instructions or hints. The Alt attribute can only be used with img, area, and input elements, and is used to provide text for users to understand the image information when the image does not display properly on a web page. Alt is used to replace images rather than provide additional captions. The use of Alt attributes also has search engine optimization effects, because search engines cannot directly read the information of images, Alt can provide text information for it, so it is more friendly to search engines. When the title and Alt attributes are in the same TAB, the values should be the same

Array to heavy

  1. Method 1: Use es6’s Set data structure and array.from ()
 function demo(arr) {
            return Array.from(new Set(arr));
        }
        var arr = [1,2,5,6,8,7,1,2,5];
        console.log(demo(arr));
Copy the code
  1. Arr. IndexOf (item) returns the position of the first occurrence of an item in arR. If arR does not have an item in arR, it returns -1
function demo(arr) {
            let res = [];
            for (let i = 0; i < arr.length; i++) {
                res.indexOf(arr[i]) == -1? res.push(arr[i]): ' ' ;   
            }
            return res;
        }
Copy the code