css知识点

标签：style   java   color   使用   strong   os   

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; 可实现所想要得到的溢出文本显示省略号效果：

　　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的透明度和背景色

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

　　.demo{
 　　	display:inline-block;
	*display:inline;   //兼容ie6
	border-width:20px;
	border-style:solid dashed dashed dashed;
	border-color:#000 transparent transparent transparent;
	width:0;
	height:0;
　　}

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

css知识点,布布扣,bubuko.com

css知识点

标签：style   java   color   使用   strong   os   

原文地址：http://www.cnblogs.com/xiaoxiaoCS/p/3852331.html