Day3

Day3

1-在一个页面中给多个元素设置同样的 id，会导致什么问题？

2-用伪类实现一个上三角（代码）

3-怎么让一个不定宽度的 div 实现垂直和水平居中（三种方法代码）？

4-清浮动的方式有哪些？

5-如何让两个块级元素显示在同一行

1-在一个页面中给多个元素设置同样的 id，会导致什么问题？

若获取的是对象，则获取无法获取到多个同样id的元素，只能得到一个

获取的是一个集合，虽然id的相同依然可以获取到，同名的多个id

　　dom获取id的方法

　　　　js中封装函数获取id 获取的是一个对象，显然不能获取集合

　　　　function getId(id){ return document.getElementById(id);}

　　　　getId('id名称')

以下两个方法不支持 IE7 及以下的浏览器。

　　　　　querySelector()　通过选择器获取一个元素 -- 也是对象也不行

　　　　　querySelectorAll() 通过选择器获取一组元素　　会将符合条件的元素封装到一个数组中返回

*******JS获取DOM元素的方法（8种）********
通过ID获取（getElementById）
通过name属性（getElementsByName）
通过标签名（getElementsByTagName）
通过类名（getElementsByClassName）
获取html的方法（document.documentElement）
获取body的方法（document.body）
通过选择器获取一个元素（querySelector）
通过选择器获取一组元素（querySelectorAll）

2-用伪类实现一个上三角（代码）

 1     .tri_top{
 2                width: 150px;
 3                height: 100px;
 4                background: #CCCCCC;
 5                border-radius: 8px;
 6                margin: 50px 50px;
 7                position: relative;
 8            }
 9 
10 .tri_top:before{
11                content: "";
12                width: 0px;
13                height: 0px;
14                border-left: 10px solid transparent;
15                border-right: 10px solid transparent;
16                border-bottom: 10px solid #CCCCCC;
17                position: absolute;
18                top: -10px;
19                left: 65px;
20            }

3-怎么让一个不定宽度的 div 实现垂直和水平居中（三种方法代码）？

1.使用定位属性

设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%;

　　transform: translateX(-50%) translateY(-50%);(元素宽高一半)

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        background-color: green;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
}
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

　　2.使用flex布局实现

　　设置父元素为flex定位，justify-content: center; align-items: center;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: flex;
        justify-content: center;
        align-items: center;
}
 
    #son {
        background-color: green;
}
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

　　3. 伪类:before结合display: inline-block;

<style>
.container{
    text-align: center;
}
.container:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.inner {
    display: inline-block;
}
</style>
<div class="container">
    <div class="inner">
        this is a box fixed in center of screen<br>The second line
    </div>
</div>

简书五中参考

4-清浮动的方式有哪些？

1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）

2.父级添加overflow属性（父元素添加overflow:hidden）（不推荐）

　　优点：代码简洁

　　缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

3.使用after伪元素清除浮动（推荐使用）

    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
 
<body>
    <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
        <!--<div class="clear">额外标签法</div>-->
    </div>
    <div class="footer"></div>
</body>

4.使用before和after双伪元素清除浮动

     .clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }
 
 <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
    </div>
    <div class="footer"></div>

5-如何让两个块级元素显示在同一行

　　改变display属性

　　　　display:inline-block;

　　浮动　　

　　　　float: left;

　　定位

　　采用flex布局：把父容器设置成弹性盒子,默认主轴方向水平