CSS盒子模型

最新推荐文章于 2024-08-17 14:58:02 发布

小曹要加油

最新推荐文章于 2024-08-17 14:58:02 发布

阅读量350

点赞数

分类专栏： Java Web 文章标签： css css3 html

本文链接：https://blog.csdn.net/ccyzq/article/details/122032528

版权

本文详细介绍了CSS盒子模型，包括内容区、边框、内边距和外边距。内容区是盒子的核心，边框有宽度、样式和颜色。内边距提供内容与边框之间的空间，外边距则是元素间的间距。文章还讨论了外边距的合并现象，如上下元素、包含元素间及空元素的外边距合并。

摘要由CSDN通过智能技术生成

一、认识盒子模型的组成

1、盒子构成

边框 border
内容 content
内边距 padding
外边距 margin

2、盒子举例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>初识盒模型</title>
    <style>
        div {
     
            width: 200px;
            height: 100px;
            background-color: blue;

            margin: 30px;
            border: 40px solid black;
            padding: 50px;
        }
    </style>
</head>
<body>
    <div id="d1">Hello World Yes No</div>
    <div id="d2"></div>
</body>
</html>

在这里插入图片描述

真正可视大小：（border + padding + content）
- 宽：40 + 50 + 200 + 50 + 40
- 高： 40 + 50 + 100 + 50 + 40
真正占用的空间：（margin + border + padding + content）
- 宽：30 + 40 + 50 + 200 + 50 + 40 + 30
- 高： 30 + 40 + 50 + 100 + 50 + 40 + 30
通过box-sizing控制计算宽高的方式：
- content-box：默认宽高指的是content区域；
- border-box：宽高指定的是border + padding + content 区域。

注意

一般默认情况下，指定宽。高是指定content部分的宽、高。
两个盒子之间的margin，不是取margin之和，而是最大值。

二、内容区（content）

内容区是盒子模型的中心区域，包含了盒子的主要信息内容：文本、图片等。
当盒子中有内容时，可能会把宽高撑到超过我们指定的宽高。
内容区有三个属性：
- width：盒子内容区的高度；
- height：盒子内容区的宽度；
- overflow：当content中的信息太多时，并超出内容区所占用的范围时，用来指定溢出内容的处理方式。

overflow属性值	描述
visible	默认值，溢出的内容会出现在元素框之外
hidden	溢出内容将不可见
scroll	溢出的内容被修剪，但可以通过滚动条来查看隐藏部分
auto	有浏览器来决定如何处理

<!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>content-overflow属性</title>
    <style>
        div {
     
            width: 400px;
            height: 200px;
            overflow: scroll;
        }
    </style>
</head>
<body>
    <div>
        <h3>定义和用法</h3>
        <p>overflow属性规定当内容溢出元素框时发生的情况。</p>
        <hr>
        <h4>说明</h4>
        <p> 如果为scroll，则不论是否需要，用户代理都会提供一种滚动机制。
            所以，可能即使元素框中可以放下所有内容，也还是会出现滚动条。</p>
    </div>
</body>
</html>

在这里插入图片描述

三、边框（border）

就是围绕着元素的内容和内边距的一条或者多条线，每条边框又有宽度、颜色、样式、圆角等特征。
元素的边框样式包括宽度、样式、颜色等。

1、边框宽度border-width

取值范围是指定的关键字或数值；指定的关键字有：thin（细边框）、medium（默认值，中等边框）、thick（粗边框）。
边框的参数可以是1~4个：

参数个数	表示含义
当边框参数是4个时	按照上–》右–》下–》左顺时针作用到边框上（TRBL原则：Top、Right、Bottom、Left）
当边框参数是3个时	按照上–》左+右-》下顺时针作用到边框上
当边框参数是2个时	按照上+下–》左+右顺时针作用到边框上
当边框参数是1个时	指的是四个边框宽度都是一样的

2、边框样式border-style

值	描述
none	无边框
hidden	隐藏边框
dotted	点状边框，在大多数浏览器中呈现实线
dashed	虚线，在大多数浏览器中呈现实线
solid	实线
double	双线，双线的宽度等于border-width的值
groove	3D边框凹，取决于border-color的值

最低0.47元/天解锁文章

小曹要加油

关注

0
点赞
踩
4

收藏

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

文章目录一、认识盒子模型的组成1、盒子构成2、盒子举例注意二、内容区（content）三、边框（border）1、边框宽度border-width2、边框样式border-style3、圆角边框border-radius4、边框阴影border-shadow四、内边距（padding）五、外边距（margin）外边距基本用法外边距合并一、认识盒子模型的组成1、盒子构成边框 border内容 content内边距 padding外边距 margin2、盒子举例<!doctype h
复制链接

扫一扫

专栏目录