课程咨询:400-111-8989

  • HTML5的面试小技巧(二)

    发布:HTML5培训  来源:html5就业指导  时间: 2018年05月29日

  • 今天小编要跟大家分享的文章是关于HTML5的面试小技巧(二)。准备参见HTML5面试的小伙伴们来看一看,希望本篇文章能够对你有所帮助哦。...

  • 今天小编要跟大家分享的文章是关于HTML5的面试小技巧(二)。准备参见HTML5面试的小伙伴们来看一看,希望本篇文章能够对你有所帮助哦。

    HTML5的面试小技巧(二)

    常说面试是步入职场的第一道门槛,一次成功的面试,能够换来一份满意的工作。而很多人往往止步于此,特别是对应聘技术岗位的同胞们,技术问题往往是最难攻破的难关。下面是针对前端这个行业整理的一些面试题,希望能给H5的小伙伴们带来福利!

    1.CSS3新增伪类举例:

    p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素;

    p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素;

    p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素;

    p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素;

    p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素;

    :enabled :disabled 控制表单控件的禁用状态;

    :checked 单选框或复选框被选中。

    2.如何居中div? 如何居中一个浮动元素?

    给div 设置一个宽度,然后添加 margin:0 auto 属性;div{width:200px; margin:0 auto; }

    3.居中一个浮动元素

    确定容器的宽高 宽500 高300的层,设置层的外边距

    .div{width:500px;height:300px;margin:-150px 0 0 -250px;position:relative;background:green;left:50%;头:50%}

    4.css3有哪些新特性?

    CSS3 实现圆角(border-radius:8px;),阴影(box-shadow:10px),对文字加特效(text-shadow),线性渐变(gradient),旋转(transform)

    transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

    增加了更多的 css 选择器 多背景 rgba

    5.为什么要初始化 CSS 样式

    因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。

    当然,初始化样式会对 SEO 有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。

    最简单的初始化方法是:*{padding:0;margin:0} (不建议)

    淘宝的样式初始化:

    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input,

    textarea, th, td { margin:0; padding:0; }

    body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }

    h1, h2, h3, h4, h5, h6{ font-size:100%; }

    address, cite, dfn, em, var { font-style:normal; }

    code, kbd, pre, samp { font-family:couriernew, courier, monospace; }

    small{ font-size:12px; }

    ul, ol { list-style:none; }

    a { text-decoration:none; }

    a:hover { text-decoration:underline; }

    sup { vertical-align:text-top; }

    sub{ vertical-align:text-bottom; }

    legend { color:#000; }

    fieldset, img { border:0; }

    button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; }

    6.display:inline-block 什么时候会显示间隙?

    移除空格,使用margin 负值、使用 font-size:0、letter-spacing 、word-spacing

    7.使用 CSS 预处理器吗?喜欢哪个?

    SASS

    8.什么是盒子模型?

    在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分。这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

    9.CSS实现垂直水平居中

    一道经典的问题,实现方法有很多种,以下是其中一种实现:

    HTML结构:

    <div

    class="wrapper">

    <div

    class="content"></div>

    </div>

    CSS:

    .wrapper{position:relative;}

    .content{

    background-color:#6699FF;

    width:200px;

    height:200px;

    position:

    absolute; //父元素需要相对定位

    top:

    50%;

    left:

    50%;

    margin-top:-100px

    ;

    //二分之一的height,width

    margin-left:

    -100px;

    }

    10.简述一下src与href的区别

    href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。

    src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

    以上就是小编今天跟小伙伴分享的关于HTML5的面试小技巧(二),准备参加相关面试我的小伙伴们看一看,希望本篇文章对你有所帮助也希望小伙伴们能够顺利地找到工作。如果你喜欢小编分享的文章,欢迎继续关注达内html5官网,这里不仅有丰富的HTML5相关资讯,还有专业的HTML5培训课程哦。

  • 上一篇:HTML5的面试小技巧(一)

    下一篇:没有下一篇了

网站导航
2002-2018 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56