html.css

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: 外边距 width: 宽度 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-width: min-width:

文档类型定义很重要，兼容性问题。

文档流 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) 边缘不会和浮动的盒子重叠