HTML
1. How to understand HTML semantics
What is semantics
Use the correct html tags to display the corresponding elements. As in paragraph
, title, etc.
Why focus on semantics
For people, it is easy for the team to develop and maintain, and the code has high readability. When CSS is not loaded, it can also present a better content structure and code structure, which is easy to read.
For the machine, it is conducive to SEO. The crawler of search engine determines the context weight according to the tag; Secondly, it is conducive to the analysis of other devices, barrier free reading and accessibility.
2. Block elements and inline elements
display: block / table has div h1~h6, table UL ol Li P and so on, which is exclusive.
Display: inline / inline block has span img input button, etc. it does not occupy one line.
CSS
1. Understanding and application of BFC
BFC (Block Format Context), block level format context. It is an independent rendered area, and the rendering of its internal elements will not affect the elements outside the boundary.
Common conditions for forming BFC
- float is not none
- position is absolute or fixed
- overflow is not visible
- display is flex inline block, etc
Common applications of BFC
-
Solve the problem of margin overlap in the vertical direction of block level elements
-
Clear float
-
Eliminate the overlap problem caused by floating elements, because floating elements are not in the normal document flow.
2. float layout (Holy Grail layout, double wing layout)
(1) Grail layout and double wing layout
characteristic
- Three column layout, the middle column is loaded and rendered first, and the content is the most important;
- The content on both sides is fixed, and the content in the middle is adaptive with the width;
- Generally used for PC web pages.
Technical summary
-
Use float layout;
-
Use negative margin values on both sides to overlap horizontally with the middle content;
-
To prevent the middle content from being covered by both sides, the Holy Grail layout is padded and the double flying wing layout is margin.
Grail layout
<style>
#container {
background-color: #acafac;
padding-left: 200px;
padding-right: 150px;
}
#container .column {
float: left;
height: 100px;
}
#center {
width: 100%;
background-color: #77d941;
}
#left {
position: relative;
width: 200px; /* LC width */
background-color: #d8dc4a;
margin-left: -100%;
left: -200px;
}
#right {
width: 150px; /* RC width */
background-color: #37bfab;
margin-right: -150px;
}
#footer {
clear: both;
}
</style>
<body>
<div id="header">header</div>
<div id="container">
<div id="center" class="column">center</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
</div>
<div id="footer">footer</div>
</body>
Dual wing layout
<style>
#container {
background-color: #1f211f;
width: 100%;
height: 100px;
}
#container .column {
float: left;
height: 100px;
}
#main {
width: 100%;
float: left;
}
#center {
background-color: #77d941;
height: 100%;
margin-left: 200px;
margin-right: 150px;
}
#left {
width: 200px; /* LC width */
background-color: #d8dc4a;
margin-left: -100%;
}
#right {
width: 150px; /* RC width */
background-color: #37bfab;
margin-left: -150px;
}
</style>
<body>
<div id="container">
<div id="main" class="column">
<div id="center">center</div>
</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
</div>
</body>
(2) Clear float
For a parent element, its child element is floating, so it is not expanded. You need to clear the floating. Clearing floating is mainly to solve the problem that the internal height of the parent element is 0 due to the floating of the child element
1. Extra label method: add an extra label to the last floating label style clear:both (Not recommended)，The disadvantage is that useless tags are added and the semantics is poor.
2. Parent element plus overflow: hidden: Become BFC，Clear floating(Not recommended). The disadvantage is that when the content increases, it will not wrap automatically, and the content will be hidden.
3. Pseudo element after Clear floating(recommend).
.clearfix:after{ /*Pseudo elements are in-line elements. The normal browser clears the floating method*/
content: "";
display: block/table;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1; /*ie6 Only IE6-IE7 can clear the floating mode * and other browsers will not*/
}
3. flex layout
Draw dice using flex layout
Draw a dice with 3 points using the flex layout
<style>
#container {
margin: 30px 0 0 30px;
height: 200px;
width: 200px;
padding: 25px;
background: linear-gradient(#D3DCE6, #d8dbdb);
box-shadow: 0 0 5px #979494;
border-radius: 10px;
display: flex;
justify-content: space-between;
}
.point {
height: 25px;
width: 25px;
background-color: #333333;
border-radius: 50%;
box-shadow: 0 0 2px #343739;
}
#container>div:nth-child(1) {
align-self: flex-start;
}
#container>div:nth-child(2) {
align-self: center;
}
#container>div:nth-child(3) {
align-self: flex-end;
}
</style>
<body>
<div id="container">
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
</div>
</body>
design sketch:
4. absolute and relative positioning
-
ralative has no influence on external elements according to its own positioning;
-
absolute locates based on the located element of the nearest layer.
Positioning elements: elements with absolute, relative and fixed positioning, and body
5. Centering
(1) Horizontal center
- inline element: parent element text align: Center
- block element: sub element margin: auto
- absolute positioning element: sub element left: 50%; Margin left: negative width, (you must know the width of the child element)
(2) Vertical center
- Set the value of the parent element as height inline
- absolute positioning element: Top: 50%; Margin top: negative height, (the height of child elements must be known)
- absolute positioning element: transform: translate(-50%, -50%) (do not need to know the height of the child element) (CSS3 attribute)
- absolute positioning elements: top, left, right and bottom are all set to zero; margin: auto
6. Graphic style
How to inherit line height
- Write specific values and directly inherit values (easier to understand);
- Write proportion, direct inheritance proportion (better understanding);
- Write percentage, inherit the value calculated by percentage (test point)
7. CSS response
(1) What is rem
-
px: absolute length unit, most commonly used;
-
em: relative length unit, which is not commonly used relative to the parent element;
-
rem (font size of the root element): relative length unit, relative to the root element, which is often used in responsive layout. First control the length of the root element, and then control the length of other elements relative to the root element. It can be responsive. Where the root element is an html element.
<style>
html {
font-size: 100px;
}
div {
height: 0.3rem; /*The width is 30px*/
}
</style>
(2) Common schemes of responsive layout
-
Media query + REM: set the font size of the root element according to different screen widths; (media query is a new attribute of CSS3), which is directly defined globally.
<!--You must first declare viewport label--> <meta name="viewport" content="width=device-width,initial=1.0,user-scalable=no"> <!--This is a--> <style> @media screen and (min-width:768px) and (max-width:991px){ html { font-size: 120px; } } @media screen and (min-width:375) and (max-width:413){ html { font-size: 110px; } } </style> <!--This is another way--> <link media="screen and (min-width:768px) and (max-width:991px)" rel="stylesheet" href="css/pad.css"> -
Based on viewport units vh/vw:
-
Disadvantages of rem: "ladder" nature. The font size of the root element changes step by step. For example, the font size of the root element in the screen with a screen width of 375-413px is 16px.
-
Web page viewport size
window.screen.height - screen height
window.innerHeight -- web page viewport height
document.body.clientHeight - body height
vh -- 1 / 100 of viewport height
vw -- 1 / 100 of viewport width
vmax, vmin -- maximum and minimum values of vh and vw
-
-
Percentage layout (also known as flow layout): through percentage units, the width and height of components in the browser can change with the change of the browser, so as to achieve a responsive effect. The calculation is complicated.
-
flex layout: poor compatibility
-
Grid layout: poor compatibility
-
Columns grid system: it depends on some UI libraries
8. CSS3 animation
(not the point, unless you specialize in animation)
9. Grid layout
The area with grid layout is called "container". The sub elements located in the container by grid are called "item s".
<div> <div><p>1</p></div> <div><p>2</p></div> <div><p>3</p></div> </div>
In the above code, the outermost < div > element is the container, and the three < div > elements in the inner layer are the project.
Note: the project can only be the top-level child element of the container, and does not contain the child elements of the project. For example, the < p > element of the above code is not a project. The Grid layout is only valid for projects.
(1) Container properties
-
display: grid, which turns on the grid layout. By default, all container elements are block level elements, that is, one row is exclusive.
It can also be set as an inline element, so display: inline grid
-
Row width, column width, row height, column height
.container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } .container { display: grid; grid-template-columns: 33.33% 33.33% 33.33%; grid-template-rows: 33.33% 33.33% 33.33%; }