网页布局DIv+css基础

发布日期：2020-07-01 11:13:34

学习前端html和css技术，最重要的是在于实践，无论朋友们看了多少的教程、视频课程或者是相关的书籍，只有亲手去实践才会对这些有全新的认识。

有时看别人代码一眼能看懂，自己却无从下手写起；有时不能理解的技术知识与问题，怎么思考也想不明白等等。本篇文章就给朋友们介绍一下各种常见的 div+css 布局方式和实践技巧。

首先给出html中元素的结构属性如下图：

这里可以清晰看出元素真正的content（内容部分）只是中间一部分，其他都是相关属性所定义的，比如padding（内间距）、border（边框）、margin（外间距），由于元素本身的位置有上下左右，于是对应每个成员就有了4个css属性，具体如下：

padding-left:5px;

padding-right:6px;

padding-top:7px;

padding-bottom:8px;

border-left:5px;

border-right:6px;

border-top:7px;

border-bottom:8px;

margin-left:5px;

margin-right:6px;

margin-top:7px;

margin-bottom:8px;

当然定时某些时候是可以简写的，比如: padding:5px; 就意味着上下左右的内间距都是5px。padding:5px 6px;就意味着上下间距是5px，左右间距是6px。对于border和marign用法是一样的。