CSS盒模型

组成contentpaddingbordermargin

  • content:内容区域,由widthheight组成

  • padding:内边距(内填充)

  • border:边框

  • margin:外边距(外填充)

  • 背景颜色会填充到margin以内的区域。

  • 文本会在content区域。

  • padding不能出现负值,margin可以出现负值。

标准盒模型

CSS盒模型样式

box-sizing:允许您以特定的方式定义匹配某个区域的特性元素,可以改变盒模型的展示形态。取值为content-box(默认值)/border-box

CSS盒模型的问题

margin叠加:当给两个盒子同时添加上下外边距的时候,就会出现叠加问题,取值为上下中值较大的作为叠加的值。该问题只在上下有,左右是没有的。

margin传递:该问题只会出现在嵌套的结构中,且只有margin-top会有传递的问题,其它三个方向都没有传递问题。

CSS盒模型扩张

margin自适应居中:左右可以自适应,上下自适应不可以。

不设置content的现象:widthheight不设置的时候,盒模型会自动计算容器大小,避免代码冗余。

不起眼的小广告

上一篇:CSS复合样式与选择器

下一篇:标签分类