CSS教程

CSS盒子模型

本文主要是介绍CSS盒子模型,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

目录
  • 盒子模型组成
  • 边框(border)
  • 内边距(padding)
  • 外边距(margin)

盒子模型组成

盒子模型就是吧HTML页面中的布局元素看作是一个矩形盒子,也就是一个承装内容的容器。

CSS盒子模型的本质就是一个盒子,封装周围的HTML元素,它包括:边距(border)、外边距(margin)、内边距(padding)和实际内容(content)。

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像。

边框(border)

border可以设置元素的边框。边框有三部分组成:边框宽度(粗细、边框样式、边框颜色。

属性 作用
border-width 定义边框粗细,单位是px
border-style 边框样式
border-color 边框颜色
border 复合写法,没有固定顺序
border-top 上边框复合写法
border-bottom 下边框复合写法
border-right 右边框复合写法
border-left 左边框复合写法
border-collapse 合并相邻的边框

border-style

  • dotted - 定义点线边框
  • dashed - 定义虚线边框
  • solid - 定义实线边框
  • double - 定义双边框
  • groove - 定义 3D 坡口边框。效果取决于 border-color 值
  • ridge - 定义 3D 脊线边框。效果取决于 border-color 值
  • inset - 定义 3D inset 边框。效果取决于 border-color 值
  • outset - 定义 3D outset 边框。效果取决于 border-color 值
  • none - 定义无边框
  • hidden - 定义隐藏边框

边框会影响盒子的实际大小

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

  1. 测量盒子的大小的时候,不测量边框。
  2. 如果测量的时候包含了边框,则需要width/height减去边框宽度。

内边距(padding)

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

属性 作用
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距
padding:5px 一个值,上下左右内边距都有5像素
padding:5px 10px 两个值,上下内边距是5像素,左右内边距是10像素
padding:5px 10px 20px 三个值,上内边距5像素,左右内边距10像素 下内边距20像素
padding:5px 10px 20px 30px 四个值,上5像素 右10像素 下20像素 左30像素 顺时针

内边距会影响盒子的实际大小

当我们给盒子指定 padding 值后,发生了两件事:

  1. 内容和边框有了距离,添加了内边距。
  2. padding 影响了盒子实际大小。

也就是说,如果盒子已经有了宽度和高度,此时再指定内边距,会撑大盒子。

解决方案

如果保证盒子跟效果图大小保持一致,则让 width/height 减去多出来的内边距大小即可

如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小

外边距(margin)

margin 属性用于设置外边距,即控制盒子和盒子之间的距离。

属性 作用
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下外边距

maigin 的复合写法和 padding 完全一致。

这篇关于CSS盒子模型的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!