专栏首页web前端HTML+CSS高级

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 条评论
登录 后参与评论

相关文章

  • Vuejs --03 模板语法

    一、插值      1、文本 <span>{{msg}}</span> //mustache语法 <span v-once>{{msg}}</spa...

    用户1148399
  • JavaScript基础学习--01热身

    一、js大致思路: 1、完成静态HTML+CSS 2、过一遍整体的大致js思路 3、按照从上到下的,从有至无的顺序完成js编写(包括先写大致轮廓,再细化细节部分...

    用户1148399
  • 05移动端事件

    一、移动端三大事件          1、手指按下     ontouchstart      2、手指触摸     ontouchmove          ...

    用户1148399
  • 横向双倍外边距BUG — IE6盒模型

    HTML5学堂:2015年,IE6已经黯然退市。不过,IE6的兼容问题,个人认为还是应当有所了解的。一方面,前端这个工作,并不能够仅仅了解现在,应当有一个较好的...

    HTML5学堂
  • 清除过的浮动

    http://www.iyunlu.com/view/css-xhtml/55.html

    bear_fish
  • 浮动与清除浮动

    浮动 float半脱离文档流(对元素,脱离文档流;对内容,在文档流) 浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了...

    河湾欢儿
  • CSS中的浮动和清除浮动,梳理一下!

    从业三年,项目无数,现在回过头来,想要把一些重要的知识用白话整理出来:这个东西是什么?怎样才是最佳实践?希望对自己知识体系有梳理作用, 也希望对大家有些许帮助。...

    用户1667431
  • angularJS学习之路(十七)---自定义指令

    指令简单理解  就是   在元素上运行的函数    (这个函数有个名称,或者叫属性,比如id 等这种形式)

    wust小吴
  • CSS进阶07-浮动Floats

    (注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

    love丁酥酥
  • 清除CSS浮动

    清除浮动主要有两种方式,分别是clear清除浮动和BFC清除浮动,其他的你也不用去了解了。

    城市中的游牧民族

扫码关注云+社区

领取腾讯云代金券