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>

 

4.：before

<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>