个人记录

1.实现简单的文字提示

white-space：nowrap；//文字不换行

	div {
		position:relative;
	}
	div::before {
		content:'提示内容';
		white-space：nowrap; //不换行
		padding:10px; //撑开大小
	}
	div::after {
		width:0;
		height:0;
		border: 10px solid transparent;
		border-bottom:#eee;
		position:absolute;
		top:-10px;
		left:10px;
	}

2.导航栏动画

	li {
		position:relative;
		width:64px;
		...
	}
	li:: before {
		content:'';
		position:absolute;
		bottom:0;
		left:100%;
		width:0;
		height:100%;
		border:2px solid #000;
		transition: .2s width linear;
	}
	li.show::before {
		left:0;
		width:64px;
	}

通过对left位置的调整，可以调整底部横线出现的方向。调整transition，改变动画效果。

3.鼠标移入时兄弟元素的样式变化的控制

	div:hover + li {
		...
	}

4.空心的三角形由两个三角形重叠实现

5.下拉菜单，点击任意位置收起

1.给document添加点击事件，收起下拉菜单

2.给点击菜单事件，取消事件冒泡

6. img为行内标签，图片居中需要设置display：block

7. 设置的space-letter属性之后，需要设置margin进行居中

8. 换行方式word-break：属性规定的自动换行处理

	word-break:normal;//浏览器默认换行
	word-break:break-all;//允许在单词内换行
	word-break:keep-all;//只能在半角空格换连字符处换行

9.white-space 属性设置如何处理元素内的空白

1.pre  空白会被浏览器保留
2.nowrap 文本不会换行，文本会在同一行上继续，直到遇到<br>标签
3.pre-warp 保留空白序列，但是文本正常的换行
4.pre-line  合并空白符序列，但保留换行符

10.word-warp 允许常单词或者url地址换到下一行

11.unbind()方法可以解绑某个单独的事件