边框知识点汇总

最新推荐文章于 2024-05-27 00:00:00 发布

weixin_42834788

最新推荐文章于 2024-05-27 00:00:00 发布

阅读量586

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_42834788/article/details/96476061

版权

CSS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一、边框属性

1.什么边框?
边框就是环绕在标签宽度和高度周围的线条

2.边框属性的格式
2.1连写(同时设置四条边的边框)
border: 边框的宽度边框的样式边框的颜色;

快捷键:
bd+ border: 1px solid #000;

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

2.2连写(分别设置四条边的边框)
border-top: 边框的宽度边框的样式边框的颜色;
border-right: 边框的宽度边框的样式边框的颜色;
border-bottom: 边框的宽度边框的样式边框的颜色;
border-left: 边框的宽度边框的样式边框的颜色;

快捷键:
bt+ border-top: 1px solid #000;
br+
bb+
bl+

<style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            /*border: 5px solid blue;*/
            /*border: 5px solid;*/
            /*border: 5px blue;*/
            /*border: solid blue;*/

            border-top:5px solid blue;
            border-right:10px dashed green;
            border-bottom:15px dotted purple;
            border-left:20px double pink;
        }
    </style>
<body>
<div class="box"></div>
</body>

2.3连写(分别设置四条边的边框)
border-width: 上右下左;
border-style: 上右下左;
border-color: 上右下左;

注意点:
1.这三个属性的取值是按照顺时针来赋值, 也就是按照上右下左来赋值, 而不是按照日常生活中的上下左右
2.这三个属性的取值省略时的规律
2.1上右下左 > 上右下 > 左边的取值和右边的一样
2.2上右下左 > 上右 > 左边的取值和右边的一样下边的取值和上边一样
2.3上右下左 > 上 > 右下左边取值和上边一样

3.非连写(方向+要素)
border-left-width: 20px;
border-left-style: double;
border-left-color: pink;

<style>
        .box{
            width: 500px;
            height: 500px;
            background-color: red;
            /*border-width: 5px 10px 15px 20px;*/
            /*border-style: solid dashed dotted double;*/
            /*border-color: blue green purple pink;*/
            /*border-color: blue green purple;*/
            /*border-color: blue green;*/
            /*border-color: blue;*/

            border-top-width: 5px;
            border-top-style: solid;
            border-top-color: blue;

            border-right-width: 10px;
            border-right-style: dashed;
            border-right-color: green;

            border-bottom-width: 15px;
            border-bottom-style: dotted;
            border-bottom-color: purple;

            border-left-width: 20px;
            border-left-style: double;
            border-left-color: pink;
        }
    </style>
<body>
<div class="box"></div>
</body>

二、内边距属性

1.什么是内边距?
边框和内容之间的距离就是内边距

2.格式
2.1非连写
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;

2.2连写
padding: 上右下左;

2.这三个属性的取值省略时的规律
2.1上右下左 > 上右下 > 左边的取值和右边的一样
2.2上右下左 > 上右 > 左边的取值和右边的一样下边的取值和上边一样
2.3上右下左 > 上 > 右下左边取值和上边一样

注意点:
1.给标签设置内边距之后, 标签占有的宽度和高度会发生变化
2.给标签设置内边距之后, 内边距也会有背景颜色

<style>
        div{
            width: 98px;
            height: 90px;
            border: 1px solid #000;
            background-color: red;
        }
        .box1{
            padding-top: 20px;
        }
        .box2{
            padding-right:40px;
        }
        .box3{
            padding-bottom:80px;
        }
        .box4{
            padding-left:160px;
        }
        .box5{
            /*padding:20px 40px 80px 160px;*/
            /*padding:20px 40px 80px;*/
            /*padding:20px 40px;*/
            padding:20px;
        }
    </style>
<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>
</body>

三、外边距属性

1.什么是外边距?
标签和标签之间的距离就是外边距

2.格式
2.1非连写
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;

2.2连写
margin: 上右下左;

2.这三个属性的取值省略时的规律
2.1上右下左 > 上右下 > 左边的取值和右边的一样
2.2上右下左 > 上右 > 左边的取值和右边的一样下边的取值和上边一样
2.3上右下左 > 上 > 右下左边取值和上边一样

注意点:
外边距的那一部分是没有背景颜色的

    <style>
        *{
            padding:0;
            margin:0;
        }
        span{
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            background-color: red;
        }
        div{
            height: 100px;
            border: 1px solid #000;
        }
        .box1{
            /*
            margin-top:20px;
            margin-right:40px;
            margin-bottom:80px;
            margin-left:160px;
            */
            /*margin:20px 40px 80px 160px;*/
            /*margin:20px 40px 80px;*/
            /*margin:20px 40px;*/
            margin:20px;
        }

    </style>
<body>
<span class="box1">我是span</span><span class="box2">我是span</span><span class="box3">我是span</span><div class="box4"></div>

</body>

四、外边距合并的现象

在默认布局的垂直方向上, 默认情况下外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的，水平方向上是正常的叠加。

 <style>
        span{
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
        div{
            height: 100px;
            border: 1px solid #000;
        }
        .hezi1{
            margin-right:50px;
        }
        .hezi2{
            margin-left:100px;
        }
        .box1{
            margin-bottom:50px;
        }
        .box2{
            margin-top:100px;
        }
    </style>
<body>
<span class="hezi1">我是span</span><span class="hezi2">我是span</span>
<div class="box1">我是div</div>
<div class="box2">我是div</div>
</body>

weixin_42834788

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
边框知识点汇总

一、边框属性1.什么边框?边框就是环绕在标签宽度和高度周围的线条2.边框属性的格式2.1连写(同时设置四条边的边框)border: 边框的宽度边框的样式边框的颜色;快捷键:bd+ border: 1px solid #000;注意点:1.连写格式中颜色属性可以省略, 省略之后默认就是黑色2.连写格式中样式不能省略, 省略之后就看不到边框了3.连写格式中宽度可以省略, 省...
复制链接

扫一扫