2.9-CSS基础--盒子模型（上）

秋枫 ~

已于 2022-07-27 15:19:54 修改

阅读量517

点赞数

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

于 2022-07-26 21:47:02 首次发布

本文是秋枫 ~原创文章，转载请附上博文链接！

本文链接：https://blog.csdn.net/weixin_43472938/article/details/126001993

版权

CSS 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

盒子模型的介绍

盒子概念

页面中的每一个标签，都可以看做是一个“盒子”，通过盒子的视角更方便进行布局
浏览器在渲染网页时，会将网页中的元素看做是一个个的矩形区域，我们称之为盒子

盒子模型

CSS中规定每个盒子分别由以下内容构成
- 内容区域（content）
- 内边距区域（padding）
- 边框区域（border）
- 外边距区域（margin）

盒子模型与现实中的包装盒类似
在这里插入图片描述

盒子模型内容区域宽高设置

在这里插入图片描述

边框 border 相关属性设置

作用	属性名	属性值
边框粗细	border-width	数字+px
边框样式	border-style	实线solid、虚线dashed、点线dotted
边框颜色	border-color	颜色取值

边框border的连写形式

单个取值的连写，取值之间以空格隔开
- 如：border：10px solid red;

在这里插入图片描述

边框border的单方向设置

只给盒子的某个方向单独设置边框
border - 方位名词
- 如：border-top：10px solid red;
  - 顶部 top
  - 底部 bottom
  - 左边 left
  - 右边 right

盒子实际大小计算公式

盒子实际大小（宽度）=左边框+内容宽度+右边框

在这里插入图片描述

内边距（padding）-取值

作用：设置边框与内容区域之间的距离
- 常见取值

取值	示例	含义
一个值	padding：10px;	上右下左设置为10px
两个值	padding：10px 20px;	上下设置为10px、左右设置为20px
三个值	padding：10px 20px 30px;	上设置为10px、左右设置为20px、下设置为30px
四个值	padding：10px 20px 30px 40px;	上设置为10px、右设置为20px、下设置为30px、左设置为40px

规则：从上开始赋值，顺时针赋值

内边距（padding）-单方向设置

padding - 方位名词
padding-top：20px;

新浪导航栏实例

在这里插入图片描述

<!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>Document</title>
    <style>
        .box {
            height: 40px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
        }
        .box a {
            height: 40px;
            width: 80px;
            display: inline-block;
            text-align: center;
            line-height: 40px;
            color: #4c4c4c;
            text-decoration: none;
            font-size: 12px;
        }
        .box a:hover {
            background-color: #edeef0;
            color: #ff8400;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
    </div>
</body>
</html>