HTML+CSS高级

第一章

一、内联块 display: inline-block;

1、特征：

1.1 块级元素在一行显示（得到内联元素的属性）

1.2 内联元素支持宽高（得到块的属性）

1.3 没有宽度的时候，内容撑开宽度（得到内联元素的属性）

1.4 标签之间的换行间隙被解析（问题）（得到内联元素的属性）

1.5 ie6 ie7 不支持块级元素的 inline-block（问题）

二、浮动

1、float: [ left | right | inherit ];

1.1 浮动特征：具有且不仅仅有内联块 inline-block 的特征

1.1.1 块级元素在一行显示

1.1.2 内联元素支持宽高

1.1.3 默认内容撑开宽度

1.1.4 脱离文档流

1.1.5 提升层级半层

2、clear: [ left | right | both | inherit ]; //元素某一方向不能有浮动元素

3、浮动相关问题：

3.1 两个div，给其中一个div设置左浮动，为什么第二个div会被第一个div覆盖？

3.1.1 原因：两个都是div，如果不浮动则占据一行竖着排列，给第一个div设置左浮动，则该div脱离文档流并且不占位置且层级高，此时第二个div会被第一个div覆盖住

3.1.2 一定要两个div并排显示，并不被覆盖，解决办法，a. 两个div都设置左浮动. b. 第二个div用margin-left设置，让其在视觉上不被遮挡

3.2 当浮动元素相邻的下一个块级元素包含文本内容时，浮动元素没有覆盖文本，而是浮动在文本的左边

3.2.1 浮动生来其实是为了文字环绕效果： CSS的 float 属性可以使一个元素脱离正常的文档流，然后被安放到它所在容器的的左端或者右端，并且其他的文本和行内元素环绕它。

3.2.1.1 原因：浮动元素不占据文档流，但是占据行框，文字就是行框出现的代表，所以。。。

三、清除浮动

1、清除浮动的原因：

1.1 子元素有浮动时，父级元素将保不住子元素（脱离文档流且提升层级半层），此时父级元素高度不能被撑开，影响布局

2、解决浮动造成的布局问题：

2.1 加高。 给父级元素加上高度，让其在视觉效果上呈现正常 --》扩展性不好，假如项目高度不固定（如瀑布流布局），此时没法由子元素内容确定父元素高度

2.2 给父级加浮动。 --》将导致问题更加严重！页面中可能所有元素都要加上浮动，margin左右自动失效

2.3 给父级加上 display: inline-block --》将导致margin失效

2.4 给父级加上空标签子级，并设置子级清除左右浮动 --》不符合W3C标准，不符合内容、行为、样式三者分离的标准；标签浪费（多余的元素）； ie6最小高度19px；解决后ie6下还有2px偏差

<div class="clearfix"></div>
============================
.clearfix{
     clear:both;
}

2.5 br清除浮动，因为br有个属性叫clear，所以同2.4空标签，使用br标签 --》不符合W3C标准，不符合内容、行为、样式三者分离的标准；标签浪费

<br clear="all" />

2.6 after伪类清浮动方法（现在主流方法），给父级添加清浮动的伪类after，且after中content为空

2.6.1 after 伪类（类似于hover伪类）

</div>

==================================

.item{

width: 100px;

height: 100px;

float: left;

}

.clearfix{

*zoom: 1;

}

.clearfix:after{

content: ""; //content: "这是由after伪类生成的内容; //此时div中的内容包含“这是由after伪类生成的内容 ”

display: block;

clear: both;

}

2.7 给父级加上 overflow: hidden; 清除浮动 --》右下角等需要的元素将不可见（比如分享到、回到顶部等按钮）

2.7.1 overfloat: [ hidden | scroll | visible];

四、浏览器，只要触发了BFC或者hasLayout，那么该区域就是一个独立的区域，不受外界影响

1、BFC（block formatting context） "块级格式化上下文"。

1.1 它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

解释：每个HTML元素默认情况会根据自己的特性（block、inline、inline-block）进行布局显示（例如block元素会从上到下独占一行的特性进行布局；内联元素从左至右显示）。此BFC是专门说明block元素的上下文布局方式？？？

1.2 只在标准浏览器（除ie8及以下版本的ie浏览器外）中会出现的特性

1.3 触发BFC的方法

1.3.1 float值不为none

1.3.2 overflow不为visible

1.3.3 display: [ table-cell | table-caption | inline-block ];

1.3.4 position 不为 relative 和 static

1.3.5 width[ height ] | min-width[ min-height ]: (!auto)

2、haslayout

2.1 ie浏览器特有

2.2 触发方法

2.2.1 zoom: (!normal)

2.2.2 -ms-writing-mode: tb-rl;

2.2.3 writing-mode: td-rl;

第二章

一、定位

1、定位分类

1.1 relative 相对定位

1.1.1 不影响本身特性

1.1.2 不脱离文档流

1.1.3 如果没有定位偏移量，对元素本身没有任何影响

1.1.4 提升层级

1.2 absolute 绝对定位

1.2.1 使元素完全脱离文档流

1.2.2 使内嵌支持宽高-----absolute有 display:inline-block; 的效果

1.2.3 块属性标签内容撑开宽度 display:inline-block; 的效果

注：绝对定位子级的浮动可以不用清浮动方法即clearfix

1.2.4 偏移量是相对于定位父级的，如果没有定位父级，则相对于document

1.2.5 绝对定位一般是配合相对定位使用

1.2.6 提升层级，假设都是定位元素，则后面的元素覆盖前面的元素（后面的层级高）

1.3 fixed 固定定位

1.3.1 使元素完全脱离文档流

1.3.2 使内嵌支持宽高-----absolute有 display:inline-block; 的效果

1.3.3 块属性标签内容撑开宽度 display:inline-block; 的效果

注：固定定位子级的浮动可以不用清浮动方法即clearfix

1.3.4 偏移量是相对于document <与绝对定位的区别>

1.3.5 IE6不支持，解决兼容性--》js或者绝对定位模拟

1.4 其他

1.4.1 static，默认值

1.4.2 inherit，从父级继承定位属性值不兼容！

2、定位层级 z-index （无单位）

2.1 定位元素默认后者层级高于前者

2.2 建议在兄弟标签之间比较层级

二、透明度 opacity: [ 0-1 ]; 0全透明，1不透明，兼容性问题

1、使用

div{
     opacity: [ 0-1 ];
     filter: alpha(opacity=0~100);     //IE6/7下 
}

2、特性

2.1 继承性。父级添加透明度，子级也会继承

第三章

一、表格

1、表格标签

1.1 table

1.2 thead

1.3 tbody

1.4 tfooter

1.5 tr

1.6 th 表头的单元格

1.7 td 表格的单元格

2、表格样式

2.1 border: 1px solid red;

2.2 border-collapse: [ collapse | separate | inherit ]; //合并表格边框，单边框（table上写样式）

3、单元格合并

3.1 colspan: num; 合并列

3.2 rowspan: num; 合并行

二、表单

1、表单元素：

1.1 input

1.1.1 类型type：<input type="text" name="username" value="请输入姓名" />

1.1.1.1 password

1.1.1.2 radio name必须相同，具有分组的效果，告诉后端这个name是同一组，不同值value

1.1.1.3 checkbox name必须相同，表示同一组

1.1.1.4 submit 不需要设置name，不用提交，value是显示的值，默认值“按钮”

1.1.1.5 reset 不需要设置name，不用提交，value是显示的值，默认值“重置”

1.1.1.6 button 需要设置value，没有默认值 //自定义按钮

1.1.1.7 image 同button

1.1.1.8 file 上传图片

1.1.1.9 hidden 用于向后端传值，但是前端不需显示

1.2 label

1.2.1 <label for="inputID">这是标签</label> //for 点击标签触发焦点在input框中

1.2.2 <label> <input type="text" /> </label>

1.3 select/option 下拉选择对高度的不兼容。

1.3.1 没有option，则value无法赋值

1.4 textarea 文本域

2、属性：

2.1 checked="checked" //默认选中

2.2 disabled="disabled" //不可编辑，后端将获取不到该值

第四章

一、兼容性问题

1、IE6、IE7的兼容（XP系统）

1.1 H5标签兼容，H5标签在IE6、IE7下都不能兼容

1.1.1 解决办法1：用js动态创建标签+display: block; （原因：动态创建的自定义标签默认行内）

document.createElement('header');     //css 加上display: block;

1.1.2 解决办法2：引用 html5shiv.min.js 文件，让该js文件处理标签

<script src="html5shiv.min.js"></script>     //引用即可

1.2 元素浮动兼容性

1.2.1 父元素加浮动，但表现的需要是子元素，此时父元素浮动不生效。

解决办法：给需要浮动显示的子元素加上浮动

1.2.2 两个兄弟元素，需要并排无间隙显示：第一个 float:left;。第二个 margin-left: 100px; (第一个box的width)。此时IE6下两元素间出现缝隙

解决办法：不建议该写法，因为浮动层级提升。解决方法让两个兄弟节点均 float:left; ，不用margin-left

1.3 IE6下子元素宽高 > 父级元素宽高，子元素会撑开父级元素

解决办法：不建议让子元素宽高 > 父级元素宽高

1.4 p包含块级元素标签。此时IE6浏览器渲染会出现：自动生成div的兄弟节点P，且p标签不再包含div，布局乱套了

<p>
     <div></div>
</p>

1.5 总结用于不能包含块级元素的特殊块级元素的标签：p、h1~h6、td。正常情况：内联元素不能包含块级元素

1.6 margin兼容性

1.6.1 margin-top 传递

解决办法1：给父级加上border，但是IE6还是不兼容

解决办法2：触发BFC 给父级加上zoom: 1;（不用border了）

1.6.2 上下margin叠加

尽量不使用

1.6.3 双边距问题，当 float: left; margin-left: 100px; 此时IE6下margin-left 是200px //右边距没有这个问题

解决办法：针对IE6、7添加 *display: inline;

IE6识别*和_， 不识别 !important
IE7识别*, 不识别_，识别 !important
而firefox两个都不识别， 识别 !important

1.7 li里子元素都浮动，各个li之间在IE6、7下方会产生4px间隙问题

解决办法：给li加上 *vertical-align: top;

1.8 文字复制问题：两个浮动元素中间，有内联元素或者注释，并且和父级元素宽度相差不超过3px-->会出现小尾巴（文字自动被复制到内联元素中）

解决办法1：两个浮动元素中间避免出现内联元素或注释

解决办法1：子元素宽度不超过父级3px

1.9 父级包不住relative的子级

解决办法：针对IE6、7给父级加上relative

1.10 IE6下绝对定位元素的父级宽度是奇数，则该子元素right和bottom有1px偏差

解决办法：避免父级宽度出现奇数

1.11 IE6下绝对定位元素和浮动元素并列时，绝对定位元素消失

解决办法：让两元素不处于同级

1.12 IE6下input空隙问题

解决方法：给input加上浮动

1.13 IE6下输入类型表单背景图片--》背景图片会跟着文字的增多移动

解决办法：设置背景fixed

1.14 IE7以及以下a标签右浮动时，错位到下一行

解决办法：css hack，利用css hack *margin-x 调试完成

2、css hack（针对不同浏览器写不同css样式的过程）

2.1 书写css hack 顺序：先写全部都支持的，然后单独处理个别浏览器

2.2 个别处理支持：

\9 IE9以及以下支持反斜杠（其它不支持）：background: blue\9;

* IE7以及以下支持：*background: green;

_ IE6以及以下支持：_background: red;

3、IE6不支持PNG24 （IE6下不支持透明）

解决办法1：引用js文件处理。但是不支持body上面的背景图片

<script src="DD_belatedPNG_0.0.8a.js"></script>     //这个插件是处理png-24图片在IE6下出现灰色背景的。
<script>
     DD_belatedPNG.fix("需要支持PNG24的css选择器");     //即可
</script>

解决办法2：原生滤镜

_background-image:none;
_filter:两句代码;     //filter只有IE浏览器能识别

二、样式优先级

默认<类型（标签）<class<id<style（行间）<!important;

第一章