2024-10-15box-sizeing: content-box：标准盒模型的 width 和 height 属性的范围只包含了 content。box-sizeing: border-box：IE 盒模型的 width 和 height 属性的范围包含了 border、padding 和 content。三、定位与浮动根元素：body；元素设置浮动：float 除 none 以外的值；元素设置绝对定位：position (absolute、fixed)；

https://www.qianduange.cn//article/18964.html 分类：前端知识

2024-09-09BFC是一个独立渲染区域，它丝毫不会影响到外部元素BFC特性BFC内部元素是垂直排列的同一个BFC下margin会重叠计算BFC高度时会算上浮动元素BFC不会影响到外部元素BFC区域不会与float元素重叠如何创建BFCposition设为absolute或fixedfloat不为noneoverflow设置为hidden、autodisplay设置为inline-block或者inline-table或flexBFC的作用：解决margin的重叠问题。

https://www.qianduange.cn//article/17972.html 分类：前端知识

2024-09-03本文详细探讨了CSS中的浮动特性、浮动元素对标准流的影响、清除浮动的方法，以及定位（static,relative,absolute,fixed）的概念与应用。此外，还涉及元素的显示与隐藏、overflow、过渡效果（transition）、2D与3D转换，以及动画的创建和使用。

https://www.qianduange.cn//article/17557.html 分类：前端知识

2024-08-21static：不定位，默认值。relative：相对定位。absolute：绝对定位。fixed：固定定位。

https://www.qianduange.cn//article/16407.html 分类：前端知识

2024-08-10在学习了上面的 11 种垂直居中布局方法后，我们简单概括一下如果你的项目在 PC 端有兼容性要求并且宽高固定，推荐使用absolute 负 margin方法实现；如果你的项目在 PC 端有兼容性要求并且宽高不固定，推荐使用css-table方式实现；如果你的项目在 PC 端无兼容性要求，推荐使用flex实现居中，当然不考虑 IE 的话，grid也是个不错的选择；如果你的项目在移动端使用，那么推荐你使用flexgrid也可作为备选。_垂直居中代码

https://www.qianduange.cn//article/15122.html 分类：前端知识

2024-08-04这意味着它将按照在HTML代码中出现的顺序进行显示，并且不会受到其他定位属性（如top、right、bottom或left）的影响。绝对定位，元素的位置相对于其最近的已经定位的父元素，如果最近的父元素没有定位则相对于文档进行定位。2、可以使用top、right、bottom和left属性来定义相对于元素原始位置的偏移量。3、当使用相对定位时，元素不会对其他相对定位或绝对定位的元素产生影响。的元素是文档流的一部分，忽略其他定位属性，如top、right、bottom或left。_position:static

https://www.qianduange.cn//article/14752.html 分类：前端知识

2024-07-24这篇文章详细解释了CSS中的sticky定位方式，并讲解了它的工作原理。CSS中的sticky定位有很好的浏览器支持，但许多开发者并没有使用它。原因有两方面：一是等待浏览器支持的时间太长，导致这个特性被遗忘；二是大部分开发者并不完全理解它的工作原理。我假设你们都知道CSS定位，但让我们简要回顾一下：直到3年前，有四个CSS位置：staticrelativeabsolute和fixed。static或relative与absolute或fixed之间的主要区别在于它们在DOM流中占用的空间。_css 粘性布局 用固定的元素盖住上划的元素

https://www.qianduange.cn//article/14249.html 分类：前端知识

2024-06-22本文详细介绍了CSS中的position属性（包括relative、absolute和fixed）以及堆叠顺序、行内元素的宽高设置、居中问题（包括水平和垂直居中）等关键概念，通过实例帮助理解各种定位方式的用法和效果。

https://www.qianduange.cn//article/13336.html 分类：前端知识

2024-06-202 绝对定位：position: absolute---- 参考body标签的左上角原点位置进行定位---释放原有空间位置---脱标（脱离标准流布局）。-参考自己默认的原位置进行定位-不释放原有空间位置---没有脱标（脱离标准流布局）。----参考浏览器窗口的左上角原点位置进行定位---释放原有空间位置---脱标（脱离标准流布局）。其分为相对定位、绝对定位和固定定位。所以在html中普遍使用方式为子绝父相，即子元素绝对定位，父元素相对定位。3 父相子绝----父元素为相对定位，子元素为绝对定位。_h5位置定位

https://www.qianduange.cn//article/12950.html 分类：前端知识

2024-06-18如果问，CSS 中 position 属性的取值有几个？大部分人的回答大概是staticrelativeabsolutefixed，实际上MDN上还有一个sticky。今天我们就来给大家介绍这个容易被忽视的position属性值sticky。先来看看MDN上对于sticky的介绍：粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。粘性定位可以被认为是相对定位和固定定位的混合。什么是结合两种定位功能于一体呢？_position: sticky;

https://www.qianduange.cn//article/12594.html 分类：前端知识