CSS入门三、盒子模型

最新推荐文章于 2024-06-20 17:28:13 发布

h270626

最新推荐文章于 2024-06-20 17:28:13 发布

阅读量315

点赞数 5

文章标签： css 前端

本文链接：https://blog.csdn.net/h270626/article/details/139639637

版权

CSS入门三、盒子模型
1、网页布局的本质
网页布局过程：

先准备好相关的网页元素，网页元素基本都是盒子 Box 。

利用 CSS 设置好盒子样式，然后摆放到相应位置。

往盒子里面装内容.

网页布局的核心本质：就是利用 CSS 摆盒子。

2、盒子模型组成
盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒子包括：边框、外边距、内边距和实际内容。

3、边框border
（1）边框
border属性允许你指定一个元素边框的样式和颜色。
边框有三部分组成：边框宽度(粗细)、边框样式、边框颜色。
border : border-width || border-style || border-color
1

边框样式 border-style 可以设置如下值：

none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线
案例如下：

<!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>
div {
width: 300px;
height: 200px;
/* border-width 边框的粗细一般情况下都用 px */
border-width: 5px;
/* border-style 边框的样式 solid 实线边框 dashed 虚线边框 dotted 点线边框*/
border-style: solid;
/* border-style: dashed; */
/* border-style: dotted; */
/* border-color 边框的颜色 */
border-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>