从基础的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都是相对于父元素的百分比