Front-end HTML&CSS study notes 8 (based on Shang Silicon Valley teaching video)

Seventy-one episodes (fixed positioning)

1.元素开启固定定位后：（大部分和绝对定位相同，属于绝对定位的一种）
	*不设置偏移量时，元素不会发生任何变化
	*开启固定定位会使元素脱离文档流
	*固定定位会使元素提升一个层级（比如说碰到覆盖情况的时候，会是该元素覆盖别的元素）
	*固定定位会改变元素的性质，内联变块元素，块元素宽度和高度默认被内容撑开
	*不同点：
	固定定位永远是相对于浏览器窗口进行定位
	固定定位的元素会固定在页面的某个位置，不会随滚动条滚动（例如网页中的小广告等）

2.IE6不支持固定定位

Episode seventy-two (levels of elements)

1.如果定位元素的层级是一样的，当产生覆盖时，是（结构上）下面的元素覆盖上面的元素
2.可以通过z-index来设置元素的层级，正整数值越高，表明层级越高，例如：
	.box1{
		position:absolute;
		z-index:9999;
	}
3.对于没有开启定位的元素不能使用z-index设置层级
4.父元素的层级再高也不会盖住子元素（可以理解为水涨船高）

Episode seventy-three (opacity/element transparent background)

1.通过opacity设置元素透明效果，值为0-1，逐渐变成完全不透明，例如：
	.box1{
		opacity:0.5;		//半透明
	}
	
2.IE8及以下不支持，需要使用如下属性代替：
alpha(opacity=透明度)；
透明度为0-100（类似于0-1），例如：
	.box1{
		alpha(opacity=50);
	}

Episode seventy-four (Background 1)

1.利用background-image: url(相对路径);来设置背景图片，例如：
	.box1{
		background-image: url(img/1.png);
	}
2.当背景图片大于元素的时候，默认显示图片左上角
当背景图片等于元素的时候，默认全图
当背景图片小于元素的时候，默认将图片平铺（即充满）

3.可以同时设置背景颜色和图片，背景颜色为底色

4.background-repeat: ;用于设置图片重复方式，
可选值：
	*repeat，默认值，图片会双向复制
	*no-repeat，不重复
	*repeat-x/repeat-y，水平/垂直方向重复

Episode seventy-five (Exercise 1)

1.例如做导航条时，可用使用背景图片平铺来达到一定效果：
先利用ps截取其中一小块，然后设置为背景图片，然后平铺

Navigation bar
Episode seventy-six (Background 2)

1.通过background-position: ;来设置背景图片在元素中开始的位置
可选值：
	上下左右中进行组合，例如：background-position: left top;
	如果只指定一个位置，则第二个默认为center

2.也可以直接指定水平，垂直两个偏移量，默认以左上角为起点，例如
	background-position:100px 100px;（也可以指定负值）

3.通过background-attachment: ;来设置背景图片是否随页面滚动
可选值：
	scoll：默认值，随页面滚动
	fixed：不随页面滚动，类似于固定定位
例如：
background-attachment: fixed;

注：可以利用此特点来设置博客等页面的背景图片，效果为拖动滚动条，内容变化，但背景不变

4.一般只给body设置背景图片，不给div设置，因为可能发生下面这种情况：
给div设置一个背景图片，并且设置background-attachment: fixed;
然后在拖动页面滚动条的时候，背景图片不动，div会动，但是当div逐步消失时，
背景图片也会跟着消失，因为背景图片是div的背景图（会造成一种背景图被擦除的效果）

Before erasing

Erasing
Episode seventy-seven (button practice)

1.利用背景图片（按钮）和超链接来设置页面按钮，使用伪类分别设置不同状态时按钮的效果

初始方案：为超链接的每种伪类设置一张不同按钮效果的背景图
	但是图片是以外部资源读入页面的，且加载不同图片不是同时触发的，
	触发时浏览器每次都需要发送请求，特别当刷新时，效果不好

优化方案：将不同效果的按钮图整合成一张图片，（解决图片不同时加载问题）
	然后在不同点击效果时使背景图偏移 background-position 到对应的效果图（解决发送请求中间产生空白闪烁的问题）

这种技术叫做图片整合技术（CSS-Sprite）,雪碧图
优点：
	*只用发送一次请求
	*减小图片大小（颜色表省下来的空间）

Seventy-eight episodes (abbreviated attribute)

1.通过background同时设置之前提到的背景相关的所有样式
	*没有顺序要求，也没有数量要求
例如：background:url(img/1.png) lightblue no-repeat;

Episode seventy-nine (production and use of sprite images)

1.利用ps将所需图片整合到一起
	*先将其中一张图的画布调整到适当大小，足以容纳所有图片
	*然后将其他图片拖到该画布中，保存为web所用格式

Eighty episodes (table introduction)

1.使用<table></table>创建表格，里面用<tr></tr>表示一行，再里面使用<td></td>创建一个单元格，例如：
   <table border="1" width="50%" align="center">
    <tr>
     <td>Data</td>
     <td>Data</td>
     <td>Data</td>
    </tr>
   </table>

2.合并单元格：
	*rowspan属性，纵向合并，例如 <td rowspan="2">Data</td>  //纵向合并两格
	*colspan属性，横向合并，例如 <td colspan="2">Data</td>  //横向合并两格

Front-end HTML&CSS study notes 8 (based on Shang Silicon Valley teaching video)

Guess you like