全部博文（247）
分类： Html/Css
2014-02-28 08:36:53
定位：
相对定位是相对于元素在文档流中的初始位置，而绝对定位是相对于最近的已定位的祖先元素，如果不存在已定位的祖先元素，那就相对于最初的包含块。align与text-align：
text-align其实严格来讲只应该应用在图文内容上的，之前之所以有人用text-align:center;来做浏览器居中(让所有对象居中)，实际上是因为有的浏览器对这个原则要求得不太严格，但并不是所有浏览器对所有元素都会这样处理。所以在开发过程中通常会用margin来实现元素的居中显示。例如这样的一段代码我想居中如果要让这个class为container的div水平居中，比较好的作法是先给它定义一个宽度，然后设置margin-left:auto; margin-right:auto; 对应的CSS代码可以是这样： .container {margin:0 auto; width:950px;} 这是在前端开发中最常用，也是最稳妥的一种方法了。
居中布局设计：
第一种方法：
定义div的宽度，然后将水平空白变设置为auto，例如：
#box{
width：960px；
margin：0 auto；
}
第二种方法：
容器设置为相对布局，将left设置为50%，对容器的左边应用一个负值的空白边，宽度等于容器宽度的一半，例如：
#box{
width：960px；
position：relative；
left：50%；
margin-left：-480px；
}
有时候需要左栏固定宽度，右栏根据浏览器窗口的大小自动适应。在css中只需要设置左栏宽度，右栏不设置任何宽度值，并且右栏不浮动。
直接使用height：100%不会显示效果的，这与浏览器的解析方式有一定关系，例如：
html，body{
margin：0px；
height：100%；
}
#left{
width：250px；
height：100%；
background-color：#6cf；
float：left；
}
对#left设置height：100%的同时，也设置了html与body的height：100%，一个对象高度是否可以使用百分比显示，取决于对象的父级对象，#left在页面中直接放置在body中，因此它的父级就是body，而浏览器默认状态下，没有给body一个高度属性，因此直接设置#left的height：100%时，不会产生任何效果，而当给body设置了100%之后，它的子级对象#left的height：100%变起到了作用，这便是浏览器解析规则引发的高度自适应问题。而给html对象设置height：100%，是使ie与firefox浏览器都能实现高度自适应。
