css核心技术(笔记)

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调色原理