css知识点1

1、文本显示一行

　　text-overflow:ellipsis; 
　　white-space:nowrap;
　　overflow:hidden;

　　text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实　　现溢出文本显示省略号的效果。 
　　一、仅定义text-overflow:ellipsis; 不能实现省略号效果。　　 
　　二、定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果　　 
　　三、同时应用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 可实现所想要得到的溢出文本显示省略号效果：

　　text-overflow

　　normal：默认处理方式。
　　pre：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。可查阅pre对象
　　nowrap：强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象。
　　pre-wrap：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。
　　pre-line：保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。
　　clip：当对象内文本溢出时不显示省略标记（...），而是将溢出的部分裁切掉。

　　ellipsis：当对象内文本溢出时显示省略标记（...）

2、文本多行显示

　　目前没有很好的方法，无法兼容低版本浏览器。

 <style>
.demo{
	position:relative;
	word-break:break-all; /*支持IE，chrome，FF不支持*/
	word-wrap:break-word;/*支持IE，chrome，FF*/
	width:100px;
	height:38px;
	overflow:hidden;
	background:#aaa;
}
.demo:after{
	content: "...";
	position: absolute;
	top:16px;
	right:-3px;
	background: #aaa;  //背景色与div的背景色一样
}
</style>

 <div class="demo">asdsdasdasdsdsdfffffffffffffffffffffffffff</div>

3、文本强制换行

　　word-break:break-all; /*支持IE，chrome，FF不支持*/
　　word-wrap:break-word;/*支持IE，chrome，FF*/　
　　　word-wrap：设置或检索当内容超过指定容器的边界时是否断行

　　取值

　　　normal：许内容顶开或溢出指定的容器边界。

　　　break-word：容将在边界内换行。如果需要，单词内部允许断行

　　　word-break：对于解决防止页面中出现连续无意义的长字符打破布局，应该使用break-all；

4、箭头

实心箭头
　　可以通过图片，边框，字体等实现。对于用border实现小箭头，可以设置两边border的透明度和背景色
　　.demo{
 	display:inline-block;
	*display:inline;   	//兼容ie6
	*zomm:1;		//兼容ie6
	border-width:20px;
	border-style:solid dashed dashed dashed;
	border-color:#000 transparent transparent transparent;
	width:0;
	height:0;
 	-webkit-transform: rotate(90deg);   //旋转
　　}
　　<span class="demo"></span>
空心箭头:上线
　　负 margin
　　<div> 
       <p>◆</p>   
       <p>◆</p> 
　　</div>

　　.tips p {
	overflow:hidden;
	display:block;
	color: #ccc;
	font-size:12px;
	font-family:simsun;
　　}
　　.tips .down {
	height:13px;
	color:#fff;
　　}
　　.tips .up {
	margin-bottom:-23px;
　　}

　　空心箭头：左右
　　.tips span {
   　　overflow:hidden;    
　　   color: #ccc;
   　　font-size:12px;
　　　　font-family:simsun;
　　}
　　.tips .down {
   　　height:13px;
　　   color:#fff;
}
.tips .up {
　　　　margin-right:-17px;
}
<div class="tips">
     <span class="up">◆</span>
     <span class="down">◆</span>
</div>

5、清除浮动

　　什么是清除浮动？

　　　　当元素定义浮动时，其自身将脱离包含块。其现象表现为：包含块将无法包裹住浮动子元素；

　　空标签方式：

　　　　.clearfix{clear:both;}

　　　　<div class="clearfix"></div>

　　BFC方式：　　

　　　　.clearfix{*zoom:1;overflow:hidden;} 

　　伪元素方式：

 　　　　.clearfix{*zoom:1;}

　　　　.clearfix:after{display:block;clear:both;visibility:hidden;content:"/0020";overflow:hidden;}

 　　空标签方式：多一个空白的div，代码看真很不爽；

　　BFC（Block Formatting Context）：内容会溢出

　　伪元素方法：perfect

6、属性值的拆开和缩写

　　属性：background，padding，margin，font，border

　　所有的css属性缩写规则都是：上右下左；如果3个是：上 、左右、下；如果2个是：上下、左右

　　书写拆开写的情况：只需要其中一个属性、集成覆盖其中一个属性；

　　font中属性的放置顺序是要严格遵守的，Font:font-style font-weight font-size font-familiy;（注：font-size和font-family是font的必须属性，并且font-size一定要放在font-family的前面）

7、伪类与伪元素

　　伪类

　　　　<ul>

　　　　　　<li>111</li>

　　　　　　<li>222</li>

　　　　<ul>

　　选择ul的第一个li，这个很熟悉用first-chid

　　在官方文档中伪类用classify来描述，而伪对象用create。从这里我们就能明白它们的区别：

　　伪对象则代表了某个元素的子对象，这个子对象虽然在逻辑上存在，但却并不实际存在于文档树中。
　　就像上文中的first-line，在DOM中其实并不存在。我们经常用的:before :after也属于伪对象。

　　伪类则是实际上已经存在，比如li就显示存在于DOM中，我们要选择它就是相当于在已经存在的对象上添加新类别。

　　根本区别是：它们是否创造里新的元素（抽象），如果需要添加新元素加以标识，就算伪元素，如果需要在既有的元素上添加类别，就是伪类。

　　伪类：用来表示一些元素的动态状态；

　　伪元素：代表某个元素的子元素，这个子元素虽然逻辑上存在，但不实际存在dom文档中；

　　CSS Selector Level 3 为了区分这两者的混淆，而特意用冒号加以区分：

　　　　伪类用一个冒号表示 :first-child

　　　　伪元素则使用两个冒号表示 ::first-line

　　为了兼容低版本，伪类和伪元素都用单冒号。

　　伪类：E:link，E:visited，E:hover，E:active，E:focus，E:first-child，E:last-child，E:nth-child(n)，E:nth-last-chlid

　　伪对象：E:first-letter，E:first-line，E:before，E:after，E:selection

8、inline-block

　　兼容ie6的方法：*display:line;*zoom:1

　　IE6、IE7不兼容问题，设置block元素为inline-block无效，设置inline元素为inline-block有效

8、resize

　　设置或检索对象的区域是否允许用户缩放，调节元素尺寸大小。

  • 如果希望此属性生效，需要设置对象的overflow属性，值可以是auto,hidden或scroll。

* 9、CSS Sprite

　　CSS Sprites原理

　　　　CSS Sprites是把网页中许多图标文件片整合到一张图片，利用CSS的background-image、background-repeat、background-position进行背景定位，从而在网页　　　　中显示具体需要使用的图标。

 　　CSS Sprites优点 

　　　　可以有效减少网页的http请求，从而大大提高页面的性能。

 　　CSS Sprites缺点

　　　　CSS Sprites在维护的时候比较麻烦，如果其中的一个图片需要改动，且高度与原始图片不一致，需要改动许多CSS。

 　　demo

　　　　原理

　　　　　　star引入的图片会覆盖gray-star引入的图片，通过percent可以调节gray-star被覆盖的比例。

　　　　html代码

　　　　　　<i class="gray-star"><i class="star percent"></i></i>

　　　　css代码

　　　　#gray-star和star这两个class有公共的样式代码，可以优化。 
　　　　.gray-star{
	　　display:inline-block;
 　　　　　　background:url('./img/ico.png') no-repeat scroll 0 -20px; 
　　　　　　 #其中的0和-20px，需要引入图片在ico.png的位置
　　　　　　 width:80px;
　　　　　　height:20px;
　　　　}
　　 .star{
	display:inline-block;
	background:url('./img/ico.png') no-repeat scroll 0 -40px;
	width:80px;
	height:20px;
　　}
　　.percent{
　　	width:80%;
　　}

* 10、png8和png24

　　 1.png8和png24的根本区别，不是颜色位的区别，而是存储方式不同。

  • 1、png8有1位的布尔透明通道（要么完全透明，要么完全不透明），   png24则有8位（256阶）的布尔透明通道（所谓半透明）。

    2、png-8 和 gif 有一些相似之处，模式都是索引颜色，只支持像素级的   纯透明，不支持 alpha 透明。

    3、我们通常说的“IE6 不支持 PNG 透明”，是指不支持 PNG-24 的透明。但是 IE6 支持 PNG-8 的透明，就像支持gif 的透明一样。** 2.png8有1位的布尔透明通道（要么完全透明，要么完全不透明），   png24则有8位（256阶）的布尔透明通道（所谓半透明）png-8 和 gif 有一些相似之处，模式都是索引颜色，只支持像素级的 纯透明，不支持 alpha 透明。

  • 4、我们通常说的“IE6 不支持 PNG 透明”，是指不支持 PNG-24 的透明。但是 IE6 支持 PNG-8 的透明，就像支持gif 的透明一样

* 11、CSS优先级

我们可以这样理解选择器的优先级：不同的选择器在不同的次元空间，低次元空间选择器的优先级永远不可能高于高次元空间选择器的优先级。 


好好理解继承属性的优先级

style样式和link样式的优先级：先后顺序来判断；

posted @ 2014-07-17 22:43  slogeor  阅读(164)  评论(0)  编辑  收藏  举报