360前端星学习之基础css篇

最新推荐文章于 2025-04-14 09:37:34 发布

原创最新推荐文章于 2025-04-14 09:37:34 发布 · 203 阅读

0 ·

CC 4.0 BY-SA版权

本文探讨了HTML的发展历程及其标准要求，强调了前端工程师必须具备的基本技能。文章详细解释了DOCTYPE的作用及不同渲染模式的影响，并通过实例对比了content-box与border-box两种盒子模型的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从基础的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>

运行结果如下：