CSS盒子模型

云下人

于 2023-02-15 19:54:38 发布

阅读量89

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_45667640/article/details/129048611

版权

1、盒子模型的分类

1、W3C盒子模型：

其中的padding和border都不被定义在width和height中。

IE盒子模型：

其中的padding和border都定义在width和height中。

2、标准盒子(W3C盒子)

内容区(content)：分内容的。

内边距(padding)：设置内容和边框的距离。

边框(border)：设置区分盒子内外。

外边距(margin)：设置元素与元素之间的距离，设置元素的位置。用法基本与padding一样。

3、IE盒子(怪异盒子)

与标准盒子基本没什么区别。

2、标准盒子边框属性

1、基本属性

border-style： solid(实线)/dashed(虚线)/double(双线)/dotted(点线)。

border-color：设置边框的颜色。

border-width：设置边框的宽度。

2、设置整圆

<!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>练习</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            /*这里要设置宽高，并且宽高要一样  */
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border-radius: 50% 50% 50% 50%;
        }
    </style>
</head>

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

</html>

3、设置半圆

<!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>练习</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            /* 这里进行设置宽高，并且一边要是另外一边的两倍 */
            width: 200px;
            height: 100px;
            background-color: skyblue;
            /* 这里进行取值时，不能使用百分比，因为框高不一样。 */
            border-radius: 100px 100px 0 0;
        }
    </style>
</head>

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

</html>

4、设置四分之一圆

<!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>练习</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            /* 这里进行设置宽高，宽高要一样大 */
            width: 100px;
            height: 100px;
            background-color: skyblue;
            /* 这里进行取值时，只需要设置一个角的大小即可 */
            border-radius: 100% 0 0 0;
        }
    </style>
</head>

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

</html>

5、设置三角形

<!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>练习</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            /* 制作三角形，需要设置宽度和高度都是零 */
            width: 0;
            height: 0;
            border: 10px solid red;
            /* transparent:表示透明色 
                当我需要制作哪个方向的三角形时，只需要把其他几个方向的颜色设置为透明色就行
            */
            border-color: aqua transparent transparent transparent;

        }
    </style>
</head>

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

</html>