百分比布局理解：HTML+Body自适应与CSS三角形、品字布局剖析-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43704742/article/details/126696355

那个一般来说设置height百分比的话都要父元素高度可寻，为什么 html，body 就可以设置为100% 是因为浏览器解析后高度自适应吗
```
可以认为html， body 的宽高是参照窗口来进行百分比的
```

怎么理解css 实现三角形

可以理解为高数中的极限思想， 如果你把border放大看， 你可以看到它是一个梯形，而且上底是靠着content（盒模型：content、padding， border、margin），当content为0的时候那么就会变成四个三角形。

	.triangle {
	border-style: soild;
	border-color: transparent transparent transparent red;
	border-width: 50px;
	width: 0;
	height: 0;
}
<!--一般默认的盒模型为w3c标准盒模型 其width、 height 只包括 content ， 你可以通过box-sizing 来改变盒子的模型-->

实现满屏品字

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>满屏品字（也可以吧one类选择器中的width设为100%）</title> 
<style>
	   * {
      margin: 0;
      padding: 0;
    }
	html,body {
		height: 100%;
		width: 100%;
	}
	.one {
		width: 50%;
		height: 50%;
		margin:0 auto;
		background-color: red;
	}
	.left {
		width: 50%;
		height: 100%;
		background-color: green;
		float: left;
	}
	.right {
		width: 50%;
		height: 100%;
		background-color: yellow;
		float: right;
	}
	.main {
		width: 100%;
		height: 50%;
		
	}
</style>
</head>

<body>
<div class= "one"></div>
	<div class = "main">
		<div class = "left"></div>
<div class = "right"></div>
	</div>

</body>
</html>

css 疑问存集地