1.盒子模型(Box Model)
理解盒子模型:
可以把html页面中的布局元素看作一个矩形的盒子,她就是一个盛装内容的容器
如图,把content(内容)想象成一个网购的新手机,有宽(width)和高(height)
手机距包装盒的距离为内边距(padding)
包装盒本身的宽度为边框(border)
如果有两个新手机(两个盒子),两个盒子之间的距离为外边距(margin)
(图片摘自网络,侵删)
2.盒子边框(border)
属性:
border-width 定义边框粗细、单位是px
border-style 定义边框的样式
border-color 定义边框的颜色
其中边框的样式包括:
none:默认没有边框
solid:实线边框
举例:20px的实线边框(width和height200px)
dashed:虚线边框
举例:20px的虚线边框(width和height200px)
dotted:点线边框
举例:20px的点线边框(width和height200px)
其中边框的颜色代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>border</title>
<style>
div {
width: 200px;
height: 200px;
border-width: 20px;
border-style: dotted;
border-color: red;
}
</style>
</head>
<body>
<div>盒子</div>
</body>
</html>
样例:
-
边框综合写法(简写)
举例:(没有顺序,常见写法如下)
boder:1px solid red;
-
表格的细线边框
通过表格的cellspacing=“0”,将单元格和单元格之间的距离设置为0
举例:
通过下方代码和样例,单元格和单元格直接有距离,这个距离就是因为边框1px和1px之间造成的距离
现在我们想让这个距离变为0,也就是使cellspacing=“0”
使用属性border-collapse: collapse;
举例:(未使用border-collapse: collapse;)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>边框粗细</title>
<style>
table,th,td {
border: 1px solid blueviolet;
}
</style>
</head>
<body>
<table>
&l