了解CSS盒模型、页面布局在UI设计中的作用

我司实行UI规范已过去一段时间,页面风格已逐渐实现统一。但近期在实际业务开发中发现,在UI验收环节不断出现小数值调整情况,极大的延长验收时间。
在和UI设计人员探讨后发现设计者对前端盒模型概念不甚了解,故此篇介绍了css盒模型和组件的概念,以及简单的前端布局思路,UI设计人员在设计时也能结合代码层面考虑,规范前端页面UI标准,减少双方沟通和开发成本。

安卓、iOS、Web布局基本是互通的,因为本人为Web开发,所以从CSS盒模型的角度进行分享。如果你是web前端的初学者,相信这个分享也能给你带来帮助。

CSS盒模型

首先我们来看一段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>

你可能感兴趣的:(调研,css,web,ui设计)