day3

1-在一个页面中给多个元素设置同样的 id，会导致什么问题？
     用多个相同ID“一般情况下”也能正常显示。但是当你需要用js通过id来控制这个div，那就会出现错误。
     当有相同id的元素时，如果要使用JS/JQuery的函数（innerHTML()、text()等）对id所在元素进行操作，js函数无法使用。
     也就是直接用id取值的话，浏览器只会返回id相同的第一个元素的值。后面的值不会覆盖前面的值。
2-用伪类实现一个上三角（代码）

<!DOCTYPE html>
    <html>
    <head>
   <meta charset="UTF-8">
   <title></title>
   <style type="text/css">
       .dv{
             background: red;
             border-radius: 8px; 
             margin: 100px 100px;
             position: relative;
             float: left;
       }
      .dv:before{
            content: "";
            width: 0px;
            height: 0px;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 20px solid red;
            position: absolute;
            top: -10px;
            left: 65px;
      }
   </style>
   </head>
   <body>
        <div class="dv"></div>
   </body>
   </html>

3-怎么让一个不定宽度的 div 实现垂直和水平居中（三种方法 代码）？
     弹性盒子
        父盒子设置：display：flex; justify-content：center；align-items：center;
     使用CSS3 transform
        父元素设置：display：relative
        div：transform：transform(-50%,-50%)；position：absolute; top：50%；left：50%；
     使用css方法
        不定宽高的div设置：display：inline-block；vertical-align：middle；
4-清浮动的方式有哪些？
     1.为父元素添加overflow：hidden
           超出的部分会被隐藏。
     2.浮动父元素
     3.使用clear:both清除浮动，在所有浮动元素下方添加一个该属性
     4.使用伪元素清除浮动：通过伪元素选择器，在div后面添加了一个clear:both的属性

5-如何让两个块级元素显示在同一行
    1、使用浮动float
    2、inline-block将这两个div变成内联-块状元素

posted @ 2021-02-23 11:40  qwerfd  阅读(51)  评论(0)    收藏  举报