首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >HTML+CSS高级

HTML+CSS高级

作者头像
用户1148399
发布2018-01-09 15:41:16
5.7K0
发布2018-01-09 15:41:16
举报
文章被收录于专栏:web前端web前端

第一章

一、内联块     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;

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-08-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档