CSS盒子属性

最新推荐文章于 2023-10-05 20:21:08 发布

鴎鴎鹿鸣

最新推荐文章于 2023-10-05 20:21:08 发布

阅读量924

点赞数

文章标签： html5 css

本文链接：https://blog.csdn.net/gfhdgo/article/details/119549061

版权

一、盒子简介

盒子一般指的是块元素，盒子是我们布局的重要机制。一个盒子应该由外边距、边框、内边距、内容组成。

盒子一般有两个种盒子，一种为：内容盒子(W3C盒子),另一种为边框盒子(IE盒子模型)，这里只是简单介绍一下，在下篇有详细的介绍着两种盒子的区别。

下面的图片说明了盒子模型(Box Model)：

二、width和height

width

内容宽度，块级元素默认 100%，单位可以：px em %。

max-width、min-width定义最大和最小的宽度，设置这个两个属性，该元素的宽度有一个最大和最小的宽度。

height

内容高度，默认 0 ，由子元素填充，单位可以： px em %

max-height、min-height定义最大和最小的高度，设置这个两个属性，该元素的高度有一个最大和最小的高度度。

三、border(边框)

边框就是环绕在标签宽度和高度周围的线条。

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        .div1 {
            width: 100px;
            height: 100px;
            border: 3px solid red;
        }
    </style>
</head>

<body>
    <div class="div1"></div>
</body>

</html>

边框属性：

边框宽度

border-width: 5px;

边框样式

border-style: solid; 边框样式属性的取值：

hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。

dotted 定义点状边框。在大多数浏览器中呈现为实线。

dashed 定义虚线。在大多数浏览器中呈现为实线。

solid 定义实线。

double 定义双线。双线的宽度等于 border-width 的值。

groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。

ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。

inset 定义 3D inset 边框。其效果取决于 border-color 的值。

outset 定义 3D outset 边框。其效果取决于 border-color 的值。

最常用的还是solid 实线和dashed虚线，这两种。

边框颜色

border-color: red;

连写(同时设置四条边的边框)

border: 边框的宽度边框的样式边框的颜色;

边框弧度

border-radius 为元素指定圆角边框的半径取值：绝对值 px、mm 、cm 相对值 em 、rem %

四、padding（内边距）

边框和内容之间的距离就是内边距

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        .div1 {
            width: 500px;
            height: 500px;
            border: 3px solid red;
            padding: 40px;
        }
    </style>
</head>

<body>
    <div class="div1">我是一个div</div>
</body>

</html>

非连写 padding-top: ; padding-right: ; padding-bottom: ; padding-left: ;

注意点:

1.给标签设置内边距之后, 标签占有的宽度和高度会发生变化

2.给标签设置内边距之后, 内边距也会有背景颜色

连写 padding: 上右下左;

五、margin（外边距）

外边距代表盒子四周的区域。相邻元素的边距会合并，标签和标签之间的距离就是外边距

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        .div1 {
            width: 500px;
            height: 500px;
            border: 3px solid red;
            padding: 40px;
            margin: 50px;
        }
    </style>
</head>

<body>
    <div class="div1">我是一个div</div>
</body>

</html>

格式：

非连写 margin-top: ; margin-right: ；

连写：margin: 上右下左;

鴎鴎鹿鸣

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS盒子属性

一、盒子简介盒子一般指的是块元素，盒子是我们布局的重要机制。一个盒子应该由外边距、边框、内边距、内容组成。盒子一般有两个种盒子，一种为：内容盒子(W3C盒子),另一种为边框盒子(IE盒子模型)，这里只是简单介绍一下，在下篇有详细的介绍着两种盒子的区别。下面的图片说明了盒子模型(Box Model)：二、width和heightwidth内容宽度，块级元素默认 100%，单位可以：px em %。max-width、min-width定义最大和最小的宽度，设置这个两个..
复制链接

扫一扫