For static pages, we first need to analyze the layout of the overall page, what kind of layout method we need to use, analyze the page from top to bottom, and write styles. For public pages, we can write them in a component and call them directly when needed.
html brief description
| name | Features | Can the width and height be changed | Common elements |
|---|---|---|---|
| Block element | Exclusive party | can | div ， p ， h1-h6 ， ul ， ol ， li |
| Inline block element | One line can display multiple | can | input，img，textarea，select，option |
| Elements in the line | One line can display multiple | No, it depends on the size of the content | span，a，strong，em，del，ins |
css brief
1. Set centering
1.1 Horizontal centering
1.1.1 Horizontal centering of block-level elements, you need to set the width of block-level elements to achieve overall horizontal centering
width:100px;
margin:0 auto
1.1.2. Inline elements, the horizontal center of the inline block elements, add to its parent element
text-align：center
1.2. Vertical centering
1.2.1 . The line-height is the same as the height value to achieve vertical centering.
height:100px;
line-height:100px
1.2.2. Set the inline block to achieve vertical centering through vertical-align:middle
display:inline-block;
vertical-align:middle
2. Float (float)
a large box (ul) is filled with multiple small boxes (li) in common writing
ul {
/*若父元素没有高度，要清除浮动*/
overflow：hidden
}
li {
float: left;
margin-right: 20px;
}
li:last-child {
margin-right: 0;
}
/*或者使用:not选择器*/
li:not(:last-child){
margin-right: 20px;
}
3. Positioning (position)
Fixed positioning is often used for the
mask layer style when the bullet frame pops up. Don't forget to write left:0, otherwise there will be a white block on the left.
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color:rgba(0,0,0,0.3);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
The child is absolutely parent (the child element will move relative to its nearest parent element)
child: position: absolute
parent: position: relative is
used to display some elements that are only displayed under certain events
.select{
position: absolute;
top: 40%;
left: 10px;
z-index: 999;
}
content必须要有，一个伪元素三角形
.select::before{
position: absolute;
content: '';
left:50%;
top:18px;
transform: translateX(-50%);
border-bottom: 9px solid #fff;
border-top: 9px solid transparent;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
}
Use with animation ( animation )
li {
position: relative;
.rotate {
position: absolute;
}
&:hover .turntable {
animation: spin 2s linear 2;
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}