[前端学习]css部分学习笔记，第十天

滑动门技术的原理

• 在没学css3之前，一些圆角及特殊样式，是不能用css实现的，为了满足特殊的效果，滑动门技术就产生了。因为滑动门技术一般应用于导航栏，所以这里用导航栏举例
  <li>
<a href="#">
<span>内容</span>
</a>
</li>
• 原理解析：
  • 实际上滑动门技术是通过<a>和<span>标签来配合达到的。
  • 首先用a设置特殊背景图片默认左上角对齐，然后给a设置左内边距，距离是图片特殊样式左侧的宽度。
  • 然后用span设置特殊背景图片默认右上角对齐，然后给span设置右内边距，距离是图片特殊样式右侧的宽度。
  • 这样就相当于把特殊图片样式的左右两边都固定住了，再往span里面写入内容，它只会把中间撑开，把背景图片往右边推。这样就实现了，背景图片在特殊样式不变的情况下可以自动根据文字内来拉伸的目的。
  • 注意a和span都不能设置宽度，只能设置内边距。
  • 这个必须要实际练习才容易理解，而且这个理解能简单的实现即可，css3有属性可以替代它。

margin负值的应用

• 在很多购物网站中，你会发现多个相邻的盒子当你选中时是共用的一条边。其实这不是通过设置border实现的，而是通过margin负值来实现。
• 原理简单，给盒子设置margin-left: -1px；，就能右边盒子的左边框就能压住左边盒子的右边框，然后再通过:hover来让你你觉得是共用一条边框。
• 代码实现：
  div {
margin-left: -1px;
}
div:hover {
position:relative;
}
• 当然肯定不能让边框一直被压住，所以用定位优先级大于浮动和标准流盒子的特性，hover设置了定位后，就会显示盒子自己的边框，而不是显示边框被右边的压住。
• 还有一种情况是，如果盒子本身都设置了定位，那么就通过给hover设置z-index来提高显示层级即可。

边框实现三角形

• 首先要纠正一个误区，边框并不是一个长方形的线，而是一个三角形，为什么在实际中我们看着是一条直线呢？很简单，设置了宽度之后，三角形会被拉伸为一个很长的梯形，四个梯形的边框拼成了一组边框。当然实际工作中边框都不会太粗，所以你看着不明显。
• 那么，到这里实现三角形就很简单了
  div {
width: 0;(高和宽必须为0，才会是三角形，不然是梯形)
height: 0;
border-weight: 20px; (只有边框够粗之后才能看出形状)
border-color: red transparent transparent transparent;(哪条边框设置颜色就显示哪边的三角形)
border-style: solid dashed dashed dashed;(dashed是为了ie6兼容而设置，不然会有bug)
overflow:hidden;(这个也是为ie6设置，因为ie6不能设置0的宽高，不然会出错)
}
• 这是兼容了大多数浏览器的写法，如果不为兼容，那么dashed和overflow可以不写。
• 推荐用<i>或者<em>来做三角形。
• 如果做快进或者快退键是要注意，因为绝对定位默认是对齐父元素内容的左上角，但是如果父盒子没有设置高和宽，那么它左上角对齐的盒子中间那个点。
• 红丝带那个案例一定练习几遍，理解透彻。

制作favicon.ico图标

• 首先找到要做成图标的图片
• 然后前往www.bitbug.net网站转换为ico格式的小图标,放到网站根目录
• 最后在html文件的head标签里写入<link rel="shortcut icon" href="./favicon.ico" />即可。

网站的LOGO优化

• 第一步把logo图片设为背景图
• logo盒子里面嵌套一个h1标签来提权
• h1里再嵌套一个a标签用于点击，a标签要和背景图一样大
• a标签内加入网站名文字
• 设置text-indent:-9999px;和overflow:hidden;来隐藏掉文字。

文本属性

• 字符间距 letter-spacing:任意单位数值
  • 控制字符与字符之间的间距
• 单词间距 word-spacing:任意单位数值
  • 控制单词与单词之间的间距（不会分开一个完整的单词），对中文字符无效
• 文本换行 word-break: normal|keep-all|break-all
  • 设置文本的换行模式。normal是默认属性，就是按照浏览器默认的换行模式来。break-all允许在单词内换行，为了保证单词的完整性，浏览器不会把单词字母换行隔开，但是设置break-all就可以。keep-all正常情况不会换行，但如果有空格（半角圆角）就会换行。
• 空白符处理 white-space:normal|pre|nowrap
  • 空白符处理默认值normal，不管你打多少个空格回车，只会显示一个空格的位置。pre预处理格式，会完整的现在你打出的空白符，有多个显示多少个。nowrap(重要)，设置文本不换行，让所有文本在一行内显示，超出盒子大小也会继续显示，超出浏览器范围会自动生成滚动条，常用于标题上。
• 文字超出部分省略 text-overflow:clip|ellipsis
  • 默认值是clip，文本超出部分直接切掉，但是不会这么用。常用的文本超出部分省略方法：
    white-space: nowrap 强制文本一行显示
overflow:hidden 隐藏溢出部分的文本
text-overflow: ellipsis 将不能完整显示的部分以省略号来代替
  • 完整的三步不能少。