14-CSS盒模型

最新推荐文章于 2024-07-10 16:12:49 发布

「已注销」

最新推荐文章于 2024-07-10 16:12:49 发布

阅读量93

点赞数

本文链接：https://blog.csdn.net/weixin_45029643/article/details/119837531

版权

CSS盒模型

网页布局的过程：

先准备好相关的网页元素(网页元素基本上都是盒子Box)。
利用CSS设置好盒子样式，然后摆放到相应的位置。
往盒子里面装内容。

盒子模型的组成部分

所谓盒子模型，就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容。

边框

border 可以设置元素的边框，边框有三部分组成：边框宽度(border-width)、边框样式(border-style)、边框颜色(border-color)
语法：

div {
    border: border-width || border-style || border-color;
}

示例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子边框</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border-width: 5px;
            border-style: solid;
            border-color: pink;
        }
    </style>
</head>

<body>
    <div></div>

</body>

</html>

CSS盒子边框

如果想要相邻的边框合并在一起，可以使用 border-collapse: collapse;

内边距

padding属性用于设置内边距，即边框与内容之间的距离。

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

复合写法：

值得个数	表达意思
padding: 5px	1个值，代表上下左右都有5像素内边距。
padding: 5px 10px	2个值，代表上下内边距是5像素，左右内边距是10像素
padding: 5px 10px 20px	3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素
padding: 5px 10px 20px 30px	4个值，上5、右10、下20、左30。顺时针顺序

外边距

margin属性用于设置外边距，即控制盒子和盒子之间的距离，用法基本和padding一致。

CSS圆角边框

在CSS3中，新增了圆角边框样式，这样我们的盒子接可以变成圆角了。border-radius 属性用于设置元素的外边框圆角。

border-radius: length;

参数值可以为数值或百分比的形式。
如果是正方形，想要设置一个圆，把数值修改为高度或宽短的一半即可。或者直接写50%。
该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角。
示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS圆角边框</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

CSS圆角边框

CSS盒子阴影

CSS3中新增了盒子阴影，我们可以使用 box-shadow属性为盒子添加阴影。

box-shadow: h-shadow x-shadow blue spread color inser;

属性值说明：

值	描述
h-shadow	必须，水平阴影的位置，允许为负值。
x-shadow	必须，垂直阴影的位置，允许为负值。
blur	可选，模糊距离。
spread	可选，阴影的尺寸。
color	可选，阴影的颜色。
Inset	可选，将外部阴影(outset)改为内部阴影。

默认就是外阴影(outset)但是不可以写这个单词，否则导致阴影无效。
盒子阴影不占用空间，不会影响其他盒子排列。

示例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS阴影</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            box-shadow: 5px 5px 10px 10px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

CSS阴影

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
14-CSS盒模型

CSS盒模型网页布局的过程：先准备好相关的网页元素(网页元素基本上都是盒子Box)。利用CSS设置好盒子样式，然后摆放到相应的位置。往盒子里面装内容。盒子模型的组成部分所谓盒子模型，就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容。边框border 可以...
复制链接

扫一扫