HTML元素分为两种类型： 1）块级元素：换行 div、p、form、blockquote、 2）行内元素：不换行 所有的表单子元素、a、span、img、........
所有元素在浏览器中都是一个盒子。块级元素的盒子要填满整行，所以块级元素是从上到下排列。 块级元素内部，可以嵌入块级元素以及行内元素。
行内元素是在一个 行内元素元素内部，不能包含块级元素，但是可以包含行内元素。
行内元素和块级元素是可以相互变换的，通过CSS来实现。
可替换元素: 元素的表现形式由元素的属性以及内容来决定的。 <img src=""> 不可替换元素：元素的表现形式是由元素的内容来决定的。 <p>.....</p 命名法则： 1）Pascal法则：EmployeeStudent() 2）Camel法则：getElementById() 3）匈牙利法则：txtUserName/strUserName/nAge/btnExit()
CSS层叠样式表
HTML是定义一个文档的结构； CSS就是定义如何让HTML文档在不同的设备上显示。文档的表现形式。
为什么要用CSS?
如何在HTML文档中引入CSS： 1）用html元素的style属性。(JavaScript编程时，会用到) 2) 用style元素内部样式表（自己调试代码的时候会用到） 3）用link元素引入一个外部的样式表。（正规做项目的时候，都是采用外部样式表）
层叠样式表： 继承：子元素继承父元素的一些CSS样式。 层叠：
CSS基础语法
DOM(document Object model，文档对象模型）
选择器的类型： 1)基本选择器 元素选择器(又称类型选择器): ID选择器 # : <p id="p1">Hello</p> 类选择器 . : <p class="p1 p2">hello</p> 通配符选择器 * 属性选择器
2）组合选择器 相邻兄弟选择器 通用兄弟选择器 子选择器 后代选择器
3）伪类选择器
4）伪元素选择器
盒模型（Box Model）
所谓盒模型，是指元素在浏览器中都是以盒子的形式存在。 <p>Hello</p> 内容部分：Hello Padding: 内边距 Border: 边框 Margin: 外边距 宽度 height: 高度 方向：上、右、下、左，顺时针方向
W3C计算方式： 总宽度 = margin-left + margin-right + padding-left + padding-right + border-left + border-right + width 总高度 = margin-top + margin-bottom + padding-top + padding-bottm + border-top + border-bottom + height
font-family:设置字体家族 优先级：英文放在中文的前面，否则英文字为采用中文字体，这样就很不好看了。 要考虑操作系统的字体兼容性。
width/height一般只针对块级元素（除了行内元素img）。 max- min-
文档类型定义很重要，兼容性问题。
文档流 1）正常的文档流 块级元素从上到下一个一个排列 行内元素从左到右一个一个排列。 2）浮动 display: none、block、inline......... float: none、left、right 当一个元素的display属性设置为left、right，那么这个元素就成了块级元素。 一个元素的float属性为left或者right的时候，那么该元素就从正常文档流中脱离出来。 clear: 清除浮动的影响 3）定位属性 position: 静态定位:static，正常文档流。 绝对定位: absolute，完全脱离正常文档流，相对于父级容器移动。原来的位置不保留。 注意：绝对定位的起点位置是相对于它的第一个position值不为static的父元素而言。如果没有父元素满足条件，那么它就是相当于文档窗口来定位的!!!!!!! 相对定位：relative，脱离正常文档流，相对于自身以前的位置移动。原来的位置保留。 固定定位：fixed。相对于视口固定不变。原来的位置不保留。它实际上是绝对定位的一种。 示例： 典型的三行三栏布局 <div id="container"> <div id="header"></div> <div id="left"></div> <div id="content"></div> <div id="right"></div> <div id="footer"></div> </div> 1)用绝对定位布局 如果让container居中，会出什么问题？ 解决方案： container的position: relative; why? 2)header固定，下面的可以滚动 header的position设置为fixed，z-index:1
1)深入盒模型 页面每一个元素实际上都是以盒子的形式存在。 内容box：width/height Padding box: 上、右、下、左， 缩写 Border box: 1px solid black，四个方向都可以设置 Margin Box: 四个方向。auto,还可以使负值。 background-color/background-image背景只是在Padding范围内。 Margin是透明的。 盒子类型： 1）块级盒 2）行内盒 2）深入float float:none/left/right; clear: both/left/right; 浮动的规则 1）浮动的元素要从正常文档流中删除，但是它会影响其他的元素，也就是说它会影响布局。 2）浮动的非替换元素必须要指定width，否则元素的宽度会趋于0，从而导致浮动元素不能完整显示。 3)如果设置了float属性left/right，那么该元素就成为了一个块级元素。 4）浮动的元素左右外边界不能超出包含块的左右内边界。(Containing Block) 5）浮动的元素永远不会重叠 6）浮动元素不会超过容器的上Padding。 7)后浮动的元素永远不会超过先浮动元素的顶端 8）浮动元素会尽可能高的放置，但是这个高要受制于前面两条6、7。 9）浮动元素的下边界没有要求，因此当容器容纳不下浮动元素的时候，它就会向下延伸。部分的浏览器会增大容器的高度以容纳下浮动元素。而符合CSS2.1规范的浏览器，要想让容器容下浮动元素，让容器也浮动起来。 10)浮动元素向下延伸的时候，不会影响正常文本的显示，但是文本会相对于浮动元素偏移，而且部分文本背景会被浮动元素遮住。 11)如果浮动的元素设置的负边距，那么就会破坏规则4/6/7。 12）当浮动元素的宽度小于容器的宽度时，浮动元素会超出容器的左右边界。 13）浮动重叠的规则： 行内盒与浮动元素重叠时，那么行内盒的边框、背景和内容都会位于浮动元素上面。 块级元素与浮动元素重叠时，边框、背景在浮动元素之下，而内容在浮动元素之上。 14)如果对每个元素应用了clear:left，那么这个元素的左边就不能有浮动元素。 15)clear不能用于行内元素。<br /> 16)如果对某个元素应用了clear来清除浮动，那么该元素上设置的上margin就会被忽略。但是，会有一个重新计算的上margin(有可能为0)。如果我们希望这个元素和浮动元素之间有一个明确的间隔，应该在浮动元素上设置下Margin。
3）继承、层叠、权重(特殊性)
继承：特定的CSS属性向下传递到子孙元素。 让开发者更轻松，否则我们就要对所有子孙元素指定属性。 CSS文件尺寸就会大大增加，难以维护、降低下载速度。 注意：并非所有属性都支持继承。 文本相关的属性 列表相关属性 颜色相关属性 特殊的font-size继承的是计算的值。 浏览器默认的font-size(假如是16px)和EM值(假如是.85em)被用来生成计算后的值（16px * .85 em=13.6px)，此计算值被后代继承。 层叠： 不同的样式表会按照优先级层叠应用在页面元素上。 不同的样式规则会按照权重层叠应用在页面元素上。 优先级：（从低到高） 浏览器默认的样式声明 用户的普通样式声明 网站的普通样式声明 网站的!important声明 用户的!important声明 权重（特殊性） 1.style属性的内嵌样式表，权值为1000 2.ID选择器： 权值为100 3.类、伪类和属性选择器，权值为10 4.元素选择器和伪元素选择器，权值为1 其他选择器都是0，例如通用选择器等。
#nav .p1 > p > .p1 .asd .asdasdf #l1 a {} 100+10+1+10+10+10+100+1=242 .asdfas a {} 10+1=11
4）表单
5）表格
6）格式化上下文
块级格式化上下文(block Formatting Content, BFC) BFC是一个独立的布局环境，可以理解为一个箱子，箱子里面的元素的布局是不受外界影响的，也不会影响外界的元素。 触发条件： 1）float不等于none; 2) overflow不等于visible; 3)display为table-cell、table-caption、inline-block; 4)position为absolute和fixed 5)fieldset 有什么作用呢？ 1）阻止margin重叠 2) 边缘不会和浮动的盒子重叠