关于盒子模型

最新推荐文章于 2022-05-04 21:34:24 发布

yxq5_18

最新推荐文章于 2022-05-04 21:34:24 发布

阅读量87

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/yxq5_18/article/details/107680117

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一.什么是盒子模型

1.盒模型/盒子模型/框模型（box model)
（1）css将页面所有元素都设置为一个矩形的盒子
（2) 将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置

2.每个盒子的组成部分有：
（1）内容区（content）
（2）内边框（padding）
（3）边框（border）
（4）外边框（margin）

3.介绍一个简单的盒子模型：`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>
        .ass {
            /* 
            内容区（content），元素中的所有子元素和文本内容都在内容区排列
                -内容区的大小有width和height两个属性来设置
                    width来设置内容的宽度
                    height来设置内容的高度
             */
            width: 300px;
            height: 300px;
            background-color: blueviolet;

            /* 
            边框（border）属于盒子的边缘，边框里边属于盒子内部，出了边框都是盒子的外部要设置边框，需要至少设置三个样式：
                    边框的宽度 （border-width）
                    边框的颜色 （border-color）
                    边框的样式 （border-style）
            */

            border-width: 8px;
            border-color: darkred;
            border-style: solid;
        }
    </style>
    
</head>
<body>
    <!-- 
        盒模型/盒子模型/框模型（box model)
        -css将页面所有元素都设置为一个矩形的盒子
        -将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放
           到不同的位置
        -每个盒子的组成部分有：
                            内容区（content）
                            内边框（padding）
                            边框（border）
                            外边框（margin）
     -->


    <div class="ass"></div>
</body>
</html>

4.页面效果
在这里插入图片描述

yxq5_18

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于盒子模型

一.什么是盒子模型1.盒模型/盒子模型/框模型（box model)（1）css将页面所有元素都设置为一个矩形的盒子（2) 将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置2.每个盒子的组成部分有：（1）内容区（content）（2）内边框（padding）（3）边框（border）（4）外边框（margin）3.介绍一个简单的盒子模型：`<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫