关于盒模型的属性

一、border

实现一个三角形

html如下：

<div class="triangle-up">
</div>
<div class="triangle-down">
</div>

CSS

<style>
	.triangle-up,.triangle-down {
		width: 0;
		height: 0;
		border-left: 50px solid transparent;
		border-right: 50px solid transparent;

	}
	.triangle-up {
		border-bottom: 50px solid #000;

	}
	.triangle-down {	
		border-top: 50px solid #000;
	}
</style>

#####实现一个小房子 html

<div class="house-icon">
</div>

CSS

<style>
	.house-icon {
		width: 0;
		height: 0;
		border-left: 100px solid transparent;
		border-right: 100px solid transparent;
		border-bottom: 50px solid #000;
	}
	.house-icon:after {
		position: relative;
		top: 50px;
		left: -60px;
		content: "";
		display: block;
		width: 40px;
		height: 40px;
		color: transparent;
		border-left: 40px solid #000;
		border-right: 40px solid #000;
		border-top: 20px solid #000;
	}
	</style>

效果图如下：

二、margin

外边界合并问题

1.两个div都是float：left；的两个水平div的左边的margin-right和右边的margin-left是否会合并？

答案：不会合并! 因为float:left;的div为一个BFC，不与他相邻的元素的margin发生合并。

2.两个div都是float：left；的垂直div的上面的margin-bottom和下面的margin-top是否会合并？（两个div宽度大于屏幕宽度时）

答案：不会合并! 因为float:left;的div为一个BFC，不与他相邻的元素的margin发生合并。

3.没有float的情况下的两个div在垂直方向上会怎样？

答案：会合并！

4.没有float的情况下的两个div在水平方向上又会怎样？（让div的display: inline-block;）

答案：不会合并！因为display: inline-block;的div为一个BFC，不与他相邻的元素的margin发生合并。

总结一下：毗邻的两个或多个margin会合并成一个margin，叫做外边距折叠。规则如下：

两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠
浮动元素/inline-block元素/绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠
创建了块级格式化上下文的元素，不会和它的子元素发生margin折叠
元素自身的margin-bottom和margin-top相邻时也会折叠

外边界为负值时

可以通过margin为负值，实现两列三列布局需要和等高设置,在上篇横向两列三列布局问题有介绍。