先理解这张图:
把元素叫做盒子,设置对应的样式分别是:盒子的边框(border),盒子内容和边框之间的间距(padding),
盒子与盒子之间的间距(margin)。
页面的布局 就是 用盒子与盒子拼揍起来的 。
在学习的过程中,我们发现表格也可以做页面布局, 为什么 还要盒子做布局呢?
答: 打个比喻,我们想装饰一个花园, 表格布局是什么样呢, 他是把花 每一个都插入里面,然后拼揍,也能组装一个漂亮的花园,
用盒子呢, 盒子就像一个花瓶 ,直接把花 插入里面 ,如果想装饰 就拿不同的花 进行拼凑。 显然 盒子灵活性比较高。
以后我们页面布局都是用盒子和盒子之间进行拼凑。
下边我先画一个盒子,根据上边的图片的属性进行画
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格制作样式讲解</title>
<style type="text/css">
.box{
background-color:gold;
margin-left:100px;
width:500px;
height:300px;
border-top:10px solid blue;
padding-left:50px;
border-left:10px dashed green;
padding-top:50px;
border-right:10px dotted red;
padding-top:50px;
}
</style>
</head>
<body>
<div class="box">
我是box
</div>
</body>
</html>
效果图如下: