我司实行UI规范已过去一段时间,页面风格已逐渐实现统一。但近期在实际业务开发中发现,在UI验收环节不断出现小数值调整情况,极大的延长验收时间。
在和UI设计人员探讨后发现设计者对前端盒模型概念不甚了解,故此篇介绍了css盒模型和组件的概念,以及简单的前端布局思路,UI设计人员在设计时也能结合代码层面考虑,规范前端页面UI标准,减少双方沟通和开发成本。
安卓、iOS、Web布局基本是互通的,因为本人为Web开发,所以从CSS盒模型的角度进行分享。如果你是web前端的初学者,相信这个分享也能给你带来帮助。
CSS盒模型
首先我们来看一段html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css盒模型</title>
</head>
<style type="text/css">
.content {
width: 300px;
height: 400px;
border: 5px solid #242424;
padding: 20px;
background-color: #898989;
}
</style>
<body>