欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-19 17:07:09
css盒模型细节知识点总结只要元素有浮动,尽量保证浮动元素都在一个父元素里面。高度塌陷:子元素浮动,而父元素未设置高度时。如果想让盒子保持原有的大小,在宽高的基础上减掉padding值。如果父元素没有设置宽高,添加padding值,不需要减padding。margin可以设置负值margin常出现的两个bug:a:相邻两个元素上下之间的margin值会重叠,按照最大值设置b:如果一个父元素和第一个子元素,没有设置浮动,并且给第一个子元素设置margin-top会错误的...

浮动

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

padding相关

  • 内边距会影响盒子的可见框的大小;
    盒子可见框的宽度=左右边框宽度+左右内边距宽度+内容区宽度
    盒子可见框的高度=上下边框宽度+上下内边距宽度+内容区宽度

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

  • 如果父元素没有设置宽高,添加padding值时,则不需要减padding值。

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

相关标签: css