web前端

html+css+javascript+jquery+ajax
07
05

前端问题总结 css部分 5月20日

最近的总结

1、jquery mobile 用法


2、新闻列表，发表时间紧随再标题名称之后，如标题名称过长时多余部分隐藏，并出现省略号



3、xhtml方面在不使用border样式的情况下，画出一条1px高的横线

div.line {height:1px; overflow:hidden; background:#0000FF}


4、写出主流浏览器的css hack





5、写出设定背景的css样式属性（分别列出单一属性和综合属性）

  • background-color

  • background-position

  • background-size

  • background-repeat

  • background-origin

  • background-clip

  • background-attachment

  • background-image

background-attachment:

scroll默认值。背景图像会随着页面其余部分的滚动而移动。

fixed当页面的其余部分滚动时，背景图像不会移动。

inherit规定应该从父元素继承 background-attachment 属性的设置。

background: #00FF00 url(bgimage.gif) no-repeat fixed top;

6、简述visibility 和 display 的区别

visibility： 

  1. visibility:visible  /*元素可见，默认值*/   

  2. visibility:hidden /*元素不可见，但仍然为其保留相应的空间*/  

  3. visibility:collapse /*只对table对象起作用，能移除行或列但不会影响表格的布局。 如果这个值用在table以外的对象上则表现为hidden。*/  

  4. visibility:inherit /*继承上级元素的visibility值。*/

display： 

  1. display:none /*元素不可见，并且不为其保留相应的位置*/

  2. display:block /*表现为一个块级元素（一般情况下独占一行）*/

  3. display:inline /*表现为一个行级元素（一般情况下不独占一行）*/

看到这里，你也就大概知道了两者的区别了吧。虽然Visibility和Display属性都可以隐藏一个元素，但它们之间的不同点在于visibility：hidden在隐藏一个元素的同时仍然在页面上为该元素保留所需的空间，而display：none则表现得像把元素从页面里删除了，在页面上看不出该元素还存在着。

区别知道了，但如何运用起来呢。在页面开发中，表单元素（控件）不可见，你用visibility还是display？下面说一个通用的方法。如果你想隐藏某元素，但在页面上保留该元素的空间的话，你应该使用visibility: hidden 。如果你想在隐藏某元素的同时让其它内容填充空白的话应该使用 display: none 。


7、写出font的综合样式属性一例

语法：{font:font-style font-variant font-weight font-size font-family}

示例写法为：.apple {font: oblique small-caps bold 20px Arial; color:red;}。注意字体综合属性(font)写法顺序为：字体风格(font-style)、字体变量(font-variant)、字体浓淡(font-weight)、字体大小(font-size)、字体名称(font-family)、字体颜色(color)。

字体风格属性(font-style)，具体参数值有normal, italic, oblique，normal是缺省值，italic, oblique表示斜体。

字体变量属性(font-variant)，具体参数值有normal和small-caps，normal是缺省值，small-caps表示小的大写字体。这个参数不太经常用，只适用于将小写字母变成大写。

8、浏览器的模式有？简述区别





9、列表文字过长溢出省略...处理

通常的做法是这样的：

1.overflow:hidden;  2.text-overflow:ellipsis;  3.-o-text-overflow:ellipsis;  4.white-space:nowrap;  5.width:100%; 

其中，overflow: hidden和white-space: nowrap都是必须的否则不会显示省略号；-o-text-overflow: ellipsis针对Opera；而宽度的设定主要是针对IE6；    该方法支持Internet Explorer, Safari, Chrome 和 Opera，但FF并不支持，不过可以通过Jquery来实现类似的效果。    下载这个Jquery插件：jQuery ellipsis plugin    调用方法： $(document).ready(function() {    $('.ellipsis').ellipsis(); }


10、css引入的方式有哪些？link 和 @import 的区别是？

（1）使用LINK标签  将样式规则写在.css的样式文件中，再以<link>标签引入。 
<link rel=stylesheet type="text/css" href="example.css"> 
（2）使用@import引入 跟link方法很像，但必须放在<STYLE>...</STYLE>中 
<STYLE TYPE="text/css"> 
<!-- 
@import url(css/example.css); 
--> 
</STYLE>  
（3）使用STYLE标签 将样式规则写在
<STYLE>...</STYLE>
标签之中。 
<STYLE TYPE="text/css"> 
<!--  
body {color: #666;background: #f0f0f0;font-size: 12px;} 
td,p {color:#c00;font-size: 12px;} 
--> 
</STYLE>  

（4）使用STYLE属性 将STYLE属性直接加在个别的元件标签里，<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}  

（5）使用<span></span>标记引入样式  
<span style="font:12px/20px #000000;">cnwebshow.com</span> 
两者区别：
加载顺序的差别。当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。@import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如：  
main.css
———————- 
@import “sub1.css”; 
@import “sub2.css”;  
这样做有一个缺点，会对网站服务器产生过多的HTTP请求，以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用。

本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。

差别1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。

link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。

差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显（梦之都加载CSS的方式就是使用@import，我一边下载一边浏览梦之都网页时，就会出现上述问题）。

差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

差别4：使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

大致就这几种差别了（如果还有什么差别，大家告诉我，我再补充上去），其它的都一样，从上面的分析来看，还是使用link标签比较好。

标准网页制作加载CSS文件时，还应该选定要加载的媒体（media），比如screen，print，或者全部all等。

差别5：@import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如：

main.css
———————-
@import “sub1.css”;
@import “sub2.css”;

sub1.css
———————-
p {color:red;}

sub2.css
———————-
.myclass {color:blue}

这样更利于修改和扩展．

提示：这样做有一个缺点，会对网站服务器产生过多的HTTP请求，以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用。有兴趣的可以观察一下像新浪等网站的首页或栏目首页代码，他们总会把css或js直接写在html里，而不用外部文件。


11、css选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？

回答：ID 和 CLASS

Class 可继承

伪类A标签可以继承

列表 UL LI DL DD DT 可继承

优先级就近原则，样式定义最近者为准

载入样式以最后载入的定位为准

优先级为

!important > [ id > class > tag]  

Important 比 内联优先级高


12、css的基本语句构成是？

一个样式表一般由若干样式规则组成，每条样式规则都可以看作是一条CSS的基本语句，每条规则都包含一个选择器（例如：BODY，P等）和写在花括号里的声明，这些声明通常是由几组用分号分隔的属性和值组成。每个属性带一个值，共同描述整个选择器应该如何在浏览器中显示。一条CSS语句的结构如下：

选择器{属性1:值1;属性2:值2;……}


13、前端页面有哪三层构成，分别是什么？作用是什么？

最准确的网页设计思路是把网页分成三个层次，即：结构层、表示层、行为层。

网页的结构层（structural layer）由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”

网页的表示层（presentation layer） 由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。

网页的行为层（behaviorlayer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。


14、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？

IE内核浏览器：360，傲游，搜狗，世界之窗，腾讯TT

非IE内核浏览器：firefox opera safari chrome  

1.就是ie6双倍边距的问题，在使用了float的情况下，不管是向左还是向右都会出现双倍，最简单的解决方法就是用display:inline;加到css里面去。 

2.文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要，在高度上我们不能容忍1px 的差异。  

3. ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。  

4. 还讨论内容撑破容器问题，横向上的。如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义width。 

5. 浮动的清除，ff下不清除浮动是不行的。  

6. mirrormargin bug，当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px。padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这一种出现条件，还没系统整理。解决方案：外层元素设定border 或 设定float。 

7. 吞吃现象，限于篇幅，我就不展开了。还是ie6，上下两个div，上面的div设置背景，却发现下面没有设置背景的div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。  

8. 注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案，ie6的这个bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用“<!–[if !IE]> picRotate start <![endif]–>”方法写注释。  

9. <li/>里加 float <div/>，这是一个典型的，棘手的兼容问题，希望引起大家正视 ，给li 不同的属性 会有不同的解释效果，ff下的解释稍可理解，ie6下的解释会让你摸不着头脑，由于问题的复杂性，将另起一文专门讨论该问题。在《ul使用心得》一文里有相关成果，却没给出问题解决的过程。 

10. img下的留白。解决方案：给img设定 display:block。  

11. 失去line-height。<div style=”line-height:20px”><img />文字</div>，很遗憾，在ie6下单行文字 line-height 效果消失了。。。，原因是<img />这个inline-block元素和inline元素写在一起了。解决方案：让img 和文字都 float起来。  

12. 链接的hover状态。a:hover img{width:300px} 我们想让鼠标hover时，链接里包含的图片宽度变化，可惜在ie6下无效，ie7、ff下有效。  

13. 非链接的hover状态。div:hover{} 这样的样式ie6是不认的，在ie7、ff下才有效果。  

14. ie下overflow:hidden对其下的绝对层position:absolute或者相对层position:relative无效。解决方案：给overflow:hidden加position:relative或者position:absolute。另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。  

15. ie6下严重的bug，float元素如没定义宽度，内部如有div定义了height或zoom:1，这个div就会占满一整行，即使你给了宽度。float元素如果作为布局用或复杂的容器，都要给个宽度的。 

16. ie6下的bug，绝对定位的div下包含相对定位的div，如果给内层相对定位的div高度height具体值，内层相对层将具有100%的width值，外层绝对层将被撑大。解决方案给内层相对层float属性。 

17. ie6下的bug，<head></head>内有<base target=”_blank”/>的情况下，position:relative层下的float层内文字无法选中。  

18. 终于来了个ff的缺点。width:100%这个东西在ie里用很方便，会向上逐层搜索width值，忽视浮动层的影响，ff下搜索至浮动层结束，如此，只能给中间的所有浮动层加width:100%才行，累啊。opera这点倒学乖了跟了ie。




热度(1)

评论

热度(1)

© web前端 | Powered by LOFTER