CSS盒子模型及属性

la go go

已于 2022-07-21 10:09:22 修改

阅读量3.3k

点赞数 21

文章标签：开发语言 css html 前端

于 2022-07-20 19:41:29 首次发布

本文链接：https://blog.csdn.net/qq_52025132/article/details/125879673

版权

前言

基于html超文本标记语言完成的网页，少不了css的渲染，css就像是给网页穿上漂亮的外衣。

也少不了CSS盒子模型的重要作用，css盒子模型就如衣服上的每一块布料完美组合最后成为一件精致的衣服。接下来我们就来说说css盒子模型有哪些属性，怎样用他们为我们的网页更好的排版布局。

CSS盒子模型可以说是一种思维模型，由四个部分构成，从内而外分别为内容区（content ）、内边距（ padding ）、边框（ border ）和外边距（ margin ）,CSS为这四部分提供了一系列相关属性，通过对这些属性的设置可以丰富盒子的表现效果。具体如下图：

简单总结：● 总宽度：width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

● 总高度：height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

在css盒子的内容区：有width ，height，overflow三个属性，width指定盒子的宽度，height指定盒子的高度，设置width和height可以是像素px，也可以是百分比。overflow是处理内容溢出盒子的处理方法。属性有四个值如下图：

内边距是内容区和边框之间的空间，我们可以通过padding-top 、 padding-right 、 padding-bottom 、 padding-left 及它们的简写属性 padding 来设置内容区各个方向上与边框之间的距离。在为盒子模型设置背景属性时，背景属性可以覆盖到内边距区域。

外边距位于盒子模型的最外围，是边框之外的空间。我们通常使用margin-top 、 margin-bottom 、 margin-left 、 margin-right 及它们的简写属性 margin来设置外边距，即控制盒子和盒子之间的距离。

边框是环绕内容区和内边距的边界，我们可以使用border-style 、 border-width 和 border-color 及它们的简写属性 border 来设置边框的样式。其中， border-style 属性是边框中最主要的属性，如果没有设置该属性的话，其他的边框属性也会被忽略。

border-style 属性用来设置元素中边框的样式

border-width 属性用来设置元素中所有边框的宽度，或者单独为某个边框设置宽度

border-color 属性用来设置元素中所有边框的颜色或者单独为某个边框设置颜色

以上为css盒子模型基本属性，以及使用方式。以供学习html学习者参考。

关注