盒模型


css中盒子模型介绍


盒子模型分为content padding border margin。

首先介绍下四种具体是指什么意思:

  1. content(内容)

    盒子的内容,显示的是文本和图片,平常设置的一个块状元素中使用的width或height描述的值就是指的content的大小

  2. padding(内边距)

    清除内容周围的区域,会受到框中填充的背景颜色的影响

  3. border(边框)

    边框周围的填充内容,边框受盒子的背景颜色影响

  4. margin(外边距)

    清除边框外的区域,本身不具备颜色,仅仅只是扩长大小


计算

盒模型的计算很重要,需要注意的就是了解到content本身占得是块状元素所在css中设置的大小,其余的只需要按照css中各种情况相加就行了,其他三种描述都是按照顺时针描述的,就是把一个文本分成东南西北四个方向设置边框的距离,按照顺时针设置的!

原文地址:https://www.cnblogs.com/xiayu1996/p/7077415.html