CSS3-盒模型

最新推荐文章于 2024-04-02 00:16:05 发布

net_chengsheng

最新推荐文章于 2024-04-02 00:16:05 发布

阅读量324

点赞数

分类专栏： css3 盒模型文章标签： css3 盒模型

本文链接：https://blog.csdn.net/qq_29548433/article/details/74943044

版权

css3 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

盒模型

1 篇文章 0 订阅

订阅专栏

一.盒模型介绍

所谓的盒模型，是CSS中的一个重要的概念, 用来布局和设计页面。

由：margin(外边距)、border(边框)、padding(内边距)、content(内容),四部分组成。

Html的所有元素都可以当成盒子来对待

如下图

这里写图片描述

二. CSS3中对盒模型扩展

2.1 在css中影响盒子大小的因素：

我们知道在css中影响盒子大小的因素有border、padding、content.

margin只能改变盒子与盒子之间的距离，不会影响盒子大小

通过设置标签元素的width, height，改变的只是盒子中content的大小

盒子实际的width：

左边框 + 左内边距 + 内容宽度 + 右内边距 + 右边距

盒子实际的height：

上边框 + 上内边距 + 内容宽度 + 下内边距 + 下边距

如下图

这里写图片描述

2.2 css3中引入了box-sizing，来对盒子模型进行扩展

box-sizing有两个值：content-box 和 border-box

① content-box

盒子的实际宽度=width + 左右border + 左右padding之和

示例代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        /*② 设置盒子样式*/
        div {
            /*width height 设置的是content 的宽高*/
            width: 300px;
            height: 300px;
            /*盒子与盒子之间的距离*/
            margin: 0px;
            /*设置边框*/
            border: 10px solid black;
            /*内边距*/
            padding: 10px;

            box-sizing: content-box;
        }
    </style>
</head>
<body>
    <!--① 创建一个div盒子-->
    <div></div>
</body>
</html>

效果

这里写图片描述

② border-box

盒子的实际宽度就等于设置的width值，通过改变border 和 padding 值，不会影响盒子的大小。

示例代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        /*② 设置盒子样式*/
        div {
            /*width height 设置的是content 的宽高*/
            width: 300px;
            height: 300px;
            /*盒子与盒子之间的距离*/
            margin: 0px;
            /*设置边框*/
            border: 10px solid black;
            /*内边距*/
            padding: 10px;

            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <!--① 创建一个div盒子-->
    <div></div>
</body>
</html>

运行效果

这里写图片描述

net_chengsheng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3-盒模型

一.盒模型介绍所谓的盒模型，是CSS中的一个重要的概念, 用来布局和设计页面。由：margin(外边距)、border(边框)、padding(内边距)、content(内容),四部分组成。 Html的所有元素都可以当成盒子来对待如下图二. CSS3中对盒模型扩展2.1 在css中影响盒子大小的因素：我们知道在css中影响盒子大小的因素有border、paddin
复制链接

扫一扫

专栏目录