CSS 盒子构成元素

broeg

已于 2022-06-29 23:53:59 修改

阅读量255

点赞数 1

分类专栏： css 文章标签： css 前端

于 2022-06-29 21:16:08 首次发布

本文链接：https://blog.csdn.net/broeg/article/details/125529031

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Css将页面中所有元素设置为矩形的盒子，对页面的布局变为对不同盒子的摆放

盒子由以下几部分组成

1.内容区（content）元素中所有的子元素和内容

大小由width和height属性设置

Width 设置内容区宽度

Height 设置内容区高度

2.内边距（padding）

内容区和边框之间的距离是内边距

内边距的设置会影响盒子的大小

背景颜色会延伸到内边距上

3.边框（border）

边框的大小会影响整个盒子的大小

设置边框至少需要设置三个样式(缺一不可)

1.边框的宽度border-width （默认 3个像素）

可以指定四个方向的边框宽度

四个值：上右下左

三个值：上左右下

两个值：上下左右

还可以用 border-xxx-width来控制宽度（xxx为top bottom….等等）

<style>
        .dad{
            width: 200px;
            height: 200px;
            background-color: aqua;
            padding-top: 10%;
            padding-left: 10%;
            padding-right: 10%;
            padding-bottom: 10%;
            /* 盒子的实际宽高是由内容物决定的，
            即实际父盒子的的大小 width + padding + border
             */
            border-width: 1% 2% 1%;
            border-style: solid;
            border-color: aquamarine;
        }
            .baby{
                width: 100%;
                height: 100%;
                background-color: blueviolet;
            }
    </style>
</head>
<body>
    <div class="dad">
       
        <div class="baby">
            我是内部盒子,由我可以观察出，父盒子的内边距位置
        </div>
    </div>