WEB前端学习（5）CSS复习四（盒子模型）

最新推荐文章于 2022-08-03 08:57:22 发布

VIP文章 Puppy_CQ

最新推荐文章于 2022-08-03 08:57:22 发布

阅读量443

点赞数

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

本文链接：https://blog.csdn.net/Puppy_CQ/article/details/124450182

版权

页面布局要学习三大核心, 盒子模型, 浮动和定位. 学习好盒子模型能非常好的帮助我们布局页

网页布局的本质：就是利用 CSS 摆盒子。

网页布局过程：

1. 先准备好相关的网页元素，网页元素基本都是盒子 Box 。

2. 利用 CSS 设置好盒子样式，然后摆放到相应位置。

3. 往盒子里面装内容.

1.盒子模型

盒子模型（Box Model）组成

所谓盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和实际内容

CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（ margin）构成，这就是盒子模型

1. border：

<title>盒子模型之边框</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            /* border-width 边框的粗细  一般情况下都用 px */
            border-width: 5px;
            /* border-style 边框的样式  solid 实线边框   dashed 虚线边框  dotted 点线边框*/
            border-style: solid;
            /* border-style: dashed; */
            /* border-style: dotted; */
            /* border-color 边框的颜色  */
            border-color: pink;


        }
    </style>
</head>
<body>
    <div></div>
</body>

none：没有边框即忽略所有边框的宽度（默认值）

边框简写：

border: 1px solid red; 没有顺序

边框分开写

border-top: 1px solid red; /* 只设定上边框， 其余同理 */

表格的细线边框 border-collapse （collapse合并的意思）属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

border-collapse: collapse; 表示相邻边框合并在一起

注意：

边框会影响盒子实际大小

边框会额外增加盒子的实际大小。因此我们有两种方案解决:

1. 测量盒子大小的时候,不量边框.

2. 如果测量的时候包含了边框,则需要 width/height 减去边框宽度

 <title>边框会影响盒子的实际大小</title>
    <style>
        /* 我们需要一个200*200的盒子, 但是这个盒子有10像素的红色边框 */
        div {
            width: 180px;
            height: 180px;
            background-color: pink;
            border: 10px solid red;
        }
    </style>
</head>
<body>
    <div></div>
</body>

2. padding

padding 属性用于设置内边距，即边框与内容之间的距离。

最低0.47元/天解锁文章

Puppy_CQ

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
WEB前端学习（5）CSS复习四（盒子模型）

页面布局要学习三大核心, 盒子模型, 浮动和定位. 学习好盒子模型能非常好的帮助我们布局页网页布局的本质：就是利用 CSS 摆盒子。网页布局过程： 1. 先准备好相关的网页元素，网页元素基本都是盒子 Box 。 2. 利用 CSS 设置好盒子样式，然后摆放到相应位置。 3. 往盒子里面装内容. 1.盒子模型盒子模型（Box Model）组成所谓盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 CSS 盒子模型本
复制链接

扫一扫