1. BFC
2. Clear float
Three. Which mobile terminal layout
Answer: Flow layout-percentage, flexible box-flex, grid layout-grid, rem/em, vm/vh
rem em
em relative length unit, which refers to the font size of the current element, and if the font size is not set for the current element, it will be inherited The font size of ancestor elements. For example. box {font-size: 16px;} then 1em = 16px .box {font-size: 32px;} then 1em = 32px, 0.5em = 16px
The relative length unit of rem, which refers to the font size of the root element (html). For example, html {font-size: 16px;} then 1rem = 16px html {font-size: 32px;} then 1rem = 32px, 0.5rem = 16px
vw is relative to the width of the viewport. The viewport is equally divided into 100 units of vw (that is, the browser viewable area) 100vw = the width of the viewable area
vh is relative to the height of the viewport. The viewport is equally divided into 100 units of vh (that is, the browser viewable area) 100vh = the height of the viewable area
Four.flex layout
flex:1, where 1 represents the width ratio, the specific value depends on the flex value of other boxes, because the width of other boxes here is fixed, so the middle column will be automatically filled with flex is flex-grow flex-shrink flex-basis
order: defines the item Order. The smaller the value, the higher the arrangement. The
allign-self:allign-self attribute allows a single item to have a different alignment from other items
, and can override the align-items attribute. The default value is auto, which means
the align-items attribute of the parent element is inherited . If there is no parent element, it is equivalent to stretch.
Regarding the method of using flex to center,
you can refer to the MDN document for details of flex layout. I will only list common problems here.
V. Centering problem (emphasis)
The centering problem is really a common topic. Basically, every interview will be asked. After all, centering is really ubiquitous when it comes to styles. Articles about centering are everywhere on the Internet. Remember 4-5 kinds of them, and you will be interviewed later. There is no problem with work. There are many common centering points
about the portal of good text in
the center, such as horizontal centering, vertical centering, horizontal and vertical centering, fixed width and height, and variable width and height. Let's discuss it in fixed width and height. Several ways to center horizontally and vertically
1. Fixed width and height
- 定位+margin:auto+left+right+ top+bottom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
margin: 30px;
height: 400px;
width: 400px;
background: lightblue;
position: relative;
}
p{
width: 100px;
height: 100px;
background: red;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto ;
}
</style>
</head>
<body>
<div class="container">
<p></p>
</div>
</body>
</html>
- Positioning + margin: -50%
<style>
.container{
margin: 30px;
height: 400px;
width: 400px;
background: lightblue;
position: relative;
}
p{
width: 100px;
height: 100px;
background: red;
position: absolute;
top:0;
bottom: 0;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="container">
<p></p>
</div>
</body>
- Positioning+transform
<style>
.container{
margin: 30px;
height: 400px;
width: 400px;
background: lightblue;
position: relative;
}
p{
width: 100px;
height: 100px;
background: red;
position: absolute;
top:0;
bottom: 0;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
- flex layout
.container {
margin: 30px;
height: 400px;
width: 400px;
background: lightblue;
display: flex;
justify-content: center;
align-items: center;
}
p {
width: 100px;
height: 100px;
background: red;
}
- grid layout margin: auto;
.container {
margin: 30px;
height: 400px;
width: 400px;
background: lightblue;
display: grid;
}
p {
width: 100px;
height: 100px;
background: red;
margin: auto;
}
2. Variable width and height
- Absolute positioning + transform
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
margin: 30px;
height: 400px;
width: 400px;
background: lightblue;
position: relative;
}
p{
background: red;
position: absolute;
top:0;
bottom: 0;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<p>好好学习吧</p>
</div>
</body>
</html>
- table-cell
.container{
margin: 30px;
height: 400px;
width: 400px;
background: lightblue;
display: table-cell;
text-align: center;
vertical-align: middle;
}
p{
background: red;
display: inline-block;
}
- flex layout
.container{
margin: 30px;
height: 400px;
width: 400px;
background: lightblue;
display: flex;
justify-content: center;
align-items: center;
}
p{
background: red;
}
- flex + margin:auto
.container{
margin: 30px;
height: 400px;
width: 400px;
background: lightblue;
display: flex;
}
p{
margin: auto;
background: red;
}
- grid + flex layout
.container{
margin: 30px;
height: 400px;
width: 400px;
background: lightblue;
display: grid;
}
p{
background: red;
align-self: center;
justify-self: center;
}
- gird + margin layout
.container{
margin: 30px;
height: 400px;
width: 400px;
background: lightblue;
display: grid;
}
p{
background: red;
margin: auto;
}
Discuss the horizontal centering or vertical centering separately
1. Center layout of inline elements
Horizontally centered
Inline elements can be set: text-align: center;
flex layout to set the parent element: display: flex; justify-content: center;
Vertically centered
Confirm height of parent element of single line text: height === line-height
Confirm height of parent element of multi-line text: disaply: table-cell; vertical-align: middle;
Two, block-level element centered layout
Horizontally centered
Fixed width: margin: 0 auto;
Variable width: Refer to the variable width and height example in the above example.
Vertically centered
position: absolute set left, top, margin-left, margin-to (fixed height);
position: fixed set margin: auto (fixed height);
display: table-cell;
transform: translate(x, y);
flex (undefined Height, variable width);
grid (variable height, variable width), the compatibility is relatively poor;
Absolute positioning and negative magin value
Six. Box model
IE6 promiscuous mode box model in weird mode and in IE6 and below browsersbox -sizing : border-box
width = content-width + padding-width + border-width
height = content-height + padding-height + border-height
Standard box model box -sizing : :content -box
width = content-width
height = content-height
Seven.H5 issues
1. How do you understand the semantics of H5
Semanticization refers to the structuring of text content (content semantics), and the selection of semantic tags (code semantics), which is convenient for developers to read, maintain and write more elegant code, while allowing browser crawlers and assistance Better analysis of technology. We choose the right label to describe the right content.
The label has gone through the following stages
- In the wilderness stage, the backend writes the layout. The table layout is used, which causes confusion in deconstruction, poor code readability, and particularly troublesome maintenance in the later stage.
- When doing the layout in the art stage, use div+css to do it, and write it as a div, so that the page lacks semantics and reduces the readability of the code.
- At present, front-end development, using semantic tags to layout has the following benefits
to people: it is
convenient for team development and maintenance.
It can also present a better content structure and code structure without loading CSS, which is easy to read.
User experience: For example, title and alt are used to explain nouns or explain picture information, and label labels are used;
for machines: it
is conducive to SEO, search engine crawlers rely on labels to determine the context and the weight of each keyword, which can improve the search engine’s performance Crawl effectively and increase website traffic.
It is convenient for the analysis of other devices (such as screen readers, blind readers, etc.), facilitates barrier-free reading, and improves accessibility.
2. Which H5 tags have been used
content:
- header The header usually includes the website logo, main navigation, site-wide links, and search box.
- footer Footer, only when the parent is body, is the footer of the entire page.
- article contains content like a newspaper ==|| is understood this way, it means a document, page, application or a separate container
- aside specifies the note column, including quotes, sidebars, a set of links to the article, advertisements, friendly links, related product lists, etc.
- The main content of the mian page, a page can only be used once. If it is a web application, surround its main functions.
- The nav mark navigation is only used for important link groups in the document.
- title defines the title of the document, which is displayed on the title bar or tab page of the browser. It can only contain text. If it contains tags, any tags included will not be interpreted.
Function label:
1.canvas:List the usage method
<canvas id="canvas" width="300" height="300">
抱歉，您的浏览器不支持canvas元素
（这些内容将会在不支持<canvas>元素的浏览器或是禁用了JavaScript的浏览器内渲染并展现）
</canvas>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);
void ctx.fillRect(x, y, width, height);
The x
coordinate of the starting point of the x rectangle.
The y
coordinate of the starting point of the y rectangle.
width The width of the
rectangle.
heightThe height of the
rectangle
videoCommonly used attribute
poster: When the video has not been completely downloaded, or the user has not clicked on the cover that is displayed by default before playing.
The first picture of the current video file is displayed by default ->
Note: When setting the width and height, generally only the width or height will be set, so that it will be automatically scaled proportionally. If
you set the width and height at the same time, the video will not be adjusted to the set width and height, unless the set value is exactly the same ratio. The
key point is to explain the use of source: because different browsers support different video file formats, so When we add videos,
we need to consider whether the browser supports it. We can prepare video files in multiple formats and let the browser automatically select
<video controls>
<source src="myVideo.mp4" type="video/mp4">
<source src="myVideo.webm" type="video/webm">
<p>Your browser doesn't support HTML5 video. Here is
a <a href="myVideo.mp4">link to the video</a> instead.</p>
</video>
audioCommonly used attributes
src: the first channel of the playback and the road bolt
controls: the controller panel of the audio player
autoplay: automatic playback
loop: loop
What is the meta viewport used for and how to write it?
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
The viewport is the visual area where the browser displays the webpage. There are three kinds of viewports:
What does the content in this tag mean? The name is viewport, which means it is used by mobile devices. The content defines the attributes of the viewport.
Width means that the width of the display under the mobile device is the device-width (device-width) and
height means The width of the display under the mobile device is the width of the device.
user-scalable indicates the user's zoom capability, no indicates that it is not allowed.
initial-scale indicates the zoom ratio between the device and the viewport. The
maximum and minimum indicate the maximum and minimum values of the zoom respectively. It should be noted that , maximum must be minimum.
The meta tag above tells the browser not to zoom when it is displayed on the mobile terminal.