初窥css---盒子以及盒子扩展

Posted 2021-10-20 roseneverdie

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初窥css---盒子以及盒子扩展相关的知识，希望对你有一定的参考价值。

盒子以及盒子扩展

盒子

盒子是用来实现将网页区域化的一个非常重要的工具,盒子使得网页各部分十分清晰的被分开,对于程序员十分友好(。。。),并且使得网页更加容易维护。

盒子的常用属性

技术图片

宽和高这两个属性就不说了

内边距

padding为内编剧边距

该属性是用于调整盒子内部字体距离盒子边框的距离。

技术图片

写法

1.四值法

把四个方向的属性全写出来

技术图片

或者一个一个的写.但是要给定方向

2.三值法

技术图片

3.二值法

技术图片

边框

其实也就是让我们能够亲眼看到盒子的边界在哪里

边框种类

技术图片

边框属性

技术图片

外边距

基本与内边距相同：margin为外边距

盒子扩展

利用边框做一个三角形

效果图

技术图片

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>大家好</title>
        <style>
            div{
                width: 0;
                height: 0;
                /*清除默认宽高*/
                border:30px white solid;
                /*以边框撑出来一个正方形*/
               border-top-color: red;
               border-bottom: 0;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>