本文详细介绍了CSS中的盒子模型，包括内容、边框、内边距和外边距。探讨了盒子的浮动和定位原理，如行内元素的水平定位、块级元素的垂直定位、父子嵌套关系的定位以及负外边距的应用。此外，还讨论了浮动属性float和四种定位方式position（static、relative、absolute、fixed）。同时，解释了<div>与<span>的区别，并列举了常见的<div>与CSS布局实践。
什么是盒子模型
网页用<div>分块，每个块进行CSS定位与展示。其中，网页中的每一个元素都可以看作是一个个盒子（不仅仅是<div>，所有的元素都可看作是一个广义的盒子）。每个盒子由内容，边框，内边距，外边距组成。
- 边框border：包围盒子的内容和内边距
- 内边距padding：在盒子的内容和边界之间
- 外边距margin：盒子和盒子之间的距离
三个参数均可声明设置的部分 ：top顶部、left左边、right右边、bottom底部
行内并列盒子元素
盒子的浮动和定位
页面内元素可分为两类：
- 块级元素：以块形式表现，同级的依次垂直排列且左右撑满显示器窗口【上下、垂直】
- 行内元素：相邻元素横向排列，最右端折行【左右、并排、水平】
定位原则
标准流：不使用其他定位的CSS规则时元素的默认排列规则。每个盒子形成序列，同级别的盒子在其父级盒子中按照块级元素或行内元素的方式排列，依次类推直到整个页面。
行内元素水平定位原则
两个行内元素之间的水平距离，由左边元素的右外边距margin-right和右边元素的左外边界margin-left相加决定【水平方向：两个相邻的外边距相加】
块级元素垂直定位原则
两个垂直排列的块级元素，距离由更大的外边距决定，若上面元素的底外边距margin-bottom大于下面元素的上外边距margin-top，
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
