css盒模型关于浮动及定位的应用_css 盒子模型浮动定位-优快云博客

本文链接：https://blog.youkuaiyun.com/lousongti2191/article/details/125416707

本文详细介绍了CSS中的盒模型，包括内容、宽度、高度、内边距、边框和外边距。同时，讨论了CSS定位机制，如普通定位、浮动和绝对定位，并解析了position属性的不同值。此外，还涵盖了CSS浮动的使用，如left、right和none的设定，以及CSS定位属性如position、top、right、bottom、left的作用。最后，提及了overflow、clip、vertical-align和z-index等重要属性在布局和定位中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、普通盒模型
内容：
   content内容
   width宽度
   height高度
   内边距
   padding
边框：
   border
外边距：
   margin
2、CSS 定位机制：
   普通
   浮动
   绝对定位
3、CSS position 属性：
   static
   relative
   absolute
   fixed
4、CSS 浮动：
   float:left
   left 文本或图像会移至父元素中的左侧。
   right 文本或图像会移至父元素中的右侧。
   none 默认。文本或图像会显示于它在文档中出现的位置。
5、CSS定位属性：
   position:把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
   top:定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
   right:定义了定位元素右外边距边界与其包含块右边界之间的偏移。
   bottom:定义了定位元素下外边距边界与其包含块下边界之间的偏移。
   left：定义了定位元素左外边距边界与其包含块左边界之间的偏移。
   overflow：设置当元素的内容溢出其区域时发生的事情。
   clip：设置元素的形状。元素被剪入这个形状之中，然后显示出来。
   vertical-align：设置元素的垂直对齐方式。
   z-index：设置元素的堆叠顺序。