超级会员免费看
本文介绍了CSS布局中的盒子定位，包括静态定位、相对定位、绝对定位和固定定位，以及盒子的浮动属性和浮动塌陷问题。通过代码练习展示了如何使用这些定位方式进行网页布局，并探讨了清除浮动塌陷的三种方法：添加额外元素、设置父元素overflow:hidden和使用after伪类选择器。
知识点：理解标准文档流、盒子的定位属性、盒子的浮动属性、浮动塌陷以及清除塌陷的方法。
1、盒子的定位
默认情况下，盒子的排列是根据其在文档中出现的顺序，从上到下、从左到右的顺序来进行的，这种定位方式又被成为标准文档流。由于标准文档流提供的网页布局方式缺少变化，CSS中提供了更多的方式来定位元素。例如使用浮动的方式来定位，使元素脱离标准文档流的限制，使布局有更多的选择。定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
定位的概念：广义的“定位”是指将某个元素放置于某个位置，该动作成为定位操作，可以使用CSS规则或使用表格等传统的布局方式来实现。狭义的“定位”是指CSS中的一个非常重要的属性positon，此单词的中文意思也是定位，它是CSS布局的核心。
在CSS布局中，使用position属性来实现对盒子的定位，常见的position属性值：静态定位(static)为默认属性值，相对定位(relative)， 绝对定位(absolute)， 固定定位(fixed)。
- 静态定位static：它
订阅专栏 解锁全文
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
