css小箭头、布局方法、盒模型

一、使用css实现小箭头，将宽高置为0，只有border时，正方形被分为4份，因为border是上右下左，所以以x将正方形分为4份，便会实现小箭头

<style type="text/css">
		.array {
			border-left: 4px solid transparent;
		  	border-right: 4px solid transparent;
		  	border-top: 10px solid #e3e3e3;
		  	width: 0;
			height: 0;		
		}
	</style>
</head>
<body>
	<div class="array"></div>
</body>

二、高度已知，左中右三栏布局，左300px，右300px，中自适应

1、通过浮动：左float:left，右float:right，兼容性比较好

<section class="layout1">
		<div class="layout1-left">left</div>
		<div class="layout1-right">right</div>
		<div class="layout1-content">
			center
		</div>
	</section>

.layout1 .layout1-left {
			width: 300px;
			background: red;
			float: left;
		}
		.layout1 .layout1-right {
			width: 300px;
			background: blue;
			float: right;
		}
		.layout1 .layout1-content {
			background: yellow;
		}

2、通过定位：父为相对定位，子为绝对定位，

<section class="layout2">
		<div class="layout2-left">left</div>
		<div class="layout2-content">content</div>
		<div class="layout2-right">right</div>
	</section>

.layout2 {
			position: relative;
		}
		.layout2-left {
			position: absolute;
			left: 0;
			width: 300px;
		}
		.layout2-right {
			position: absolute;
			right: 0;
			width: 300px;
		}
		.layout2-content {
			position: absolute;
			left: 300px;
			right: 300px;
		}

3、flex定位：父为display:flex，左右各300px，中间flex:1，自适应

<section class="layout3">
		<style type="text/css">
			.layout3 {
				display: flex;
			}
			.layout3-left {
				width: 300px;
				background: red;
			}
			.layout3-center {
				flex: 1;
				background: blue;
			}
			.layout3-right {
				width: 300px;
				background: yellow;
			}
		</style>
		<div class="layout3-left">left</div>
		<div class="layout3-center">center</div>
		<div class="layout3-right">right</div>
	</section>

4、table定位，父display:table、宽为100%，子display:table-cell

<section class="layout4">
		<style type="text/css">
			.layout4 {
				width: 100%;
				display: table;
			}
			.layout4-left {
				display: table-cell;
				width: 300px;
				background: red
			}
			.layout4-center {
				display: table-cell;
				background: blue
			}
			.layout4-right {
				display: table-cell;
				width: 300px;
				background: yellow
			}
		</style>
		<div class="layout4-left">left</div>
		<div class="layout4-center">center</div>
		<div class="layout4-right">right</div>
	</section>

5、网格布局：父为display:grid，设置三列

<section class="layout5">
		<style type="text/css">
			.layout5 {
				display: grid;
				width: 100%;
				grid-template-columns: 300px auto 300px;
			}
		</style>
		<div class="layout5-left">left</div>
		<div class="layout5-center">center</div>
		<div class="layout5-right">right</div>
	</section>

当高度不知时，flex和table的左右两栏会自动增加，而其他不会

三、css盒模型：margin、border、padding、content

1、标准模型：宽为content的宽；IE模型：宽为border+padding+content的宽

2、设置模型：box-sizing:content-box（标准模型）；box-sizing:border-box（IE模型）

3、js获取盒模型的高

（1）.style.height：只能得到内联样式中的高，且为字符“300px”；.offsetHeight：能得到内联样式和样式表的高，为整形300，包括边框、内边距和横向滚动轴的高度

（2）clientHeight：可视区域padding+height-横向滚动轴高度

（3）scrollHeight：滚动框拉直的高度

4、BFC全称Block Formatting Context块级格式化上下文，BFC中的元素是独立的、布局不受外部的影响

（1）如何触发：float除none以外的值，绝对定位元素position（absolute、fixed）、display为inline-block,table-cess,flex、overflow不为visiable的值

（2）应用清除浮动：左右两栏布局时，作为float:left，当右边元素溢出时，会占用左边的位置，当右边元素设置overflow：hidden时，便不会占用

<!-- bfc子元素即使是float也会参与高度计算 -->
	<section class="bfc">
		<style type="text/css">
			.bfc {
				background: red;
				overflow: auto;     /*当不加时，父元素高为0，加了参与高度计算*/
			}
			.left {
				float: left;
				font-size: 32px;
			}
		</style>
		<div class="left">我是浮动元素</div>
	</section>

css小箭头、布局方法、盒模型

猜你喜欢