前端学习笔记（6）之css盒模型的细节知识点汇总

css盒模型细节知识点总结

浮动padding相关margin相关详解margin负值margin垂直外边距重叠问题相邻元素margin重叠问题

浮动

只要元素有浮动，尽量保证浮动元素都在一个父元素里面。高度塌陷：子元素浮动，而父元素未设置高度时。

padding相关

内边距会影响盒子的可见冠冕堂皇的意思框的大小；
盒子可见框的宽度=左右边框宽度+左右内边距宽度+内容区宽度
盒子可见框的高度=上下边框宽度+上下内边距宽度+内容区宽度

如果想让盒子保持原有的大小，在宽高的基础上减掉padding值。

如果父元素没有设置宽高，添加padding值时，则不需要减p个人季度总结adding值。

margin相关

大致与内边距相同，需要注意的是 值可以为负，即往反方向移动。

margin还可以高考自主招生设置auto（自适应外边距），但只能设置给水平方向。
（纵向不能设置的原因是文档流排列的问题，后期会说。）
auto值只设置给一边怎么样学习margin-left或margin-right时，auto会取最大值，因为auto本意就是自动填充剩余空间。
因此，子元素在父元素内水平居中margin：0 auto ；
（left right都要设置）

详解margin负值

margin本质：只移动边框的位置，不会移动元素。margin负值：将元素的边界往里收margin正值：将元素的边界往外扩

margin垂直外边距重叠问题

如果一个父元素和第一个子元素，没有设置浮动，并且给第一个子元素设置margin-top会错误的把margin加在父元素上。

相邻元素margin重叠问舍然题

两个兄弟元素之间的margin值会重叠，按照最大值设置。

本文地址：https://blog.csdn.net/qq_42698576/article/details/107548495