Web前端基础(3)CSS基础知识

浏览器兼容问题

第一,IE6,不支持小于 12px 的盒子,任何小于 12px 的盒子,在 IE6 中看都大

解决办法很简单,就是将盒子的字号,设置小(小于盒子的高),比如 0px。

 _height: 4px;
 _font-size: 0px

IE6 留了一个后门,就是只要给 css 属性之前,加上下划线,这个属性就是 IE6 认识的专有属性。

第二,IE6 不支持用 overflow : hidden; 来清除浮动的

解决办法,以毒攻毒。追加一条 zoom : 1;

overflow: hidden;
_zoom:1;

margin 相关问题

margin 塌陷现象

标准文档流中,竖直方向的 margin 不叠加,以较大的为准。

如果不在标准流,比如盒子都浮动了,那么两个盒子之间是没有塌陷现象的。

盒子居中

margin 的值可以为 auto,表示自动。当 left、right 两个方向,都是 auto 的时候,盒子左右居中。

margin-left: auto;
margin-right: auto;

简写为

margin:0 auto;
  1. 使用 margin:0 auto; 的盒子,必须有 width,有明确的 width。
  2. 只有标准流的盒子,才能使用 margin:0 auto; 居中。也就是说,当一个盒子浮动了、绝对定位了、固定定位了,都不能使用 margin:0 auto;
  3. margin:0 auto; 是在居中盒子,不是居中文本。文本的居中,要使用 text-align:center;

善于使用父亲的 padding,而不是儿子的 margin

如果父亲没有 border,那么儿子的 margin 实际上踹的是 ,踹的是这 。所以,父亲整体也掉下来了。

margin 这个属性,本质上描述的是兄弟和兄弟之间的距离; 最好不要用这个 marign 表达父子之间的距离。

margin 的 IE6 兼容问题

IE6 双倍 margin bug

当出现连续浮动的元素,携带和浮动方向相同的 margin 时,队首的元素,会双倍 marign。

解决方法:使浮动的方向和 margin 的方向,相反。

E6 的 3px bug

不要使用 margin, 使用 div 的 padding

行高和字号

文字,是在自己的行里面居中的。比如,现在文字字号 14px,行高是 24px。那么:

为了严格保证字在行里面居中,我们的工程师有一个约定: 行高、字号,一般都是偶数。这样,它们的差,就是偶数,就能够被 2 整除。

单行文本垂直居中

<style text="text/css">
	p{
        height:60px;
        line-height:60px;
        background-color:#FF923D;
        color:white;
	}
</style>

<p>单行文本垂直居中测试文本</p>

单行文本垂直居中测试文本

只适用于单行文本垂直居中!!不适用于多行。如果想让多行文本垂直居中,需要设置盒子的 padding:

font属性

使用 font 属性,能够将字号、行高、字体,能够一起设置。

font: 14px/24px “宋体”;

为了防止用户电脑里面,没有微软雅黑这个字体。就要用英语的逗号,隔开备选字体 我们要将英语字体,放在最前面,这样所有的中文,就不能匹配英语字体,就自动的变为后面的中文字体

font-family: "Times New Roman","微软雅黑","宋体";

行高可以用百分比,表示字号的百分之多少。一般来说,都是大于100%的,因为行高一定要大于字号。

font:12px/200% “宋体”

超链接的美化

伪类:同一个标签,根据用户的某种状态不同,有不同的样式。这就叫做 伪类

a标签有4种伪类:

a:link{ 		/*没有点击过*/
	color:red;  
}

a:visited{		/*曾经点击过*/
	color:orange;
}

a:hover{		/*鼠标悬停*/
	color:green;
}

a:active{		/*鼠标按下未松开*/
	color:black;
}

background系列属性

background-color

background-color: rgb(0,255,0);
background-color: #ff0000;

background-image

background-image:url(images/wuyifan.jpg);

background-repeat属性

background-repeat:repeat;    /*全部平铺*/
background-repeat:no-repeat; /*显示一张图片,不平铺*/
background-repeat:repeat-x;  /*水平平铺*/
background-repeat:repeat-y;  /*竖直平铺*/

background-position属性

<style text="text/css">
	.testdivp{
        width:200px;
        height:200px;
        border:1px solid red;
	}
	div #testdiv1{
		background-image:url(image7.png);
		background-repeat:no-repeat;
        background-position:50px 80px;
	}
	
	div #testdiv2{
       	background-image:url(image7.png);
       	background-repeat:no-repeat;
        background-position:-50px -80px;
	}
</style>

<div class="testdivp" id="testdiv1"></div>
<div class="testdivp" id="testdiv2"></div>

css 精灵

css精灵,英语 css sprite,所以也叫做 css雪碧 技术。是一种 CSS 图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用 css 的背景定位来显示需要显示的图片部分。css 精灵有什么优点,就是减少了 http 请求。比如 4 张小图片,原本需要 4 个 http 请求。但是用了 css 精灵,小图片变为了一张图,http 请求只有 1 个了。

用单词也可以描述

background-position: 描述左右的词儿  描述上下的词儿;
描述左右的词儿: left、 center、right
描述上下的词儿: top 、center、bottom

background-attachment 属性

background-attachment:fixed;

背景就会被固定住,不会被滚动条滚走。

background 综合属性

background:red url(1.jpg) no-repeat 100px 100px fixed;

等价于

background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;

相对定位

相对定位,就是微调元素位置的。让元素相对自己原来的位置,进行位置调整。

绝对定位

绝对定位比相对定位更灵活。

1. 绝对定位脱离标准流

绝对定位的盒子,是脱离标准文档流的。所以,所有的标准文档流的性质,绝对定位之后都不遵守了。绝对定位之后,标签就不区分所谓的行内元素、块级元素了,不需要 display:block; 就可以设置宽、高了。

2. 绝对定位的参考点,如果用 top 描述,那么定位参考点就是页面的左上角,而不是浏览器的左上角

3. 绝对定位以盒子为参考点

一个绝对定位的元素,如果父辈元素中出现了也定位了的元素,那么将以父辈这个元素,为参考点。

最近的已经定位的祖先元素的,不一定是父亲,可能是爷爷.

<div class="box1">   →  相对定位
	<div class="box2">  →  没有定位
		<p></p>   → 绝对定位,将以box1为参考,因为box2没有定位,box1就是最近的父辈元素
	</div>
</div>

不一定是相对定位,任何定位,都可以作为参考点

<div>  → 绝对定位
	<p></p>  → 绝对定位,将以div作为参考点。因为父亲定位了。
</div>

绝对定位的儿子,无视参考的那个盒子的 padding。

4. 绝对定位的盒子居中

绝对定位之后,所有标准流的规则,都不适用了。所以 margin: auto; 失效。

<style text="text/css">
	div #testdw1{
		position:relative;
        width:100%;
        height:80px;
        background-color:#FFCF00;
	}
	
	div #testdw2{
		background-color:#31B431;
        width: 200px;
        height: 40px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -20px;
	}
</style>

<div id="testdw1">
	<div id="testdw2"></div>
</div>

固定定位

position:fixed;

固定定位,就是相对浏览器窗口定位。页面如何滚动,这个盒子显示的位置不变。 固定定位脱标! IE6 不兼容。

z-index

只有定位的盒子里面才有 z-index:

  • z-index 值表示谁压着谁。数值大的压盖住数值小的。
  • 只有定位了的元素,才能有 z-index 值。也就是说,不管相对定位、绝对定位、固定定位,都可以使用 z-index 值。而浮动的东西不能用。
  • z-index 值没有单位,就是一个正整数。默认的 z-index 值是 0。
  • 如果大家都没有 z-index 值,或者 z-index 值一样,那么谁写在 HTML 后面,谁在上面能压住别人。定位了的元素,永远能够压住没有定位的元素。

    <style text="text/css">
    	div #testdw3{
    		position:relative;
        width:100%;
        height:200px;
        background-color:#FFCF00;
    	}
    	
    	div #testdw4{
    		background-color:#31B431;
    	    width: 100px;
    	    height: 100px;
    	    position: absolute;
    	    z-index:99;
    	    left: 400px;
    	    top: 50px;
    	}
    	
    	div #testdw5{
    		background-color:#F34836;
    	    width: 100px;
    	    height: 100px;
    	    position: absolute;
    	    left: 450px;
    	    top: 70px;
    	} 
    </style>
    
    <div id="testdw3">
    <div id="testdw4"></div>
    <div id="testdw5"></div>
    </div>