Day3

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

在css中用了相同的id会设置相同的样式

在js中用了相同的id会造成js只获取第一个元素，其他元素没有效果

二：用伪类实现一个上三角（代码）

利用伪类

css代码：

top：{

 　　　width: 150px;

            height: 100px;

            background: #CCCCCC;

            border-radius: 8px;

            margin: 50px 50px;

            position: relative;

            float: left;

}

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;

        }

transparent意思是透明

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

1：父元素盒子设置相对定位 position:relative

自身div设置绝对定位 position:absolute left:50%,top:50%,transform:translate(-50%，-50%)

2：利用弹性布局

设置父元素盒子display:flex; justify-content:center; align-item:center;

3:使用display：table-cell

https://blog.csdn.net/MessageBox_/article/details/82380913

 

 

关键在于设置了display：cell后，vertical-align：middle使文字内容垂直居中                      中间的图片会随着外层容器的大小而自动水平垂直居中，其实原理和文字水平垂直居中一模一样

其中table-center的顶部没有与左右两侧对齐，原因是teble-left中的<p>有一个margin-top，

而表格布局中默认是文字顶部对齐的，所以table-center会向下移动到首行文字基线对齐，                                 拉伸宽度，会发现左右两侧始终保持高度一致。

解决办法是为table-center添加与左右两侧中margin-top较大者等值的padding-top即可。

 

以前进行类似的布局我都会使用display:inline-block;的方式，需要在ul上

设置font-size: 0;来清除每一个小块之间的间隙，还需要为每一个项写一个                         左侧宽度固定，右侧宽度自适应。布局原理也可以用BFC来解释，

百分比宽度。使用table-cell后，不需要写百分比宽度，也不需要清除小块                         左侧和右侧都是BFC块，BFC块是不会和float块发生重叠的。

间的间隙。而且添加额外项时，会自动平均分配宽度

 

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

设置要居中的div：display:inline-block; vertical-align:middle;

四：清浮动的方式有哪些？

清除浮动：通过clear：both，或者触发BFC增加overflow：hidden，

空标签清除浮动 放置在浮动子元素之后

伪元素清除浮动：利用::after,::before里面设置clear：both

五：如何让两个块级元素显示在同一行

1：浮动（float：left）

2：设置为行内块元素

3：弹性盒模型