CSS学习中CSS盒⼦模型（重点学习！代码+样例）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）
其中边框的颜⾊代码：
<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;）
<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>
<caption>个⼈情况介绍</caption>
<tr>
<th>a</th>
<th>19岁</th>
<th>男</th>
<th>⼤⼀</th>
</tr>
<tr>
<td>b</td>
<td>16岁</td>
<td>男</td>
<td>⾼中⽣</td>
</tr>
<tr>
<td>b</td>
<td>24岁</td>
<td>⼥</td>
<td>⽩领</td>
</tr>
</table>
</body>
</html>
样例：
举例:（使⽤border-collapse: collapse;）
<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;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<caption>个⼈情况介绍</caption>
<tr>
<th>a</th>
<th>19岁</th>
<th>男</th>
<th>⼤⼀</th>
</tr>
<tr>
<td>b</td>
<td>16岁</td>
<td>男</td>
<td>⾼中⽣</td>
</tr>
<tr>css表格样式
<td>b</td>
<td>24岁</td>
<td>⼥</td>
<td>⽩领</td>
</tr>
</table>
</body>
</html>
样例：
3.内边距（padding）
概念：
指的是边框和内容之间的距离
设置：
padding-left      左内边距
padding-right    右内边距
padding-top      上内边距
padding-bottom 下内边距
注意：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。