3

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

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

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

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

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

1-

在css里的话，如果用了两个相同的ID，那么他们的样式是相同的。

2-

.tri_top{
width: 150px;
height: 100px;
background: #CCCCCC;
border-radius: 8px;
margin: 50px 50px;
position: relative;
float: left;
}

.tri_top:before{
               content: "";
               width: 0px;
               height: 0px;
               border-left: 10px solid transparent;
               border-right: 10px solid transparent;
               border-bottom: 10px solid #CCCCCC;
               position: absolute;
               top: -10px;
               left: 65px;
           }

 <div class="tri_top"></div> 

3-

方法一:使用CSS3 transform

父盒子设置：position:relative;

div设置：position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;

方法二：使用display:table-cell

父盒子设置：display:table-cell;text-align:center;vertical-align:middle;

div设置：display:inline-block;vertical-align:middle;

方法三：使用CSS3 flex

父盒子设置：display:flex;justify-content:center;align-items:center;

4-

1. 额外标签法：给谁清除浮动，就在其后额外添加一个空白标签 。

2. 父级添加overflow方法：可以通过触发BFC的方式，实现清楚浮动效果。

3. 使用after伪元素清除浮动：：after方式为空元素的升级版，好处是不用单独加标签了。

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

5-

设置float属性