页面中同时有多个id会导致什么问题
1、在一个页面中给多个元素设置同样的id，会导致什么问题?
通过js操作页面时,如果有多个id那么在获取id时只能获取一个，id是一个标签，用于区分不同的结构和内容。
2、用伪类实现一个上三角
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title>
7 <style>
8 .box{
9 width: 150px;
10 height: 100px;
11 background: #CCCCCC;
12 margin: 50px 50px;
13 position: relative;
14 }
15 .box::before{
16 content: "";
17 width: 0px;
18 height: 0px;
19 border-left: 10px solid transparent;
20 border-right: 10px solid transparent;
21 border-bottom: 10px solid #CCCCCC;
22 position: absolute;
23 top: -10px;
24 }
25 </style>
26 </head>
27 <body>
28 <div class="box"></div>
29 </body>
30 </html>
3、怎么让一个不定宽度的div实现垂直和水平居中(三种方法 代码) ?
1、使用css3的transform属性，给父元素设置position: relative
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title>
7 <style>
8 .father {
9 width: 500px;
10 height: 300px;
11 skyblue;
12 position: relative;
13 }
14
15 .son {
16 width: 100px;
17 height: 100px;
18 green;
19 position: absolute;
20 left: 50%;
21 top: 50%;
22 transform: translate(-50%,-50%);
23 }
24 </style>
25 </head>
26 <body>
27 <div class="father">
28 <div class="son"></div>
29 </div>
30 </body>
31 </html>
2、使用flex布局设置父盒子：display:flex; justify-content:center; align-item:center;
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title>
7 <style>
8 .father {
9 width: 500px;
10 height: 300px;
11 background-color: turquoise;
12 display:flex;
13 justify-content: center;
14 align-items: center;
15 }
16
17 .son {
18 width: 100px;
19 height: 100px;
20 background-color: green;
21 }
22 </style>
23 </head>
24 <body>
25 <div class="father">
26 <div class="son"></div>
27 </div>
28 </body>
29 </html>
3、使用display:table-cell方法
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title>
7 <style>
8 .father {
9 width: 500px;
10 height: 300px;
11 background-color: turquoise;
12 display:table-cell;
13 text-align:center;
14 vertical-align:middle;
15 }
16
17 .son {
18 width: 100px;
19 height: 100px;
20 background-color: green;
21 display:inline-block;
22 vertical-align:middle;
23 }
24 </style>
25 </head>
26 <body>
27 <div class="father">
28 <div class="son"></div>
29 </div>
30 </body>
31 </html>
4、清楚浮动的方式有哪些?
1、额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）
缺点：添加了没有意义的标签，语义化差
2、给父级添加了overflow：hidden
缺点：内容增多时容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。
3、使用伪元素的方式
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title>
7 <style>
8 .father{
9 width: 400px;
10 border: 1px solid deeppink;
11 }
12 .big{
13 width: 400px;
14 height: 400px;
15 background-color: turquoise;
16 float: left;
17 }
18 .small{
19 width: 100px;
20 height: 100px;
21 background-color: teal;
22 float: left;
23 }
24 .clearfix:after{
25 content: "";
26 display: block;
27 clear:both;
28 }
29 </style>
30 </head>
31 <body>
32 <div class="father clearfix">
33 <div class="big"></div>
34 <div class="small"></div>
35 </div>
36 </body>
37 </html>
5、如何让两个块级元素显示在同一行
1、让块级元素浮动
2、让块级元素变成行内块
3、采用flex布局：把父容器设置成弹性盒子，默认主轴方向为水平
