KT

盒子模型

298字
0
0
最后修改于

CSS 盒子模型#

盒子模型的概念比较简单，除去内容外，只剩 padding (内边距)，margin (外边距)，border (边框)。border 及其内部的部分为盒子。

外边距不计入盒子的实际大小 —— 当然，它影响盒子在页面上所占的总空间，但只影响盒子外的空间。盒子的面积止于边框，不会延伸到外边距中。

在标准盒子模型 (box-sizing: content-box)，宽高设置是基于内容区域的，比如设置width:200px，最终得到的盒子宽度则是(200+padding+border)px。

而在替代 (怪异, IE) 盒模型 (box-sizing: border-box) 中，宽高设置是基于边框的，比如设置width:200px，盒子宽度为200px，而内容区域为(200-padding-border)px。

![[img/image 1.png]]

![[img/image 2.png]]

Jetpack Compose#

相比于盒子模型，其概念更加精简一致，没有内外边距之分，盒子。 声明什么就有什么，通过 Row,Column,Box,Surface 等布局原语进行布局。

在同一个 modifer 中可以多次声明 padding、border，便会多次应用。

Modifier
  .padding(4.dp)
  .border(BorderStroke(2.dp,Color.DarkGray))
  .padding(4.dp)
  .border(BorderStroke(2.dp,Color.DarkGray))
  .padding(4.dp)
  .border(BorderStroke(2.dp,Color.DarkGray))
  .padding(4.dp)
  .border(BorderStroke(2.dp,Color.DarkGray))

![[img/image 3.png]]

盒子模型