No.1 Common div centered layout methods are there?
* First development page structure
```js
<div class="wrapper">
<div class="inner"></div>
</div>
```
* The second is to set CSS styles
1. Use the Flex layout to achieve
```
.wrapper {
display: flex;
width: 500px;
height: 500px;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-box-align: center;
-ms-flex-align: center;
justify-content: center;
align-items: center;
background-color: #000;
}
.wrapper .inner {
width: 300px;
height: 300px;
background-color: #666;
}
```
2. Fluid layout
```
.wrapper {
position: relative;
width: 500px;
height: 500px;
background-color: #000;
}
.wrapper .inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 300px;
height: 300px;
background-color: #666;
}
```
3. transform translation
```
.wrapper {
position: relative;
width: 500px;
height: 500px;
background-color: #000;
}
.wrapper .inner {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
background-color: #666;
}
```
4. The width and height are known absolute positioning
```
.wrapper {
position: relative;
width: 500px;
height: 500px;
background-color: #000;
}
.wrapper .inner {
position: absolute;
margin-top: 50%;
margin-left: 50%;
top: -150px;
left: -150px;
width: 300px;
height: 300px;
background-color: #666;
}
```
What more practical new features ## No.2 H5 there?
* File API support local file operations;
* the Canvas / supports the SVG drawing;
* support drag and drop functionality;
* support local storage;
* forms multiple attribute validation support, such as (pattern, maxlength etc.)
* Native support audio and video;
The difference between ## No.3 Sass and Less of?
1. Different treatment
Sass is based on the ruby, it is handled by the server;
Less less.js is necessary to introduce the code to handle less;
2. different variable symbol
Sass uses the $ symbol, less is the @ symbol
3. Output Settings
Sass provides four output options: nested (nested), compact (compact), compressed (compression), expanded (extended)
Less No
4. Logical Grammar
Sass support conditions or flow control statements, you can use if else, for circulation, and no less.
## No.4 how to respond layout
1. css3 media screen
* Match with the width of the wording:
```js
@media screen and (max-width:400px) {...}
```
* Writing matches the width of the chain:
```js
<link rel="stylesheet" media="screen and (max-width:400px)" href="xxx.css" />
```
2. Support mobile terminal viewport
```js
<media name="viewport" content="width-device-width, initial-scale=1.0" />
```
3. Use percentage width, font size used rem
* Obligatory responsive layout Note
* Do not use absolute layout structure width, but to use a percentage;
* font to use em or rem, do not use px or pt;
4. The image processing responsive
```js
img {max-width: 100%; max-height: 100%}
```
What are the advantages and disadvantages ## No.4 floating layout is?
* Advantages: float arrangement, if the width is too small, the latter will automatically scroll to the bottom of the elements, the scroll bar does not appear
* disadvantage: the floating element from the document flow is handled properly, there will be problems such as the height of collapse.
Currently employed often mix and match: Many structures can display: inline-block or position: absolute alternative.
## No.5 What is BFC?
BFC Chinese is block-level scope, you want to create an HTML element BFC, any one or more of the following conditions can be met:
* Float value is not none;
* position is not static values or relative;
* the display value inline-block, table-cell, flex, table-caption -Flex or inline;
* overflow value is not visible
BFC create common method is as follows:
* Display: table; // response may lead to problems
* overflow: scroll; // may produce excess scrollbar
* float: left; // element will be to the left, and is surrounded by other elements
* overflow: hidden; / / overflow of the cutting element
How to ## multiple No.6 html pages to share data?
* Use JSONP;
* the same domain, you can use a cookie, can record the preferences of the user to access the site and so on;
* under the same domain can also be used localStorage or sessionStorage;
* can be used Service Worker in a range of domains
* Use the postMessage;
* Use page transit passes;
* use hidden form post way.
## No.7 css how cube?
Program: consider all sides, making it into a 3d object through the transform-style attribute values having preserve-3d
```js
<style type="text/css">
.cube { position: relative; transform-style: preserve-3d;}
.side { position: absolute;}
.back { transform: translateZ(-100px); }
.left { transform: translateX(-100px) rotateY(90deg); }
// ...以此类推
</style>
<div class="scene">
<div class="cube">
<div class="side back"></div>
<div class="side left"></div>
<div class="side right"></div>
<div class="side top"></div>
<div class="side bottom"></div>
<div class="side front"></div>
</div>
</div>
```