美文网首页我爱编程
HTML&CSS常见面试题,答案,注意事项!第二篇(40

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

作者: 叫丽丽啊 | 来源:发表于2018-07-07 09:23 被阅读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文件!)。例如,你可能看起来像这样:

    <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图片透明(小小的分享一下)

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

    68.Border 虚边
    border: 1px dashed red;

    69.li在ie6与ie8下的高度问题
    在li样式上加上vertical-align:bottom;

    1. Css常见兼容性问题,如何解决?
      <u>http://www.zhufengpeixun.cn/CSS/2011-08-25/142.html</u>

    2. Css常见选择器有哪些?优先级?
      选择器:<u>http://www.runoob.com/cssref/css-selectors.html</u>
      优先级:id > class > 层级选择器和标签选择器

    72.你如何理解绝对定位和相对定位的?都用在什么地方?有什么优点和缺点?
    绝对定位就是你的位置已经不属于你了,你只能漂浮在半空中。
    相对定位就是你的位置你还占用的,人还在飘着

    有意思的是这些都是相对父辈元素有position为相对或者绝对属性来定位的,都找不到的话就以body窗口来定位
    因为绝对定位(和文档流没关系)如无申明,则其是对与body而言的,处理不好的话。如显示器尺寸变了,可能就会变型。
    相对定位的元素属文档流,所以稳定的,相对定位是相对他该出现的位置,如无设top left之类,和普通div基本一样。

    一般的绝对定位是这样用的,父元素要是相对定位的且须有布局,如有个高度,这样子元素用绝对定位,就可以相对它的父元素进行绝对定位,父元素若不这样做,那么子元素用绝对定位其实是相对body定位

    1. 左侧样式固定,右侧文本宽度自适应如何布局
    //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

        本文链接:https://www.haomeiwen.com/subject/giciuftx.html