页面中同时有多个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布局：把父容器设置成弹性盒子，默认主轴方向为水平
赞 (0)