css的几个问题

最新推荐文章于 2022-01-06 14:12:31 发布

奥特打小怪

最新推荐文章于 2022-01-06 14:12:31 发布

阅读量522

点赞数

本文链接：https://blog.csdn.net/qq_25107499/article/details/51167473

版权

Import优先级比内联高：

选择符：class和id

Class可以继承，伪类可以继承。优先级是就近原则

!important>[ id>class>tag]

标签title和alt属性的区别是什么？

Alt是图片不显示的时候用文字代替表示。 Title是为改属性提供信息。

几种ie BUG的解决办法?

1. 双边距BUG float引起的使用display
2.3像素问题使用float引起的使用dislpay:inline-3px
3.超链接hover 点击后失效使用正确的书写顺序 link visited hover active
4.Ie z-index问题给父级添加position:relative
5.Png 透明使用js代码改
6.Min-height 最小高度！Important解决’
7.select 在ie6下遮盖使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

描述css reset的作用和用途？

Css reset的作用是让各个浏览器的css样式有一个统一的基准，这个基准更多的就是清零，如下面的极不推荐的代码。

*{ margin:0; padding:0; }

兼容性是cssreset 诞生的主要的原因之一，还有一个方面是类似与库的作用。

Css reset的滥用是一个问题

Css reset的不足， css reset平白无故的增加了css文件的大小。许多的css的样式被覆盖和重写，多此一举。

解释css sprites，如何使用?

Css精灵，其实就是将多个图融合到一个图片中去，然后通过css的一些技术布局到页面中。这样做的好处是显而易见的，因为如果图片多的话，会增加http的请求，无疑促使了网站性能的减低，特别是图片特别多的网站，如果能用css sprites降低图片的数量，带来是就是速度的提升。

浏览器的标准模式和怪异模式?

想要写出跨浏览器的css，首先要知道浏览器解析css的两种模式，一种是标准模式，一种是怪医模式。

所谓的标准模式就是，浏览器按照w3c标准去解析执行代码，怪异模式是使用浏览器自己的方式解析执行代码。因为不同的浏览器的解析执行的方式不一样，所有叫做怪异模式。这个是直接和DTD相关的。

标准模式和怪异模式有什么的不同呢？标准模式中ie6不认识!importan声明。Ie7以上和火狐和谷歌认识，但是在怪异模式中，ie7，ie8都不认识!impotant这个只是区别的一种，还有很多的其他区别，所有，要想要写出跨浏览器的css，最好采用标准模式。建议使用xhtml1.0严格模式。如果接收一个遗留的网页，起初并没有dtd声明，建议使用xhtml兼容模式。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

标准模式和怪异模式下面的的盒子模型是有区别的，在标准模式中间，盒子的宽高是不加上padding和border的，但是在怪异模式，如ie中间，盒子的模型宽高是要加上padding和border的。

接下来是对于window.top.document.compatMode的使用。

有时我对于兼容性的处理的时候，有必要知道当前的浏览器的文本渲染方式。Document.compatMode有两种返回值，BackCompat（标准兼容模式关闭）和CssCompat（标准兼容模式开启），实际的项目中我们还需要知道浏览器是否是ie，这样就得到浏览器的ie的渲染模式了。

清除浮动的几种方式?

1. 使用空标签清除浮动，可以用div和p，不好之处是增加了无意义的结构元素。大多数情况下还是div比好合适

<!–

*{margin:0;padding:0;}

body{font:36pxbold; color:#F00; text-align:center;}

#layout{background:#FF9;}

#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}

#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}

.clear{clear:both;}

–>

</style>

<divid=”layout”>

<divid=”left”>Left</div>

<divid=”right”>Right</div>

<divclass=”clear”>

</div>

2. 使用overflow清除浮动，这个方法解决了空标签清除浮动不得不增加无意代码的弊端，需要在元素中定义css：overflow：auto，也可以使用overflow:hidden, zoom:1用于兼容ie6

<styletype=”text/css”>

<!–

*{margin:0;padding:0;}

body{font:36pxbold; color:#F00; text-align:center;}

#layout{background:#FF9;overflow:auto;zoom:1;} /* overflow:auto可以换成overflow:hidden，zoom:1可以换成width:100%*/

#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}

#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}

–>

</style>

<divid=”layout”>

<divid=”left”>Left</div>

<divid=”right”>Right</div>

</div>

3. 使用after和zoom伪类元素来清除浮动，该方法只适用于非ie浏览器。需要注意的是：1.需要在该方法中为需要清除浮动的元素的伪类对象中设置height：0 2.content是必须的，可以为空也可以设置为 “.”

type=”text/css”>

<!–

*{margin:0;padding:0;}

body{font:36pxbold; color:#F00; text-align:center;}

#layout{background:#FF9;}

#layout:after{display:block;clear:both;content:”";visibility:hidden;height:0;}

#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}

#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}

–>

</style>

<divid=”layout”>

<divid=”left”>Left</div>

<divid=”right”>Right</div>

</div>

4. 第四种方法是浮动外部元素，float-in-float，就是将外部的元素也进行浮动，这里带来的一个问题是外部元素的下一个元素会受到这个元素的影响，所以使用的时候一定要注意。

5. 解决浮动的另一个方式是将父级div定义为table，貌似bootstrap的栅格系统就是这么解决的，找个时间看看源码。

奥特打小怪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css的几个问题

Import优先级比内联高：选择符：class和idClass可以继承，伪类可以继承。优先级是就近原则!important>[ id>class>tag] 标签title和alt属性的区别是什么？Alt是图片不显示的时候用文字代替表示。 Title是为改属性提供信息。几种ie BUG的解决办法?1. 双边距BUG float引起的使用display
复制链接

扫一扫