妙味HTML&CSS教程

第零章

图形选框我们可以用来切图：
ps第二个栏目，蚂蚁线，选中之后，可以复制粘贴选中的内容；（要选中要复制的那个图层，然后才能复制，否则可能为空）

裁剪工具：
选中之后，按回车键，选中的内容就会被剪切下来。

吸管工具：
点击之后就可以看到颜色

手抓工具，可以拖动工作区（快捷键空格+拖动）

缩放工具（ctrl +/-）

f8查看属性信息

切图

ctrl + r 出现一个刻度（标尺）
移动，然后拖动一个线下来。但是矩形区域还是不能完全和标尺线重合。这时候点击ctrl键，就可以一像素一像素的增加了

选中了图片之后，ctrl + c => ctrl + n => 存储为web和设备所用格式
如果想删除，那么拖选，然后delete 就删除掉了








ctrl + t 然后拖动，旁边的文字就没有了 （自由变换）

矩形选框只能选最上面一层。但是剪切工具就可以全部剪切下来。
或者可以新建一个图层，ctrl + shift + e 上面的文字和背景就都到一个图层里了。这样就可以用矩形选框选择了





第一章
background: #b4b4b4 url("../images/1.png") no-repeat 1px 2px fixed;
#b4b4b4 ： 背景颜色

url("../images/1.png") ： 北京图片

no-repeat ： 不重复

1px 2px ： 距离左侧1px 距离上边距2px

fixed : 滚动屏幕的时候，背景不变

border: 10px solid red; 宽10px solid实线
solid 实线 dashed 虚线 dotted 点线 IE6不兼容
border-top:10px solid red; 上边框加颜色

padding-top:30px; 离盒子上边框30px;
复合顺序：上右下左 10px 20px 30px 40px
10px 20px (上下10px 左右20px)
内边距相当于给一个盒子加了填充厚度会影响盒子的大小。（如果不想改变盒子大小，记得要将padding的宽度从width里面减出去）

margin
1. 上下外边距会叠压
2. 父子级包含的时候子级的margin-top会传递给父级；内边距替代外边距
margin-left:auto 会把右边的所有空间给左边
如果左右都auto，就会居中了
符合属性 ： 上右下左
margin:0 auto 0 auto;

常见文本设置-8
浏览器默认文字大小是16px，1em = 16px

font-size : 12px; 只用偶数
font-family:微软雅黑, airal; 前面不行用后面的 （默认宋体，浏览器都支持）
color : red; 字体颜色（英文 rgb、十六进制色彩值）
line-height:30px; 行高（文字在行高里面 上下居中，上下距离等于行高-文字大小除以2）
text-align:center; 文本对其方式
text-indent:2em; 首行缩进
font-weight:bold; 文字着重
font-style:italic; (normal) 文字样式
text-decoration:underline; （none） 文本修饰
letter-spacing 字母间距
word-spacing 单词间距（以空格为解析单位）

基础_页面常见样式总结-9
符合属性：background border padding margin
font : font-style | font-weight | font-size/line-height | font-family
常见样式（17个）：
width height background border padding margin
font-size font-family color line-height text-align text-indent
font-weight font-style text-decoration letter-spacing word-spacing

前端开发工具：
IETester（IE6 IE7 IE8）、IE9、IE10

第二章
在head里面声明：
<base target=“_blank”/>
定义页面中所有链接打开方式

选择器
class选择器 .box{}
根据标签的类型 div {}
包含选择符 div p{} div里面的p标签
通配符 *{} 代表页面上的所有东西

选择符优先级4

li{height:40px}
ol li {background:blue;} /* 1 + 1*/
li{ background:green} /* 1 */
.list{background:red} /* 10 */
.list1 {background:yellow} /* 10 */
#box{background:pink} /* 100 */

同级样式默认后者覆盖前者

样式优先级
类型选择符（1）< class（10）< id（100）< style行间样式（1000）

a伪类

link 未访问过的
hover 鼠标悬停（鼠标划过）
active 链接激活（鼠标按下）
visited 访问过后（点击过后）

a:link{}
a:hover{}
a:active{}
a:visited{}

伪类优先级一样，后面的优先级最高

4个伪类得顺序：
link visited hover active（要按照这个顺序写）

div:hover{}

IE6不支持a以外其他任何标签得伪类；
IE6以上得浏览器支持所有标签得hover伪类；

第三章
标签默认值样式重置

body,p, h1, h2, h3, h4, h5, h6, dl, dd{margin:0;font-size:12px;}
ol, ul{list-style:none;padding:0;margin:0;}
a{text-decoration:none;}
img{border:none;}

*{margin:0;padding:0;} //存在性能问题 因为div这种得没有margin什么的

标签基本特性和转换

<a>
<img>
<span>
<strong>
<em>

内联， 内嵌，行内属性标签：
1. 默认同行可以继续跟同类型标签；
2. 内容撑开的宽度
3. 内嵌不支持宽高的
4. 左右外边距生效，上下外边距不支持， padding：也是左右生效
内嵌的换行，变成了一个空格，空格等于文字大小得一半：(代码换行被解析)
<span>
<span>

块属性标签：
1. 默认独占一行显示；
2. 没有宽度时，默认撑满一行
3. 设置宽了但是还是会占用整行
4. 支持所有css命令

<p>
<div>
<h1>
<dl>

span{display:block;} ：显示为块 立马支持宽高并独占一行
div{display:inline;} 显示为内嵌

inline-block特性和应用

图片是inline-block特性（一行内的块）可以一行显示并设置宽高 image

1. 块在一行显示
2. 行内属性标签支持宽高；
3. 没有宽度的时候内容撑开宽度

代码换行被解析：
ie6 ie7都不支持inline-block

cursor 指针样式（规定要显示光标的类型）
cursor : pointer|text|move ....
cursor:url(hand.cur),pointer (光标就变成hand图片了)

前段规范

1、所有书写均在英⽂文半⾓角状态下的⼩小写;
2、id,class必须以字母开头;
3、所有标签必须闭合;
4、html标签⽤用tab键缩进;
5、属性值必须带引号;
6、<!-- html注释 -->
7、/* css注释 */
8、ul,li/ol,li/dl,dt,dd拥有⽗父⼦子级关系的标签;
9、p,dt,h标签 ⾥里⾯面不能嵌套块属性标签;
10、a标签不能嵌套a;
11、 内联元素不能嵌套块;

第四章

回顾:inline-block 特性：
1、块在一排显示
2、内联支持宽高
3、默认内容撑开宽度
4、标签之间的换行间隙被解析（问题）
5、ie6 ie7不支持块属性标签的inline-block（问题）

float浮动：
1、块在一排显示
2、内联支持宽高
3、默认内容撑开宽度
4、脱离文档流
5、提升层级半层

元素加了浮动，会脱离文档流，按照指定的一个方向移动直到碰到父级的边界或者另外一个浮动元素停止。

box1 {float:left}
box2 {width:100px; height:100px}

box1在box2上面浮动了，但是box2的文字没有被覆盖，是被搞到外面去了。

文档流是文档中可显示对象在排列时所占用的位置

<div class=“box2”>div2</div>
box2和div2内容可以看成两层。div2（内容）被提升层级了，但只有半层

元素的内容
－－－－－－－－－
元素本身

float/文档流

float:left | right | none | inherit;

文档流是文档中可显示对象在排列时所占用的位置。

浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。

clear:left | right | both | none | inherit；元素的某个方向上不能有浮动元素
clear:both; 在左右两侧均不允许浮动元素。

clear left/right/both/none 元素的某个方向上不能有浮动元素

清浮动方法

1.加高
问题：扩展性不好

2.父级浮动
问题：页面中所有元素都加浮动，margin左右自动失效（floats bad ！）

3.inline-block 清浮动方法：
问题：margin左右自动失效；

4.空标签清浮动
在浮动元素下面加<div class="clear"></div>
.clear{ height:0px; font-size:0; clear:both;}
问题：IE6 最小高度 19px；（解决后IE6下还有2px偏差）

在IE6下高度小于19px（不是所有元素），的元素高度会被当做19px来处理。
.box{height:5px; background:red; font-size:0;} 这样之后高度19px就没有了。
但是不能解决所有问题，还会保留2px偏差。。。

5.br清浮动
<br clear="all"/>
问题：不符合工作中：结构、样式、行为，三者分离的要求。

6.after伪类 清浮动方法（现在主流方法）
.clear:after{content:'';display:block;clear:both;}
.clear{zoom:1;} 也可以触发haslayout

after伪类是在元素的末尾追加一些东西进去，后面的样式只对after里面生效
<div class="box clear">
<div class="div"></div>
</div>

after伪类： 元素内部末尾添加内容；
:after{content"添加的内容";} IE6，7下不兼容

在IE6， 7下浮动元素的父级有宽度就不用清浮动
haslayout 根据元素内容的大小，或父级元素的大小计算大小
zoom 缩放
a、触发 IE下 haslayout， 使元素根据自身内容计算宽高。（这样父级div可以包住子div的内容）
b、FF 不支持；

触发haslayout条件：
display:inline-block
height: （任意值除了auto）
float：（left或right）
width：（任意值除了auto）
zoom：（除normal外任意值）

7.overflow:hidden 清浮动方法；
问题：需要配合 宽度 或者 zoom 兼容IE6 IE7；

overflow: scroll | auto | hidden；
overflow:hidden;溢出隐藏（裁刀！）

auto：溢出后，多出来一个滚动槽
scroll：溢出不溢出都有滚动槽
hidden：超出之后就被截取掉了

给浮动元素的父级加overflow，一定要配合zoom1

第五章

在IE6，7元素浮动要并在同一行的元素都要加浮动。

问题：IE6下双边距BUG：在IE6下，块元素有浮动和横向margin，横向的margin值会被放大成两倍。
解决办法：里面的div设置为dispaly:inline;

在IE6，7下要使元素都在同一行，一定要所有都加浮动

问题：IE6，7下li几px的间隙问题：
在IE6.7下li本身没有浮动，但是内容浮动了，li下就会多几px的间隙；
解决办法：
1. 把li也加一个浮动
2. 给li加 vertical-align:top; （垂直对齐方式）一行元素都最上方对其。

例子：一排图片放在一起，但是下面还是会有几px的间隙。这个时候给图片加上vertical-align:top;间隙就没有了

问题： 在IE6下高度小于19px的元素，会当成19px来处理。
解决办法：

1. 用font-size:0; 这样这个元素最小会是2px，还是有一定的问题
2. overflow:hidden; 超过范围的都被隐藏

第六章 浮动实例

内嵌元素不支持宽高

做完了之后，再放到ps里测试下还原度

要考虑图片加载不出来的情况

浮动实例－2
p标签里面不能包含 块标签；但是内联元素转化成block就没有问题

第七章 定位

相对定位

position:relative; 相对定位
a、不影响元素本身的特性；
b、不使元素脱离文档流；
c、如果没有定位偏移量，对元素本身没有任何影响；

加完这个属性他就是相对定位的了。

定位元素位置控制
top/right/bottom/left 定位元素偏移量。

.box1{width:100px;height:100px; background:red;}
.box2{width:100px;height:100px;background:blue;
position:relative;left:100px;top:100px; 向右移动100，向下100
}
.box3{width:100px;height:100px;background:green;}

div2还是没有脱离文档流的。

绝对定位

.box1{width:300px;height:300px; background:red; position:relative;}
.box2{width:200px;height:200px;background:blue;}
.box3{width:100px;height:100px;background:green; position:absolute;right:0;bottom:0;}
/*
position:absolute; 绝对定位
a、使元素完全脱离文档流；
b、使内嵌支持宽高；
c、块属性标签内容撑开宽度；
d、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移；
e、相对定位一般都是配合绝对定位元素使用；

*/

定位元素 默认后者层级高于前者
z-index:[number]； 定位层级

第一个层级是0.1 第二个是0.2 z-index:1就高于所有了

body < html < 文档 相对于文档的定位偏移

不管如何拖动也在文档的右下角

优酷弹窗

上下居中：

.floats{position:absolute;top:0;left:0; width:100%; height:100%; background:#000;
opacity:0.5;filter:alpha(opacity=50);
}
.alert{width:400px; height:200px; background:#fff; border:2px solid yellow; position:absolute;top:50%;left:50%; margin-top:-102px; margin-left:-202px;}
/*
标准 不透明度 opacity:0~1;
IE私有 filter:alpha(opacity=0~100);

*/

ie打开发现没有全屏遮住，因为默认情况下body html是没有高度的
所以需求自己设置一个：
body, html {height:100%;}

其他定位和定位问题

.box1{width:500px;height:100px; background:red; position:absolute;right:0;bottom:0;}
.box2{width:300px;height:300px;background:blue;position:fixed;right:0;bottom:0;}
/*
position:fixed； 固定定位与绝对定位的特性基本一致，差别是始终相对整个文档进行定位；

问题：IE6不支持固定定位；

*/

<div id="box1">
<div id="box2"></div>
</div>

#box1{width:500px; height:300px; background:blue; overflow:hidden;}
#box2{width:300px; height:500px; background:yellow; position:relative;}

/*
ie6 下父级的overflow:hidden;是包不住子级的相对定位的（可以给父级也加一个相对定位）
*/

#box1{width:303px; height:303px;border:1px solid black; position:relative;}
#box2{ width:50px; height:50px; background:#7c1; position:absolute;right:-1px;bottom:-1px;}

/*
在 IE6 下定位元素的父级宽高都为奇数那么在 IE6 下定位元素的 right 和 bottom 都有1像素的偏差。
*/

清浮动

<div id="box1">
<div id="box2"></div>
</div>

#box1{border:30px solid red; position:absolute;}
#box2{ width:300px; height:300px; background:blue; float:left;}