float
position
line-height
垂直居中和水平居中的排列
滑动门
float:让原来的元素,可以脱离正常的文档流,实现左右排列,不设置宽度最小宽度。
有4个div(块极元素)
运动轨迹
float.html
div{
height:100px;
float:left;
}
position:
relative:即使偏移,位置还在。实际就是靠近最近的元素进行偏移,不分定位。
absolute:
偏移了,位置就没了。靠最近的元素是relative/absolute定位的进行偏移。
fixed:
相对于浏览器,没有任何依赖感。ie6不支持。
随着浏览器滚动,会跟着你滚动。
line-height:行间距
normal:默认。设置合理的行间距。
number:设置数字,此数字会与当前的字体尺寸相承来设置行间距。line-height:2; = line-height:32px; = line-height:200%;
length:设置固定的行间距。如果只有一行字,比如设置height:100px; line-height:100px;即可让这行字居中。
%:基于当前字体尺寸的百分比行间距。
inherit:规定应该从父元素继承line-height属性的值。
垂直居中:
height:300px;
line-height:300px;
缺点:多行文字会挤出区域。
水平居中:
text-align:center;
将div水平居中:
margin-left:auto;
margin-right:auto;
模拟table
.outer-div{
display:table;
}
.inner-div{
display:table-cell;
vertical-align:middle;
width:10000px;
height:300px;
}
宽度不生效。跟原来的table一样width不生效。
img width=270 height=“127”
图片如何水平居中?
父元素里设置text-align:center;
div如何垂直居中?
position:absolute;
top:50%;
left:50%;
到这一步只有左上角的点垂直居中水平居中/
margin-left:-200px; //当前宽度的一半
margin-top:-200px; //当前高度的一半
position:relative;
top:-50%;
left:-50%;
html调色原理
position
line-height
垂直居中和水平居中的排列
滑动门
float:让原来的元素,可以脱离正常的文档流,实现左右排列,不设置宽度最小宽度。
有4个div(块极元素)
运动轨迹
float.html
div{
height:100px;
float:left;
}
position:
relative:即使偏移,位置还在。实际就是靠近最近的元素进行偏移,不分定位。
absolute:
偏移了,位置就没了。靠最近的元素是relative/absolute定位的进行偏移。
fixed:
相对于浏览器,没有任何依赖感。ie6不支持。
随着浏览器滚动,会跟着你滚动。
line-height:行间距
normal:默认。设置合理的行间距。
number:设置数字,此数字会与当前的字体尺寸相承来设置行间距。line-height:2; = line-height:32px; = line-height:200%;
length:设置固定的行间距。如果只有一行字,比如设置height:100px; line-height:100px;即可让这行字居中。
%:基于当前字体尺寸的百分比行间距。
inherit:规定应该从父元素继承line-height属性的值。
垂直居中:
height:300px;
line-height:300px;
缺点:多行文字会挤出区域。
水平居中:
text-align:center;
将div水平居中:
margin-left:auto;
margin-right:auto;
模拟table
.outer-div{
display:table;
}
.inner-div{
display:table-cell;
vertical-align:middle;
width:10000px;
height:300px;
}
宽度不生效。跟原来的table一样width不生效。
img width=270 height=“127”
图片如何水平居中?
父元素里设置text-align:center;
div如何垂直居中?
position:absolute;
top:50%;
left:50%;
到这一步只有左上角的点垂直居中水平居中/
margin-left:-200px; //当前宽度的一半
margin-top:-200px; //当前高度的一半
position:relative;
top:-50%;
left:-50%;
html调色原理