CSS学习笔记02

 布局

一般导航条字体为12px，文字显示字体为14px；

如果网站插入图片为固定不变的，我们选用div的background属性，如果为动态图片，我们就需要用img；img的显示每次都需要请求，而div的background属性会保存在缓存中减少doget次数。

 

文本居中方式（主容器div对于body的居中）：孔浩视频html+css+javascript 13

仅IE可以生效：

body{

   text-align:center;

}

仅非IE浏览器可以生效：

#continer{

     margin:auto;

}

也可以两个都写，然后就可以搞好兼容，但不推荐

为了统一于兼容性，文本居中应该以后都写成下面那样（推荐）：

#continer{

   width:1100px;     

   position:absolute;/*主要跟body绝对定位*/

   left：50%;

   margin-left:-550px;/*刚好为width的一半*/

}

/*将两端的float清除，否则对于IE以外的浏览器而言，设置了float清除，否则对于IE以外的浏览器而言，设置了float的元素会不在占用空间，下面的元素会飘上去，此时解决办法为,在需要添加的标签中添加以下属性*/

clear：both;

 

 

4.1、盒子模型(box model)

*{

}

*号表示所有的标签；

margin-border-padding-text

padding:10px,11px,12px,13px;

设置4个值表示从top位置顺时针转：top：10，right：11，bottom：12，left：13

4.2、span和a相类似的文本标签

在html，有一些标签仅仅只是用来设置文本，诸如:a和span对于这两个标签而言，在W3C的标准中默认是不能进行width等样式进行修饰的，所以直接为这些标签设置width是没有作用的，需要通过display:block之后才有作用。但是对于IE而言就是有作用，如果设置span中需要设置width，你就是失败，因为span没有必要使用width属性。span为行内元素，作为行内元素添加display：block后会变成块级元素，所有块级元素都会自动换行。

4.3、padding的兼容性

对于padding而言，如果一个标签设置了height或者width,此时再进行padding的设置，对于IE而言，padding的值不会加到height或者width中（如果：一个div的高度为40,而padding-top:20;此时这个div的高度依然是40）；对于IE之外的所有浏览器，padding的值会加到height或者width中(如果：一个div的高度为40,padding-top为20，此时div的高度是60)。所以千万不要使用padding来进行对齐操作

4.4、定位

一：绝对定位

position: absolute;绝对定位：绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。

绝对定位与文档流无关，所以它们可以覆盖页面上其他的元素，可以通过z-index属性来控制这些层的对方顺序。

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

 

 
 
二：相对定位

position: relative;相对定位：相对定位是相对于元素在文档中的初始位置；

注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

注意：position:absolute，float会隐式地改变display的类型（display：none除外）。即是当元素设置position:absolute、float:left、float:right中任意一个时，都会让元素以display:inline-block的方式显示（特点是：可以设置长宽，默认宽度不占满父元素）。这时，即使故意设置display:inline; display:block都是无效的。

但是float在IE6下的双边距bug就是用display:inline; 来解决的。
position:relative不会隐式改变display的类型。

4.5、float

当设置了float:left之后，里面的元素会自动向左面排列对齐（此时对于一些用来做列表导航操作的需求很有帮助），特别注意：如果外层标签的宽度不能满足进行float的标签的宽度，会自动换行，当设置了float:left之后，对于IE而言，该标签依然占用空间，但是对于其他浏览器而言，就不占用空间。