前端面试笔试复习（5）

1、纯CSS画一个三角形

.div{
	height:0;
	width:0;
	border:100px solid transparent;//其他三部分透明
	border-top-color:red;//上面部分红色
}

2、不用CSS的border，用其他属性模拟边框

div{
	boder-shadow:0 0 0 5px #ccc,
	0 0 0 10px #FC0,
	0 0 0 5px #F00 inset;
	width:150px;
	heigth:50px;
}

3、HTML5新特性
(1)语义标签
(2)增强型表单
(3)视频和音频
(4)Canvas绘图
(5)SVG绘图
(6)地理定位
(7)拖放API
(8)Web Worker
(9)Web Storage
(10)WebSocket

4、什么是外边距塌陷？

外边距塌陷也称为外边距合并，是指两个在正常流中相邻（兄弟或父子关系）的块级元素的外边距，组合在一起变成单个外边距，不过只有上下外边距才会有塌陷，左右外边距不会出现这种问题。

1.父子元素之间的外边距margin合并问题(外边距塌陷)

<!-- 结构 -->
<div class="box">
    <div class="b1"></div>
</div>
<!-- 样式 -->
.box {
            width: 800px;
            height: 500px;
            background-color: orange;
        }

        .b1 {
            margin-top: 20px;
            width: 200px;
            height: 200px;
            background-color: purple;
        }

我们想要的效果是这样的

但实际是这样的

解决方法：

//父元素添加代码段：
            border: 1px solid transparent; /*方法1*/
            float: left; /*方法2*/
            position: absolute; /*方法3*/
            padding: 1px; /*方法4*/
            display: inline-block; /*方法5*/
            overflow: hidden; /*方法6*/
            overflow: auto; /*方法7*/

2.兄弟元素之间的外边距合并问题

<!--结构-->
<div class="box1">
    <div class="b2"></div>
    <div class="b3"></div>
</div>

<!--样式-->

.b2,
.b3 {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
}


.b2 {
            background-color: pink;
            margin-bottom: 20px;
        }
        /* b2 margin-bottom 20px; b3 margin-top 30px ;本应该b2 和 b3 间隔50px */
        /* 实际 只有 30px 因为外边距margin发生了合并 */
        .b3 {
            margin-top: 30px;
            background-color: green;
        }

我们想要的效果：粉色 和 绿色间隔为50px’

但实际是这样的：间隔只有 30px 因为margin发生了合并 合并后就只剩margin值较大的部分

解决方法：

<!--增加左浮动 或 转换为行内块-->
 float: left; // 1.设置左浮动 解决外边距margin 合并问题呢
 display: inline-block; //2.转换为行内块 解决外边距margin 合并问题

当外边距塌陷时，外边距之间的计算方式是怎样的？
1.两个都是正数，取较大的值
2.两个都是负数，取绝对值较大的值
3.一正一负，取两个值得和在这里插入代码片

5、纯CSS方式让超出容器宽度的文本自动替换为省略号

首先符合容器满足三个条件

p{
	width:100px;				//容器宽度
	white-space:nowrap;			//强制在一行
	overfloat:hidden;			//隐藏溢出
}
.overfloat-ellipsis{
	text-overfloat:ellipsis;
}