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 class="clearfix">
     <div class="item">
     </div>
</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;

第一章

一、内联块     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 class="clearfix">
     <div class="item">
     </div>
</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;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏流媒体

Android View measure解读

1423
来自专栏程序员的知识天地

div 等块级标签横向排列的方法总结

块级标签的默认文档流是上下排列的,再配上横向排列的方法,请过适当的嵌套,可以应对几乎所有常见的布局需求,因此,我决定总结一下 div 横向排列的方法。这也是我初...

2392
来自专栏移动开发的那些事儿

自定义实现垂直滚动的TextView

通过控制y参数可实现文字不同的垂直距离,这里的x,y并不代表默认横向坐标为0,纵向坐标为0的坐标,具体详解我觉得这篇博客解释的比较清楚,我们主要关注的是参数y的...

1552
来自专栏IT 指南者专栏

前端系列之CSS基础知识概述

1、什么是DIV (1)、div就是html一个普通标签,进行区域划分。div特性:独自占一行。独自不能实现复杂效果。必须结合css样式进行渲染。 (2)、d...

39011
来自专栏Micro_awake web

CSS position &居中(水平,垂直)

css position是个很重要的知识点: 知乎Header部分: ? 知乎Header-inner部分: ? position属性值: fixed:生成绝对...

6549
来自专栏大数据钻研

CSS基础

CSS基础 CSS基础知识 选择器(重要!!!) 继承、特殊性、层叠、重要性 CSS格式化排版 单位和值 盒模型 浮动 相对定位与绝对定位 布局初探 CSS基础...

3565
来自专栏deepcc

jQuery阻止冒泡和HTML默认操作

3965
来自专栏我分享我快乐

WEB布局代码初学者常见问题整理

1、 单词写错 ? ? 2、 用中文符号 ? ? 3、 标签未结束 ? ? 4、 引号未结束 ? ? 5、 尖括号未结束 ? ? 6、 标签属性之间...

3226
来自专栏HenCoder

HenCoder Android 自定义 View 1-5: 绘制顺序

之前的内容在这里: HenCoder Android 开发进阶 自定义 View 1-1 绘制基础 HenCoder Android 开发进阶 自定义 View...

1283
来自专栏Golang语言社区

【Go 语言社区】iframe去边框,无边框,使用大全

<iframe src=”you page’s url” width=”100″ height=”30″ frameborder=”no” border=”0″...

3847

扫码关注云+社区

领取腾讯云代金券