---------------------------day1 html简介------------------------------------------------------------------

1.web标准 结构（xhtml xml） 表现（css） 行为(dom，ECMAscript)

2.html超文本标记语言 xhtml可扩展的超文本标记语言（语法更加严谨，大小写敏感）

3.自定义列表 dl dt（title写名词）dd(data 写名词解释)

3. img标签的必须有的两个属性 src和alt

4.相对路径，../ 返回上一层 ../../返回上两层

5.表格合并 先合并行在合并列

html语法：分为单标记(没有关闭标签)和双标记，尖括号第一个是标记，空格后面是属性="属性值"

web标准 html xhtml 语法更严格

---------------------------day2 css简介------------------------------------------------------------------

1. /*css注释*/

/*css代码必须放在css样式表里面！！！*/

/*

px : 像素

*/

2. <link rel="stylesheet" type="text/css" href="css/demo2.css">

rel="stylesheet" 建立关联性

type 定义文档类型

href css外部样式表的路径

@import和link的区别：

1、本质区别：link 属于 xhtml标签 @import > css提供的方法

2、加载顺序:link:结构和样式同时加载 @import先加载结构网速慢的情况下会导致没有样式

3、link的兼容性比较好

4、使用dom控制css样式的差别。

3. 样式表的权重关系：

内联样式的权重（优先级）最高！

内部样式表和外部样式表的权重和书写顺序有关（放在后面的权重比较高）

被覆盖的只是相同的属性！

4.ID选择符 定义页面结构

5 权重

内联样式表(1000) > id(100) > class(10) 、伪类选择符（10）> 类型选择符(1)

包含选择符的权重为选择符之和

6 选择符：

类型选择 id选择符 class选择符 特殊选择符

特殊选择符: 群组选择符 包含选择符 伪类选择符 通配符

---------------------------day3 css属性------------------------------------------------------------------------------

1.css样式清除边距，取消标签默认样式:

*{margin:0;padding:0}

ul,ol,li{list-style:none;}

2.margin:0 auto;让当前元素在父元素里面左右居中 0（上下边距）auto(左右自动)

4 css文本属性

4.1 font-size 字体大小 默认16px=1em 9pt=12px

4.2 color 颜色

4.3 font-family 文本字体 "汉字字体使用双引号" "有空格的字体使用双引号"

4.4 font-weight 文字加粗 取消加粗 font-weight:noemal <b></b><strong></strong>文字加粗标签

4.5 font-style 文字倾斜样式 取消倾斜 font-style:normal <i></i><em></em>文字倾斜标签

4.6 text-align 水平对齐方式 left right

4.7line-height 文字行高

4.8 文本修饰 text-decoration 文本修饰（下划线样式） text-decoration:none 取消下划线 <u></u> <a></a>带有下划线标签

4.9 text-indent 首行缩进 可以取负值 text-indent:2em

4.10 letter-spacing 字间距 中文英文适用

4.11 word-spacing 词间距 英文适用 中文不适用

font简写：字体大小 行高 字体 font:12px/24px "宋体"

5 css列表属性

list-style:none 去掉列表符号

6 css浮动属性

float:left right

只要子元素有浮动。父元素必须设置height!!!

只要设置浮动，必须外边嵌套一个父元素

---------------------------day4 padding和margin用法------------------------------------------------------------------------------

padding的用法：

1：padding是长在盒子里面的（内容和边框之间的距离）

2：padding会把盒子撑大。

3：如果想让盒子保持原有的大小，必须在宽高的基础上减去padding的值。

4：padding是用来调整子元素（文字、图片、元素...）在父元素里面的位置关系

5:给单一某个方位添加padding值 padding-left/right/top/bottom:

6:padding值得设置方式：

四个值：上 右 下 左

三个值：上 左右 下

二个值：上下 左右

一个值：四个方向

7：padding不会对背景图造成影响！！！

margin的用法：

1：margin长在元素外面的

2：margin调整的是元素与元素之间的位置关系

3：margin-left/right/top/bottom:

4:

四个值：上 右 下 左

三个值：上 左右 下

二个值：上下 左右

一个值：四个方向

5:margin容易出现的问题

a:两个上下排列的元素之间的margin值不会叠加，会按照较大值设置

b:长在父元素里面的第一个元素如果有margin-top:会错误的添加在父元素上面

---------------------------day8 高度自适应用法------------------------------------------------------------------------------

高度自适应的两个目的：

1：内容多的时候，让内容撑开父元素高度

2：内容少或者没有内容的时候，让父元素保持最小高度

min-height IE6不支持 _height下划线属性ie6能识别，非ie6浏览器不能识别

height属性 在IE6中默认解析的就是最小高度

如果考虑IE6的情况下最小高度的设置：

1：_height:value;min-height:value;

2:min-height:value;height:auto!important;height:value;

高度塌陷问题：

/*

高度塌陷：

出现高度塌陷的场景：当子元素有浮动，并且父元素没有高度或者是设置最小的高度的时候，父元素会出现高度坍塌的BUG.

解决高度塌陷的方法：

1：给高度塌陷的元素添加overflow:hidden;

原理：overflow:hidden;触发了一个BFC

bfc布局规则：计算BFC高度的时候，浮动元素也参与计算

弊端：会隐藏一些定位到外面的元素