14.CSS-边框属性、内边距属性和外边距属性

最新推荐文章于 2024-07-26 19:29:32 发布

山楂不甜

最新推荐文章于 2024-07-26 19:29:32 发布

阅读量1.5k

点赞数

分类专栏：笔记 css 文章标签： css css3 html html5

本文链接：https://blog.csdn.net/Veronnit/article/details/118730028

版权

笔记同时被 2 个专栏收录

60 篇文章 1 订阅

订阅专栏

css

31 篇文章 2 订阅

订阅专栏

本文详细介绍了CSS中的边框属性，包括边框的宽度、样式和颜色，以及连写和非连写方式的设置。此外，还讲解了内边距和外边距的属性，如何设置它们以及需要注意的点，最后提到了外边距的合并现象和text-align:center与margin:0 auto;的差异。

摘要由CSDN通过智能技术生成

边框属性

1.什么是边框？

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

2.边框属性的格式

border的属性：
border-width
border-style
border-color
border-style的取值
none 定义无边框。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
在这里插入图片描述

2.1连写（同时设置四条边的边框）

border:边框的宽度边框的样式边框的颜色
快捷键：bd+ +tab——>border: 1px solid #000;

2.2连写（分别设置四条边的边框）

border-top：边框的宽度边框的样式边框的颜色
border-bottom：边框的宽度边框的样式边框的颜色
border-right：边框的宽度边框的样式边框的颜色
border-left：边框的宽度边框的样式边框的颜色
快捷键：
bt+ +tab——>border-top: 1px solid #000;
bb+ +tab——>border-bottom: 1px solid #000;
br+ +tab——>border-right: 1px solid #000;
bl+ +tab——>border-left: 1px solid #000;

2.1和2.2注意点

1.连写格式中颜色属性可以省略，省略之后默认就是黑色；
2.连写格式中样式不能省略，省略之后就看不到边框了；
3.连写格式中宽度可以省略，省略之后还是可以看到边框。

2.3连写（分别设置四条边的边框）

border-width: 上右下左
border-style: 上右下左
border-color: 上右下左

2.3注意点

1.这三个属性的取值是按照上右下左赋值的（顺时针）
2.这三个属性的取值省略时的规律：
如果只赋值了上右下，那么左边的取值和右边一样；
如果只赋值了上右，那么左边的取值和右边一样，下边的取值和上边一样；
如果只赋值了上，那左边、右边、下边的取值和上边一样。

2.4非连写（方向+要素）

border-top-width: ;
border-top-style: ;
border-top-color: ;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>44-边框练习</title>
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        .box1{
            border: 5px solid black;
        }
        .box2{
            border-width: 5px 5px 5px 5px;
            border-style: solid solid solid solid;
            border-color: red green blue purple;
        }
        .box3{
            border-top: 5px solid red;
            border-right: 5px dashed red;
            border-bottom: 5px solid red;
            border-left: 5px solid red;
        }
        .box4{
            border-top: 5px solid red;
            border-right: 5px dashed red;
            border-bottom: 5px solid red;
            border-left: 5px dashed red;
        }
        .box5{
            border-top: 5px solid black;
            border-right: 5px solid black;
            border-left: 5px solid black;
        }
        .box6{
            width: 0;
            height: 0;
            border-width: 25px;
            border-style: solid;
            border-color: red white white white;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<hr>
<div class="box2"></div>
<hr>
<div class="box3"></div>
<hr>
<div class="box4"></div>
<hr>
<div class="box5"></div>
<hr>
<div class="box6"></div>
</body>
</html>

可以画出一个倒三角形
width: 0;
height: 0;
border-width: 25px;
border-style: solid;
border-color: red white white white;

内边距属性

1.内边距

内边距就是单元格的边框和内容之间的距离。
默认情况下，内边距就是1。

2.如何设置内边距属性？

2.1 非连写
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
2.2 连写
padding：上右下左；
这个属性的取值省略时的规律：
如果只赋值了上右下，那么左边的取值和右边一样；
如果只赋值了上右，那么左边的取值和右边一样，下边的取值和上边一样；
如果只赋值了上，那左边、右边、下边的取值和上边一样。

3.注意点

1.给标签设置内边距之后，标签占有的宽度和高度会发生变化；
2.内边距也会有背景颜色。

外边距属性

1.外边距

外边距就是单元格和单元格之间的距离。
默认情况下，外边距就是2。

2.如何设置外边距属性？

2.1 非连写
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
2.2 连写
margin: 上右下左;
这个属性的取值省略时的规律：
如果只赋值了上右下，那么左边的取值和右边一样；
如果只赋值了上右，那么左边的取值和右边一样，下边的取值和上边一样；
如果只赋值了上，那左边、右边、下边的取值和上边一样。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>46-外边距属性</title>
  <style>
    span{
      display: inline-block;
      width: 100px;
      height: 100px;
      border: 1px solid #000;
    }
  </style>
</head>
<body>
<span class="box1">我是span</span>
<span class="box2">我是span</span>
<span class="box3">我是span</span>
</body>
</html>