简述CSS盒模型

·  阅读 158

盒模型的组成

css盒模型包括content、padding、border、margin

image.png

而盒模型可分为两种,即标准盒模型(实际设置的是 content box)和替代盒模型(实际设置的是 border box),浏览器默认设置为 box-sizing: border-box;

标准和模型:content box width = 内容宽度;

替代盒模型:border box width = 内容宽度 + padding + border.

对比如下

image.png


内容区域 content area ,由内容边界限制,容纳着元素的“真实”内容,例如文本、图像或是视频。

内边距区域 padding area ,由内边距边界限制,扩展自内容,负责延伸内容区域的背景,填充内容与边框的间距。

边框区域 border area ,由边框边界限制,扩展自内边距,是容纳边框的区域。

外边距区域 margin area 由外边距边界限制,用空白扩展边框,以分开相邻的元素。

外边距合并

两个相邻元素在上下方向的外边距可能会合并为单个边距。而合并后的边距以最大值为准

  • 哪些情况会合并

    父子合并 —— 即无隔开情况下(无border、padding、行内内容、清除浮动等)

    兄弟合并 —— 即同层相邻元素之间外边距重叠

  • 怎么阻止合并

    兄弟合并是符合预期的,但可以用display:inline-block;消除(width=100%)

    父子合并可以:给父元素添加padding/border;添加overflow:hidden;用display:flex;

注意: 外边距合并只发生在垂直方向,水平方向不合并!

分类:
前端
标签: