1、position.
1)position:relative; 相对定位. 以自己所在位置为参考点.
自己所在位置为 top:0; left:0;
设置position:relative;后,元素位置不变,而且会占据自己所在位置.
通过设置left, top,(这两个很常用) right,bottom,来改变元素所在的位置,
此时该元素属于浮动状态,但自己最初的位置不会被其他元素占用,自己也不会占据其它元素位置.
2)position:absolute; 绝对定位. 以body左上角为参考点.
body左上角位置为 top:0; left:0;
设置position:absolute;后,元素不占据位置,会浮动起来,原来位置会被其他元素占据.
可通过设置left, top,(这两个很常用) right,bottom,来改变元素所在的位置,
对两个元素都设置position:absolute;时,可能会出现两个元素覆盖的现象,
此时可以通过设置z-index:数值; 对它进行调节,数值大的会显现在上面.
3)position:fixed; 一种定位: 以body左上角为参考点.
body左上角位置为 top:0; left:0;
设置position:fixed;后,此元素会定在页面所在的位置,不会随着页面的刷新而改变.
而且此元素会浮动起来,不会占据任何位置,自己本身位置还会被其它元素占据.
可通过设置left, top,(这两个很常用) right,bottom,来改变元素所在的位置.
4)position:relative; position:absolute; 联用:
当元素设置 position:relative; 不设置其它改变值时,就表示此时元素是在给它的子级元素设置参考点,
它的子级元素设置position:absolute;此时参考点便是父级元素所在的位置,
而且子级元素会随着父级元素的改变而改变.
2、margin. padding.
1)margin. 元素与父级元素间的边距关系.
margin-left:10px; 左边距,margin-top:20px; 上边距,margin-right:30px; 右边距,margin-bottom:40px; 下边距
margin:10px 20px 30px 40px; 表示的顺序是 上 10px,右20px, 下 30px,左40px.
margin:10px 20px; 表示的是上 下是10px,左 右是20px,
margin:数值 auto: 可以使元素左右居中.
margin 有时设置单个值时会出现无反应的情况,此时可以尝试同时设置4个值.
2)padding. 元素与子级元素间的边距关系.
padding-left:10px; 左边距,padding-top:20px; 上边距,padding-right:30px; 右边距,padding-bottom:40px; 下边距
padding:10px 20px 30px 40px; 表示的顺序是 上 10px,右20px, 下 30px,左40px.
padding:10px 20px; 表示的是上 下是10px,左 右是20px,
padding 有时设置单个值时会出现无反应的情况,此时可以尝试同时设置4个值.
3)margin. padding. 区别:
3、float
当元素设置float时,此时元素会浮动起来,不会占据位置.
float:left; 左浮动, float:right; 右浮动,
两个元素只有同时设置float时,这两个元素才会排列在一排上,
若只有第一个元素设置float,则第二个元素会在第一个元素下面的位置,
若只有第二个元素设置float,则第一个元素不浮动,不会并列在一排,
当有多个元素时,会使下面的元素出现浮动的现象,此时便需要清除浮动,
clear:left; 清除左浮动, clear:right; 清除右浮动,
clear:both; 清除所有浮动 最常用
4、box-sizing.
在规划页面时,常会因为边框要计算宽度和高度.
box-sizing:border-box; 这样设置可以使边框不计入长度与宽度的计算,
以便我们更好的进行页面的规划 .
注释:1、2、3为css中布局的知识,4是css3中布局的知识.
top,left,right,bottom 设置值时,值为0时 后面不需要写px,值为其它值时,必须要写上px才有效.