css中定位元素总结

总结padding、margin、float、position:relative以及position:absolute

注意：圣杯布局、自适应布局、padding在宽度为100%时超出浏览器显示、margin-left为负-100%可以让元素移到上一行

padding

padding是给元素增加内边距

属性说明：

• padding-top: 会在元素上方添加像素
• padding-bottom: 会在元素下方添加像素
• padding-left: 会在元素上方添加像素
• padding-right: 会在元素下方添加像素

特点：

• padding负值无效，会自动转为0
• padding:20%: 当单位是%时，是父元素宽度乘以这个百分数
• 可以同时设置四个方向的padding，都会起作用。

容易遇到的问题：

• 因为padding会使得元素自身变大，当根元素宽度是浏览器宽度，又设置了padding，就超出了范围，容易看不出这个情况
• 想要padding加在内侧，也就是不撑大容器，设置box-sizing:border-box

应用：

• 通常设置box-sizing:border-box，和padding。使得父元素在内侧四周留白边距。

margin

当取值以%时，是以父元素为基准的百分比,margin控制两个元素之间的距离

自身移动

• margin-left： 正值（自己右移）；负值（自己左移）
• margin-top：正值（自己下移）；负值（自己上移）

相邻的元素移动

• margin-right： 正值（自己不动，相邻元素右移）；负值（自己不动，相邻元素左移）
• margin-bottom：正值（自己不动，相邻元素下移）；负值（自己不动，相邻元素上移）

应用

• 可以通过设置margin-left：-100%将一个块元素移动到上一行，圣杯布局，一个固定宽度一个自适应

叠加
相邻两个的margin = 左边元素的margin-right+ 右元素的margin-left

但是同一个BFC相邻元素margin重叠：

• 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
• 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
• 两个外边距一正一负时，折叠结果是两者的相加的和。

float

定义元素的排列方向，从左到右还是从右到左。一般left/right、 top/bottom不同时使用，同时使用只有一个有效

position:relative

相对定位，相对自身定位，不脱离文档流

• left ：正值（相对自己的左边框向右移）；负值（相对自己的左边框向左移）
• right ：正值（相对自己的右边框向左移）；负值（相对自己的右边框向右移）
• top ：正值（相对自己的上边框向下移）；负值（相对自己的上边框向上移）
• bottom：正值（相对自己的下边框向上移）；负值（相对自己的下边框向下移）

注意：一般left和right、 top和bottom不同时使用，同时使用只有一个有效

position:absolute

绝对定位，相对最近的不是static的父元素定位，脱离文档流

• left：正值（相对父元素左边框右移）；负值（相对父元素左边框左移）
• right：正值（相对父元素右边框左移）；负值（相对父元素右边框右移）
• top：正值（相对父元素上边框下移）；负值（相对父元素上边框上移）
• bottom：正值（相对父元素下边框上移）；负值（相对父元素下边框下移）
  注意：一般left和right、 top和bottom不同时使用，同时使用只有一个有效