理解：CSS盒子模型的构成部分及各部分的含义

盒子模型解释元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式盒子模型分为哪几部分？一个盒子模型分成几部分： -...

盒子模型解释

元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式

盒子模型分为哪几部分？

一个盒子模型分成几部分：

- 内容区（content）

- 内边距（padding）

- 边框（border）

- 外边距（margin）

内容区

内容区：盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中的。

如果没有元素设置内边距和边框，则设置内容大小偶人和盒子大小一致

通过width 和height 两个属性可以设置内容的大小

width 和height属性值适合用于块元素

内边距

内边距：元素内容区与边框以内的空间

默认情况下width和height不包含padding的大小

使用padding属性来设置元素的内边距

举例：

padding:10px 20px 30px 40px;

这样会设置元素的上，右，下，上四个方向的内边距。(按照顺时针方向)

padding:10px 20px 30px;

分别指定上，左右，下四个方向的内边距

padding:10px 20px;

分别指定上下，左右四个方向的内边距

padding:10px ;

分别指定上左下右四个方向的内边距

同时在CSS中还提供padding-top padding-right padding-left padding-bottom

边框

可以在元素周围创建边框，边框是元素可见的最外部

可以使用border属性来设置盒子的边框：

border:1px red solid;

上边的样式分别指定了边框的宽度，颜色，样式

也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框

和padding一样，默认width 和height 并包括边框的宽度

边框样式

边框样式可以设置多种样式：

none（没有边框）
dotted（点线）
dashed（虚线）
solid（实线）
double（双线）
groove（槽线）
ridge（脊线）
inset（凹线）
outset（凸线）

外边距

外边距是原素边框与周围元素相距的空间

使用margin属性可以设置外边距

用法和padding 类似，同样也提供了四个方向的

margin-top/right/bottom/left

当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等，所以这行代码 margin:0 auto 可以使元素居中

margin 在一个声明中设置所有外边距属性。
margin-top 设置元素的上外边距。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。

发表于 2021-05-28 11:03
阅读 ( 1063 )
分类：WEB前端开发

理解：CSS盒子模型的构成部分及各部分的含义

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »