360前端星学习之基础css篇

    从基础的HTML语义化到HTML的标准、要求，让我们逐渐了解HTML的演变。如果能有页面美观，功能完善，安全兼容，无障碍，性能优化，用户体验好，这是前端工程师的基础。赵老师提到一个点，<DOCTYPE>的作用是什么，如果没有呢？这引起了我们的思考，DOCTYPE是文档的标注和版本，决定渲染模式，如果不写，默认为怪异模式，是border-box盒子模型。什么是怪异盒子模型，下面代码例子展示：两者的尺寸大小不同

		.box1 {
			box-sizing: content-box;
			width: 100px;
			height: 100px;
			background: red;
			padding: 10px;
			border: 5px solid blue;
			margin-left: 20px;
		}
		.box2 {
			box-sizing: border-box;
			width: 100px;
			height: 100px;
			background: red;
			padding: 10px;
			border: 5px solid blue;
			margin: 20px;
		}

<div class="container">
	<div class="box1"></div>
	<div class="box2"></div>
</div>

运行结果如下：

css之百分比：

padding和margin都是相对于父元素的百分比