css3盒模型

最新推荐文章于 2024-09-11 09:32:29 发布

千殇，影

最新推荐文章于 2024-09-11 09:32:29 发布

阅读量40

点赞数

分类专栏： css 文章标签： html 前端 css3

本文链接：https://blog.csdn.net/m0_73903826/article/details/129006940

版权

css 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

文章介绍了CSS3中的盒模型概念，包括border-box和content-box两种模式。box-sizing属性用于切换盒模型，当设置为border-box时，元素的宽度包括边框和内填充，不会被这些元素撑大；而content-box则是标准盒模型，宽度仅包含内容，内填充和边框会增加元素总体尺寸。

摘要由CSDN通过智能技术生成

css3盒模型（IE盒模型怪异盒模型） box-sizing:border-box;
	content
	padding 不会撑大盒子
	border 不会撑大盒子
	margin 不会撑大盒子

	width不变=width(包含border和padding)

	通过box-sizing进行盒模型的转换，box-sizing:border-box执行的是css3的盒模型
	注意：box-sizing:border-box加给谁？谁超出给定宽高就加给谁

	css盒模型 box-sizing:content-box;
	content
	padding 会撑大盒子
	border 会撑大盒子
	margin 不会撑大盒子
	width不变=width-左右的padding-左右的border