div+css属性使用技巧跟详细讲解

div+css属性使用技巧跟详细讲解*

/* 禁止换行 */

.nowrap{word-break:keep-all;white-space:nowrap;}

/* 强制换行 */

.break{word-break:break-all;word-wrap:break-word}

/* line-height****的值计算 */

我们常说的单倍行距, 双倍行距等等, 主观上认为是line-height设置的值, 如果量一下实际的效果, 会发现, 两行文本的间距, 并非等于line-height的值. 浏览器计算和分配行间距的方法：

间距 = “line-height” – “font-size”;

文本上下分配大小 = 间距/2;

例如： 字号 = 12px; line-height:3;

​ 间距 = 3*12 – 12 = 24(px); 文本上下分配大小 = 24/2 = 12(px)

知识点：line-height的值, 推荐使用数字而非带有单位的值, 如, 推荐使用line-height:2; 不推荐使用 line-height:24px;" 原因在于, line-height:24px;是一个固定的值, 对于任何大小的文本, 都采用这个值来计算行间距. 若文本的字号过大, 会出现重叠的问题. 不带单位的值表示倍数. 自然避免了该问题.

/* Css***样式代码重置** */

CSS Reset****是什么？**

在HTML标签在浏览器里有默认的样式，例如 p 标签有上下边距，strong标签有字体加粗样式，em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE 下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻 烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简 单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。

为什么要重置它？

因为浏览器的品种很多，每个浏览器的默认样式也是不同的，比如button签，在IE浏览器、Firefox浏览器以及Safari浏 览器中的样式都是不同的，所以，通过重置button标签的CSS属性，然后再将它统一定义，就可以产生相同的显示效果。

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,em,p,font,img,small,strong,center,dl,dt,dd,ol,ul,li,form,label,table,caption,tbody,tr,th,td { 
margin:0;   padding:0;   border:0;   outline:0;   font-size:12px; vertical-align:baseline  }   

相对定位和绝对定位的区别

1、absolute：绝对定位如果父级没有设定相对定位，就是基于body来的定位(缩放浏览器，位置不会改变)，如果父级有相对定位属性，就是根据父级来定位,一般作漂浮层。

2、relative：相对定位一般是相对于相邻元素为基点进行定位

3、fixed: 固定定位是将元素或者背景图定在屏幕，不随滚动条滚动。

跟一般的CSS写法不同的是CSS伪类的语法有两种方式：

第一种： selector:pseudo-class {property: value}
也可以用HTML的class属性来设定伪类。 例句：a:link {color:red}

第二种： selector.class:pseudo-class {property: value}
伪类是最常用的伪类。 例句： a.c1:link {color:red}

锚(a)伪类 锚(a)伪类是最常用的伪类。 例句如下： a:link {color: #FF0000} /* 未被访问的链接 红色 /
a:visited {color: #00FF00} / 已被访问过的链接 绿色 /
a:hover {color: #FFCC00} / 鼠标悬浮在上的链接 橙色 /
a:active {color: #0000FF} / 鼠标点中激活链接 蓝色 */

也可以用HTML的class属性来设定伪类。例句如下：

a.c1:link {color: #FF0000} /* 未被访问的链接 红色 /
a.c1:visited {color: #00FF00} / 已被访问过的链接 绿色 /
a.c1:hover {color: #FFCC00} / 鼠标悬浮在上的链接 橙色 /
a.c1:active {color: #0000FF} / 鼠标点中激活链接 蓝色 */

注：由于CSS优先级的关系(后面比前面的优先级高)，在写a的CSS时，一定要按照a:link， a:visited， a:hover， a:actived的顺序书写。

**border:none;与border:0;**的区别体现有两点：一是理论上的性能差异二是浏览器兼容性的差异。

1.性能差异 【border:0;】把border设为“0”像素虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。 【border:none;】把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。

2.兼容性差异 兼容性差异只针对浏览器IE6、IE7与标签button、input而言，在win、win7、vista 的XP主题下均会出现此情况。

【border:none;】当border为“none”时似乎对IE6/7无效边框依然存在。 【border:0;】当border为“0”时，感觉比“none”更有效，所有浏览器都一致把边框隐藏。

总结： 1. 对比border:0;与border:none;之间的区别在于有渲染和没渲染，感觉他们和display:none;与visibility:hidden;的关系类似，而对于border属性的渲染性能对比暂时没找测试的方法，虽然认为他们存在渲染性能上的差异但也只能说是理论上。

\2. 如何让border:none;实现全兼容？只需要在同一选择符上添加背景属性即可。

对于border:0;与border:none;个人更向于使用,border:none;，因为border:none;毕竟在性能消耗没有争议，而且兼容性可用背景属性解决不足以成为障碍。

书写顺序和浏览器解析过程有关！浏览器先对****dom定位，然后解析自身属性，然后再解析内部对象！

1**、首先解析显示属性**

display
list-style
position
float
clear

2**、然后解析自身属性** width

height
margin
padding
border
background

3**、最后再解析文本属性** color

font
text-decoration
text-align
vertical-align
white-space
other text
content

关于选择器权重的问题 。

class的权重是10 标签权重是 1 。比如说 p span{} 权重是2. 如果11标签自选择器的组合的权重11，会不会覆盖 一个class选择器权重10的 样式？

总结出来了重要的两点： 权值的大小跟选择器的类型和数量有关 样式的优先级跟样式的定义顺序有关， 标签选择器的权值永远都比一个类选器择器的权值低，无论有多少个 但一直以来都还是没能想通。

其实规则很简单：
比较同一级别的个数，数量多的优先级高，如果相同即比较下一级别的个数 ，至于各级别的优先级，大家应该已经很清楚了。 优先级： important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符 这也就解释了为什么11个标签的定义会比不上1个类的定义，1个类加11个标签会比不上2个类的权重高。

CSS****中慎用中文注释**

在css样式表中用了中文注释，并且将/和/写在与中文同一行的话，可能导致注释下方的样式失效，ie6以下的浏览器包括ie6都可能出现这个问题,但经过测试ie7、firefox、opera等浏览器都能良好支持中文注释，具体原因暂时不确定，但发现了解决方法：

如果这样写就可能出问题：

/主内容区域地址栏部分样式/

但是改为以下两种写法之一，就不会出现这个问题：

/*主内容区域地址栏部分样式 */
或者

/*
主内容区域地址栏部分样式 */

这个BUG可能与IE对CSS中的中文处理有关，最好的解决办法就是不要用中文，免得出现其它问题。