41.input标签存在的兼容问题?
答: 当input标签在type为text时,在Firefox和Safari中的默认高度为22像素(包括上下边框)宽度为146像素(包括左右边框),而在IE中的默认高度为24像素,而宽度却和Firefox和Safari是一致的,也是146像素。
当 input标签在type为submit时,在Firefox中的高度为23像素(包括阴影),宽度为75像素。在Safari中高度为21像素,宽度为73像素,在IE中高度为为25像素、宽度为73像素。
42.input中disabled与readonly有何区别?
答: Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,包括select, radio, checkbox, button等。
表单元素在使用了disabled后,当我们将表单以POST或GET的方式提交的话,这个元素的值不会被传递出去,而 readonly会将该值传递出去(这种情况出现在我们将某个表单中的textarea元素设置为disabled或readonly,但是submit button却是可以使用的)。
43.input属性有哪些?
43.png44.position属性值,如只写了absolute,是相对谁定的位?
答:离它最近的已经定位的父元素
45.CSS选择器中div.ps是什么意思
答: 类名是ps的div
46.使用display:inline-block在IE6中不能正常显示,如何解决?
答: 方法1:直接让块元素设置为内联对象呈递(设置属性 display:inline),然后触发块元素的 layout(如:zoom:1 等)。兼容各浏览器的代码如下: div {display:inline-block;*display:inline; zoom:1;...}
方法2:先使用 display:inline-block 属性触发块元素,然后再定义 display:inline,让块元素呈递为内联对象(两个display 要先后放在两个 CSS 样式声明中才有效果,这是 IE 的一个经典 bug ,如果先定义了 display:inline-block,然后再将 display 设回 inline 或 block,layout 不会消失)。代码如下(…为省略的其他属性内容): div {display:inline-block;...}div {display:inline;}
47.png图片有几种格式
答: png有3种不同深度的格式:png8、png24、png32
48.display的属性值有哪些?
图片2.png49.标签的隐藏(display:none和visibility:hidden)的区别
答:visibility:hidden隐藏,但在浏览时保留位置;CSS display:none视为不存在,且不加载!
50.在页面内居中(水平和垂直方向)*3
答:垂直居中:水平方向给父级设置text-align;使用左右margin值为auto
竖直方向:设置line-height值为元素高度;设置元素绝对定位,top:0;bottom:0 margin:auto, 0;
51. 如何让链接访问过后的hover消失
正常情况下: 爱恨原则: l —> v —> h — > a
为了达到上述效果,改变顺序即可: l —> h —> v —> a
52. Ie6中为什么不能设置1px高的div
答:在用DIV构建网页的时候,有时候需要的高度很小,这时候就可能会出现问题,因为,IE6下DIV有个默认的高度,大约10-12px。当你试图定义一个高度小于这个默认值的div 的时候,IE 会固执的认为这个层的高度不应该小于字体的行高。
解决办法:
第一: 定义该DIV字体大小。
例如:
<div style="height:1px;font-size:0;"></div>
第二:
直接限制自动调整
<div style="height: 1px; overflow: hidden;”></div>
53. div中内容没有撑开高度的原因,怎么解决:
父亲div没有设置高度
孩子div设置高度了,
此时,父亲的高度是靠孩子撑起来的
但是当孩子浮动了,
父亲的高度也就没了
此时需要给孩子增加一个兄弟div,并且clear:both,问题完美解决
54. 双倍边距bug
连接地址:<u>http://www.360doc.com/content/14/1224/20/21166337_435502508.shtml</u>
在产生双边距bug的元素内,增加一行属性:display:inline;
第二种办法:采用cssHack:margin-left:20px;_margin-left:20px;
55.如何让div水平排列
1:浮动
2.定位
56.定义id名和class名有什么区别
从概念上来说:
id是先找到结构/内容,再给它定义样式;class是先定义好一种样式,再套给多个结构/内容。
从样式效果上来说:
id的优先级要比class高出一个层次
html中不管有几个id,
在css获取到的就是所有的
但是在js中通过document获取到的是第一个
57.CSS有几种引入方式?link和@import有什么区别
link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
58.在IE中给div设display:inline-block;它还会占一行不会?
答:ie不支持display属性
59.如何制作渐变效果(不使用CSS3)
这里的关键点是h1 { position: relative } 和h1 span { position: absolute }
h1 {
font: bold 330%/100% "Lucida Grande";
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}
是的,就这些,你已经搞定了
60.上下两个div分别设置了margin-bottom和margin-top,两个div之间的距离是多少?
会发生融合效果,距离就是数值比较大的那个
61.除了ul、ol还用什么写列表
dl dt dd
62.如果不写头部声明会有什么问题
通常html DOCTYPE声明是必须的,而且使用div+css更是必不可少,如果缺少或错误document将会造成你的CSS失效或半失效,即因为css失效,网页布局变乱,有的css属性不能体现。
另外:由于万恶的IE(尤其指IE6和IE7),我们在页面重构时不免要对其进行各种bug修复及差异化处理。在标准浏览器[1]中可实现的效果在IE里却有各种离奇问题,例如IE6、IE7不能良好应对的inline-block和.clearfix问题.
所以就加入了IE版本区分代码,主要还是解决IE版本兼容性问题。
63.如何优化你的页面
一、提倡前端开发工程师在书写xhtml的时候做到结构语义化。
结构中主要包括了head和body两个部分,但是我们经常说的是结构语义化主要是body中的标签,但是我在这里还是简单的说一下head,head中其实包括了一些对于我们seo很有用的一些东西,比如title,Description,Keywords,这些东西在蜘蛛抓取的时候都是有帮助的,当然,还有其他的一些,我在此就不一一说明了,比如设置缓存等一些其他的信息。
那么body中的话,包括的标签就很多了,我觉得作为一个合格的前端开发人员你应该去熟悉他们,比如div,span,h,ul,ol,dl,p等等这类的标签的使用。应该非常合理,还有就是注意h标签的断层,及h1标签的使用,这些都是非常重要的。
同时在我们的结构中不要出现style和onclick这样的内联的样式和事件。希望大家能够注意结构与表现、行为的分离。
二、css,js文件数量及大小的优化
那么关于css、js的优化的话,一般情况下建议css和js采用外联式。但是如果你的页面内容比较多,设计师把整个效果做得比较花的话,恐怕css就非常多了,那么这种情况下,你一定要把你的css规划好,尽量的采用缩写,这样可以减少css文件的大小,那么对css做相应的规划也可以减少css的个数,减少http请求数,js同理。
三、背景图片数量及大小的优化
由于我们的背景图片数量比较多,这样的话,会给服务器带来影响,增加了http请求数,我们是否有一种好的解决办法呢?这个答案是肯定的,如果你是一个合格的前端开发,你应该清楚,在我们的css定义背景的时候,可以通过坐标来实现对背景进行定位的,既然如此,那么我们可以将这些背景合并起来,这样即可减少http请求数,同时,我们在背景整合的时候,也需要考虑图片质量,同时也需要考虑图片的大小.
你的背景图片保证不超过3个以上,你的css文件不超过2个,js文件不超过3个。而且良好的遵守web标准的一些规定,css放到head中,js文件放到</body>之前或者之后.
建议body中增加text-align:center
用 <link> 代替 @import
作为大型网站来说,首页使用内联式样式表,这样可以减少http请求数的同时,也可以防止裸奔。当然其他页面需要使用外联样式表,这样才可以方便维护。因为作为大型网站来说,他的首页访问量是非常的大的,所以。。
把样式表置于顶部
把脚本置于页面底部
避免使用 CSS 表达式(Expression)
使用外部 JavaScript 和 CSS
削减 JavaScript 和 CSS
用 <link> 代替 @import
避免使用滤镜
剔除重复脚本
减少DOM访问
开发智能事件处理程序
最好的方案就是按照 HTML 规范在文档 <head /> 内加载你的样式表。
对于拥有较大浏览量的首页来说,有一种技术可以平衡内置代码带来的 HTTP 请求减少与通过使用外部文件进行缓存带来的好处。其中一个就是在首页中内置 JavaScript 和 CSS ,但是在页面下载完成后动态下载外部文件,在子页面中使用到这些文件时,它们已经缓存到浏览器了。
Coockie:
减小Cookie体积
对于页面内容使用无coockie域名
图片:
优化图像
优化CSS Spirite
不要在HTML中缩放图像
favicon.ico要小而且可缓存
优化前端网站:http://blog.sina.com.cn/s/blog_630dca5b0101koe3.html
64.两栏自适应布局,右侧div宽高不定
<div class="main">
<div class="content">右侧主体自适应区块</div>
</div>
<div class=“sitebar”>
左侧定宽200px区块
</div>
.main,.sitebar{
height: 300px;
font: bolder 20px/300px "微软雅黑";
color: white;
text-align: center;
}
.main{
width: 100%;
float: left;
}
.main .content{
margin-left: 200px;
background: red;
}
.sitebar{
width: 200px;
float: left;
margin-left: -100%;
background-color: green;
}
65.响应式布局是什么怎么用?
用通俗的话来讲,所谓的响应式布局(Responsive Design),简单可以理解为自适应屏幕大小进行展示,并且获得比较好的体验。
其中,浏览器的兼容是很大的一个技术点,而布局设计是一个设计难点。 如果将响应式布局简单理解为浏览器兼容又大合适,这样的技术在很多年前就已经有提出并有解决方案。以前的浏览器兼容,屏幕大小是相似的,操作习惯是相同的,所以兼容只要不用浏览器或者平台展示的样子一模一样就可以。
而响应式布局并不是说要展现得一样。比如说菜单,在PC可以是左右布局,直接展示。而在手机上,不应该是PC上的缩小版,而应该是菜单屏展示,类似手机原生应用,这就是所谓的不同媒介的适应性体验。
备记之
66. IE6 png的问题。
<u>http://www.cnblogs.com/yuzhongwusan/archive/2009/04/17/1438119.html</u> <u>http://18sucai.com/article/338.htm</u>
方案1 - 纯CSS解决方案:
介绍:虽说是纯CSS解决方案,但是也使用了JavaScript来运算,只不过是将脚本写到了CSS文件中,遗憾的是,此方案只支持img标签,对背景图片无效。
目录说明:
思路:
1、首先下载透明的图片文件
2、在需要设置透明的样式中加入下方代码,其中蓝色标注代码为刚才下载的透明图片,路径同样还是相对于HTML文件的位置 (不相对于CSS文件!):
img
{
_azimuth:expression(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",this.src = "images/blank.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",this.runtimeStyle.backgroundImage = "none")),this.pngSet=true);
}
优点:
CSS代码看起来似乎很优雅,至少没有乱七八糟的文件了,基本没有外加的文件,效率还算不错。
缺点:
1、多引入了一个本不应该存在的blank.gif图片文件;
2、不支持背景图即Background;
3、当文件载入之前,会先暂时呈现灰底;
4、不支持Hover等伪类;
使用情况:
1、大部分透明的png存在于img标签中时可考虑;
2、如果有背景图的可以参考上面所说的支持背景图的两种方式;
方案2 - 滤镜解决方案:
介绍:滤镜从IE4.0被微软正式引入,所以我们可以使用滤镜解决IE6的PNG透明问题,滤镜不仅可以实现目前CSS3的一些旋转效果而且还可以引入图片。注意:此方法在部分版本的IETest中无效,建议使用标准的IE6来进行测试!
目录说明:
思路:
1、书写正常的CSS代码,通过background导入图片,这样所有的浏览器均使用了此PNG图片;
background:url(../images/W3CfunsLogo.png);
2、通过滤镜对引入图片,滤镜引入图片的时候是相对于HTML文件,而不是相对于CSS文件,语法如下:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/W3CfunsLogo.png");
代码写到这里,我们放到IE6下测试后发现IE6还是没有透明,因为我们虽然设置了滤镜引入图片,但是background也同样加载了此图片,又因为background的图层比滤镜设置的高,所以才没有显示出来,如下图:
图片3.png
所以我们得出的结论就是当我们使用filter的时候,就要使background失效,因此我们可以使用CSSHack来解决此问题(如果您不知道IE6的CSSHack如何使用的话,请看这里!),只需要将IE6的background:none;即可,那么可以得出的代码如下:
_background:none; /此代码只有IE6识别/
又因为filter只在IE6下让其产生作用,IE6+版本的浏览器虽然也识别filter,但是png透明是没有灰底问题的,所以我们同样将filter也加上IE6 Hack即可。
最终我们可以得到如下代码:
#pics
{
background:url(../images/W3CfunsLogo.png) no-repeat;
/*以下为IE6设置PNG透明代码*/
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/W3CfunsLogo.png");
}
提示:如果需要使其支持链接的hover,那么需要在CSS中定义:cursor:pointer;使其呈现手型,否则将为默认的鼠标状态。
优点:
1、绿色无插件;
2、效率高,速度快;
3、网速慢的时候,不会出现先灰底再透明的情况,支持远程图片;
4、支持Hover等伪类,但是得使用两张图片,网速慢的情况下,会导致第二张图片暂时无法显示,因为还没有完全载入;
缺点:
1、不支持平铺,虽然filter有sizingMethod="scale", 拉伸缩放模式,但是图片会变形,如果单纯的颜色或简单的渐变色还能横向平铺;
2、不支持Img标签;
3、不支持CSS Sprite;
使用情况:
1、当没有img引入png时可考虑;
2、当没有CSS Sprite需求时可考虑;
3、当没有平铺需求时候可考虑;
方案3 - HTC插件解决方案:
介绍:从IE 5.5版本开始,Internet Explorer(IE)开始支持Web 行为的概念。这些行为是由后缀名为.htc的脚本文件描述的,它们定义了一套方法和属性,程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。
目录说明:
思路:
1、首先下载压缩文件 htc.zip (2.27 KB, 下载次数: 108)
2、复制并粘贴iepngfix.htc和blank.gif到您的网站文件夹中。
3、在需要使用的PNG标签上定义如下,相对于HTML文件的位置 (不相对于CSS文件!)。例如,你可能看起来像这样:
<style type="text/css">
img,div{behavior:url(style/iepngfix.htc);}
</style>
5、如果您的网站使用的子文件夹,打开。HTC文件,大约在第16行更改blankImg变量,修改blank.gif路径像这样:同样路径相对于HTML文件的位置 (不相对于CSS文件!)。
IEPNGFix.blankImg = "images/blank.gif";
6、复制并粘贴iepngfix.htc和blank.gif到您的网站文件夹中。
<script type="text/<u>javascript</u>" src="js/iepngfix_tilebg.js"></script>
7、由于此js只有使用IE6时才有用,所以为了让我们的页面更加高效的执行,我们可以将上方代码修改如下,只有IE6的时候才调用执行此JavaScript:
优点:
1、一次性配置好,只需要像平时一样引入png图片,也不需要考虑png相对于<u>html</u>路径的问题,当目录有所变化,只需要修改htc文件或css中htc文件路径即可。
2、支持平铺属性。
3、不支持Img标签;
4、不支持Hover等伪类;
缺点:
1、多引入了js、图片和htc,共三个文件;
2、不支持CSS Sprite;
3、当文件载入之前,会先暂时呈现灰底;
使用情况:
1、当没有img引入png时可考虑;
2、当没有CSS Sprite需求时可考虑;
3、PNG图片比较频繁修改时可考虑;
方案4 - jQuery解决方案:
介绍:jQuery为我们带来了很大的方便,jQuery没有让我们有太大的失望,img和png都同时得以支持,唯一美中不足的还是无法平铺,无法使用CSS Sprite。
目录说明:
思路:
1、首先下载此方案所用到的js文件和透明gif jQueryPngFix.zip (2.7 KB, 下载次数: 139)
2、找到js文件中找到blankgif: 'images/blank.gif',将路径修改为相对于HTML文件的位置 (不相对于CSS或js文件!)
3、由于此js只有使用IE6时才有用,所以为了让我们的页面更加高效的执行,我们可以将上方代码修改如下,只有IE6的时候才调用执行此JavaScript:
优点:
1、CSS代码看起来很优雅,只需要引入js进行简单的配置一下就行了,效率还算不错;
2、支持背景图,支持img;
缺点:
1、额外加入了js文件和图片文件,增加http请求;
2、加载了一个庞大的jQuery类库;
3、多库共存的时候可能会出现问题;
4、不支持平铺;
5、不支持CSS Sprite;
6、当文件载入之前,会先暂时呈现灰底;
7、不支持Hover等伪类;
使用情况:
当您的项目中使用jQuery的时可以考虑;
jQuery解决方案 - DEMO入口
方案5 - 原生JavaScript解决方案:
介绍:利用了方案1的滤镜原理来实现,但由于此javascript没有读取css文件中的样式,所以此方案同样只支持img标签,对背景图片无效。
目录说明:
思路:
1、首先下载透明此方案所用到的js文件 iepngfix.zip (1.25 KB, 下载次数: 144)
2、由于此js只有使用IE6时才有用,所以为了让我们的页面更加高效的执行,我们可以将上方代码修改如下,只有IE6的时候才调用执行此JavaScript:
优点:
代码看起来似乎很优雅,基本没有外加的文件,效率还算不错。
缺点:
1、额外加入了js文件,增加http请求;
2、不支持背景图即Background;
3、当文件载入之前,会先暂时呈现灰底;
4、不支持Hover等伪类;
使用情况:
1、大部分透明的png存在于img标签中时可考虑;
2、如果有背景图的可以参考上面所说的支持背景图的两种方式;
方案6 - EvPng解决方案:
介绍:此方案与第七种方案差不多,使用方法也如出一辙,效果也非常不错。
目录说明:
思路:
1、首先下载此方案所用到的文件, EvPng.zip (3.39 KB, 下载次数: 128)
2、参考第七种方案的使用方法。
优点:
1、CSS代码无需任何修改,按照平时的思路来写即可;
2、无需配置;
3、没有多余的gif图片;
4、支持img;
5、支持平铺;
6、支持CSS Sprite;
8、支持Hover等伪类;
缺点:
1、额外加入了js文件(文件4.93k,比DD_belatedPNG的6.39k还小)和http请求,可以忽略不计;
2、当文件载入之前,会先暂时呈现灰底;
3、js文件过多的时候,可能会报错,导致js无法正常运行(这种情况极少出现,可以忽略不计);
4、使用CSS Sprite技术的hover效果在部分情况下top可能会有1像素的偏差。
使用情况:
1、当前7种方法均不能解决问题的时候可考虑;
2、当DD_belatedPNG效果不理想的时候可以考虑;
方案7 - DD_belatedPNG解决方案:
介绍:我们都知道在目前所用的png图片透明解决方案基本都是使用滤 镜、xpression解决的、透明gif替代。但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与 background-repeat。而这次的js插件使用了微软的VML语言进行绘制且不需要引入其他文件,一个小小的js就可以完美解决png图片 bug就连img标签和hover伪类也可以很好的解决。
目录说明:
思路:
1、首先下载此方案所用到的文件, DD_belatedPNG.zip (3.76 KB, 下载次数: 254)
2、引入刚下载的js文件,同样由于此js只有使用IE6时才有用,所以为了让我们的页面更加高效的执行,我们可以将上方代码修改如下,只有IE6的时候才调用执行此JavaScript:
[if IE 6]><script type="text/javascript" src="js/DD_belatedPNG.js"></script><![endif]
3、调用函数,设置参数如下:
DD_belatedPNG.fix("#pngImg,#pics,#picsRepeat");
其中传入的参数为所使用png图片的标签的ID、类样式和标签名称,同样也可以按照下方这样来写
DD_belatedPNG.fix("#content img");
此方法则表示#content下的所有img标签透明
如果为链接和链接的hover设置透明,那么您按照下方这么来写,在部分版本里面可以不用加入:hover直接写选择器即可,但是为了保险,建议咱们还是加上:hover:
DD_belatedPNG.fix("#links,#link:hover");
写到这里并且您使用过jQuery或者CSSQuery类库,那么您一定熟悉上面的这种选择方法,总之就是,在CSS中您是如何选择的元素,那么在这个js函数(方法)中传入什么,只不过多个选择的时候,使用逗号隔开即可。
KwooShung用此方法时的小技巧:如果页面中存在很多png,DD_belatedPNG.fix();函数的参数岂不是很长?我们可以使用这种写法:
DD_belatedPNG.fix(".pngFix,.pngFix:hover");
如果使用上述的写法,我们的html中只需要在相对应的标签上加入class="pngFix"就行了,如果有多个类样式,按照平时的多个类样式的写法即可class="abc cbc pngFix",
使用此方法的时候,我们每次都要加载两个js文件或者写两个<script>标签才行,这样不太好,http请求会增多,那么我们可以打开DD_belatedPNG.js文件,在尾部加入如下代码即可:
window.onload = function()
{
DD_belatedPNG.fix(".pngFix,.pngFix:hover");
}
这样我们只需要引入此<u>JS</u>,在需要透明的标签上加入class="pngFix"即可,简单 · 方便 · 快捷!
优点:
1、CSS代码无需任何修改,按照平时的思路来写即可;
2、无需配置;
3、没有多余的gif图片;
4、支持img;
5、支持平铺;
6、支持CSS Sprite;
8、支持Hover等伪类;
缺点:
1、额外加入了js文件(6.39k)和http请求,可以忽略不计;
2、当文件载入之前,会先暂时呈现灰底;
3、js文件过多的时候,可能会报错,导致js无法正常运行(这种情况极少出现,可以忽略不计);
使用情况:
1、当前6种方法均不能解决问题的时候可考虑;
2、当png图片过多的时候可考虑,因为png图片太多,使用前面的几个方法,有的会导致CSS代码冗余过多,还不如引入此文件划算;
方案8 - PNG8格式的图片解决方案:
介绍:png8和gif都是8位的透明度,IE6与生俱来就支持png8的索引色透明度,但不支持png或8位以上的 alpha 透明度。而对于非动画的GIF建议你使用PNG8,因为体积会更小~
思路:一个最简单也最保险的方法让IE6支持PNG图片透明(小小的分享一下)
68.Border 虚边
border: 1px dashed red;
69.li在ie6与ie8下的高度问题
在li样式上加上vertical-align:bottom;
-
Css常见兼容性问题,如何解决?
<u>http://www.zhufengpeixun.cn/CSS/2011-08-25/142.html</u> -
Css常见选择器有哪些?优先级?
选择器:<u>http://www.runoob.com/cssref/css-selectors.html</u>
优先级:id > class > 层级选择器和标签选择器
72.你如何理解绝对定位和相对定位的?都用在什么地方?有什么优点和缺点?
绝对定位就是你的位置已经不属于你了,你只能漂浮在半空中。
相对定位就是你的位置你还占用的,人还在飘着
有意思的是这些都是相对父辈元素有position为相对或者绝对属性来定位的,都找不到的话就以body窗口来定位
因为绝对定位(和文档流没关系)如无申明,则其是对与body而言的,处理不好的话。如显示器尺寸变了,可能就会变型。
相对定位的元素属文档流,所以稳定的,相对定位是相对他该出现的位置,如无设top left之类,和普通div基本一样。
一般的绝对定位是这样用的,父元素要是相对定位的且须有布局,如有个高度,这样子元素用绝对定位,就可以相对它的父元素进行绝对定位,父元素若不这样做,那么子元素用绝对定位其实是相对body定位
- 左侧样式固定,右侧文本宽度自适应如何布局
//html
<div class="container">
<span class="left"></span>
<div class="right"></div>
</div>
//css
*{padding: 0;margin:0;}
.left{width:100px;height:100px;float:left;background-color:yellow;}
.right{margin-left:100px;height:100px;background-color:#666;}
74.下面的布局如何实现,如何不用浮动还能使用什么布局方式
2LSV.png
定位. 或则flex-box
75.HTML静态页面出现中文乱码如何解决?
答:<meta charset="UTF-8" />
76.下列哪个选择器优先级是最高的?
a. #a b. .a .b .c .d .e .f .g .h .i .j .k .l .m .n .o c. #a .b d. div.b#a
答:d
77.写CSS命令,设置字体为宋体,12px大小,颜色为#eeeeee,加粗。
一、字体属性主要包括下面几个
font-family,font-style,font-variant,font-weight,font-size,font
font-family(字体族): “Arial”、“Times New Roman”、“宋体”、“黑体”等;
font-style(字体样式): normal(正常)、italic(斜体)或oblique(倾斜);
font-variant (字体变化): normal(正常)或small-caps(小体大写字母);
font-weight (字体浓淡): 是normal(正常)或bold(加粗)。有些浏览器甚至支持采用100到900之间的数字(以百为单位);
font-size(字体大小): 可通过多种不同单位(比如像素或百分比等)来设置, 如:12xp,12pt,120%,1em
如果用 font 属性的话,就可以把几个样式进行简化,减少书的情况;font 属性的值应按以下次序书写(各个属性之间用空格隔开):
顺序:font-style | font-variant | font-weight | font-size | line-height | font-family
二、font的简写实例
.font{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:arial,verdana;
}
/*上面的样式简写为:*/
.font{font:italic small-caps bold 12px/1.5em arial,verdana;}
三、font的简写注意事项
1、简写时,font-size和line-height只能通过斜杠/组成一个值,不能分开写。
2、顺序不能改变.这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且,如果你没有设定font-weight, font-style, 以及 font-varient ,他们会使用缺省值
78. 常用布局属性有哪些?有什么特点?
margin , padding , position , float
<u>http://www.codesec.net/view/404576.html</u>
79.填空题
一个div,css设置如下:
{width:200px;margin:200px 20px;padding:50px 60px 70px;border:100px solid red;overflow:hidden;}
在IE6怪癖解析下,这个div的实际宽是360px__
在正常解析下,这个div的实际宽度是560px__
80.web网页中常见的图片格式有哪些?分别有什么特点?
常用的图片格式有JPG、GIF、PNG。
1、jpg:jpg全名是JPEG。JPEG图片以 24 位颜色存储单个位图。JPEG 是与平台无关的格式,支持最高级别的压缩,不过,这种压缩是有损耗的。渐近式 JPEG 文件支持交错。
2、gif:GIF分为静态GIF和动画GIF两种,扩展名为.gif,是一种压缩位图格式,支持透明背景图像,适用于多种操作系统,“体型”很小,网上很多小动画都是GIF格式。其实GIF是将多幅图像保存为一个图像文件,从而形成动画,最常见的就是通过一帧帧的动画串联起来的搞笑gif图,所以归根到底GIF仍然是图片文件格式。但GIF只能显示256色。和jpg格式一样,这是一种在网络上非常流行的图形文件格式。
3、png:PNG,图像文件存储格式,其设计目的是试图替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性。PNG的名称来源于“可移植网络图形格式(Portable Network Graphic Format,PNG)”,也有一个非官方解释“PNG's Not GIF”,是一种位图文件(bitmap file)存储格式,读作“ping”。PNG用来存储灰度图像时,灰度图像的深度可多到16位,存储彩色图像时,彩色图像的深度可多到48位,并且还可存储多到16位的α通道数据。PNG使用从LZ77派生的无损数据压缩算法,一般应用于JAVA程序、网页或S60程序中,原因是它压缩比高,生成文件体积小。
网友评论