【HTML】CSS盒子模型

最新推荐文章于 2022-11-02 16:51:22 发布

文思月

最新推荐文章于 2022-11-02 16:51:22 发布

阅读量142

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_44366571/article/details/104647025

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

CSS盒子模型

本篇文章：

本文讲述了CSS盒子模型的一些基本关键字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <!--
		盒子模型：
			作用/意义：决定不同类型元素之间的位置关系(平面位置、空间位置)
			background-color:h1：h1覆盖在
			h1,外边距

			网页元素-类比 盒子：
			空间位置的覆盖关系：从下往上
			背景色(最下面) < 背景图片(然后) < 元素内容(最上面)


			border-top-color:上
			border-bottom-color:下
			bolder-left-color:左
			bolder-right-color:右

			外边距：margin
			margin-top:

			内边距：padding


			-->
    <style type = "text/css">
        p, div{
            padding: 0px;
            margin: 0px;
        }

        p{
            width: 500px;
            height: 400px;
            font-size: 20px;

            /*边框：border*/
            /*设置边框的宽度为1px，线条为：solid(实线)*/
            border: 1px dashed;

            /*线条类型：solid，dotted，dashed，double*/
            border-style: dashed;

            /*    边框颜色：border-color:*/
            /*    border-color:red;	代表"上下左右"都为红色*/
            /*    border-color:red yellow;"上下"红，"左右"黄*/
            /*border-color:red yellow blue;"上"红 "左右"黄 "下"蓝*/
            /*border-color:red yellow blue green;"上右下左"红黄蓝绿顺时针颜色*/
            /*border-top-color:上*/
            /*border-bottom-color:下*/
            /*bolder-left-color:左*/
            /*bolder-right-color:右*/
            border-color: red;

            /*    边框粗细：border-width:*/
            /*medium，thin，thick(可以是数字2px)*/
            border-width:2px;

            /*内边距：padding*/
            /*里面的文字和边框的距离，分为上下左右四个边距*/
            padding-bottom: 10px;
            padding-left: 10px;
            padding-top: 10px;

        }

        div{
            font-size: 20px;
            width:500px;
            height: 500px;
            padding: 10px;

            /*外边距：margin*/
            /*此盒子和外面大盒子的边距，上下左右四个边距*/
            /*设置外边距上下左右均为：10px*/
            margin: 10px;

            /*设置内边距上下左右为2px*/
            border: 2px dotted black;
        }

    </style>
</head>
<body>

    <div>
        热爱生命<br/>
        我不去想是否能够成功<br/>
        既然选择了远方<br/>
        便只顾风雨兼程<br/>
        我不去想能否赢得爱情<br/>
        既然钟情于玫瑰<br/>
        就勇敢地吐露真诚<br/>
        我不去想身后会不会袭来寒风冷雨<br/>
        既然目标是地平线<br/>
        留给世界的只能是背影<br/>
        我不去想未来是平坦还是泥泞<br/>
        只要热爱生命<br/>
        一切，都在意料之中<br/>
    </div>
    <p>
        只要明天还在<br/>
        只要春天还在<br/>
        我就不会悲哀<br/>
        纵使黑夜吞噬了一切<br/>
        太阳还可以重新回来<br/>
        只要生命还在<br/>
        我就不会悲哀<br/>
        纵使陷身茫茫沙漠<br/>
        还有希望的绿洲存在<br/>
        只要明天还在<br/>
        我就不会悲哀<br/>
        冬雪终会慢慢融化<br/>
        春雷定将滚滚而来<br/>
    </p>

</body>
</html>