CSS学习中|CSS盒子模型（重点学习！代码+样例）

最新推荐文章于 2024-04-27 15:21:25 发布

美女变成老太婆✿

最新推荐文章于 2024-04-27 15:21:25 发布

阅读量3.4k

点赞数

分类专栏： CSS基础文章标签： css

本文链接：https://blog.csdn.net/weixin_47788265/article/details/107339620

版权

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

最低0.47元/天解锁文章

美女变成老太婆✿

关注

0
点赞
踩
41

收藏

觉得还不错? 一键收藏
0
评论
CSS学习中|CSS盒子模型（重点学习！代码+样例）

1.盒子模型（Box Model）理解盒子模型：可以把html页面中的布局元素看作一个矩形的盒子，她就是一个盛装内容的容器如图，把content（内容）想象成一个网购的新手机，有宽（width）和高（height）手机距包装盒的距离为内边距（padding）包装盒本身的宽度为边框（border） ...
复制链接

扫一扫