HTML&CSS常见面试题，答案，注意事项！第二篇(40

2018-07-07 本文已影响329人叫丽丽啊

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.png

44.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.png

49.标签的隐藏（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文件！）。例如，你可能看起来像这样：

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到您的网站文件夹中。

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、额外加入了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图片透明（小小的分享一下）

Hack是什么怎么用？
<u>http://www.kwstu.com/Admin/ViewArticle/201409011604277330</u>

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程序中，原因是它压缩比高，生成文件体积小。

HTML&CSS常见面试题，答案，注意事项！第二篇(40

41.input标签存在的兼容问题？

42.input中disabled与readonly有何区别？

43.input属性有哪些？

44.position属性值，如只写了absolute，是相对谁定的位？

45.CSS选择器中div.ps是什么意思

46.使用display:inline-block在IE6中不能正常显示，如何解决？

47.png图片有几种格式

48.display的属性值有哪些？

49.标签的隐藏（display:none和visibility:hidden）的区别

50.在页面内居中（水平和垂直方向）*3

51. 如何让链接访问过后的hover消失

52. Ie6中为什么不能设置1px高的div

53. div中内容没有撑开高度的原因，怎么解决：

54. 双倍边距bug

55.如何让div水平排列

56.定义id名和class名有什么区别

57.CSS有几种引入方式？link和@import有什么区别

58.在IE中给div设display:inline-block;它还会占一行不会?

59.如何制作渐变效果（不使用CSS3）

60.上下两个div分别设置了margin-bottom和margin-top，两个div之间的距离是多少？

61.除了ul、ol还用什么写列表

62.如果不写头部声明会有什么问题

63.如何优化你的页面

64.两栏自适应布局，右侧div宽高不定

65.响应式布局是什么怎么用？

66. IE6 png的问题。

方案1 - 纯CSS解决方案：

方案2 - 滤镜解决方案：

方案3 - HTC插件解决方案：

方案4 - jQuery解决方案：

方案5 - 原生JavaScript解决方案：

方案6 - EvPng解决方案：

方案7 - DD_belatedPNG解决方案：

方案8 - PNG8格式的图片解决方案：

77.写CSS命令，设置字体为宋体，12px大小，颜色为#eeeeee,加粗。

一、字体属性主要包括下面几个

二、font的简写实例

三、font的简写注意事项

78. 常用布局属性有哪些？有什么特点？

79.填空题

80.web网页中常见的图片格式有哪些？分别有什么特点？

猜你喜欢

热点阅读