码迷,mamicode.com
首页 > Web开发 > 详细

html和css面试题

时间:2017-08-20 00:49:01      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:abs   工作   pos   行内元素   static   css   ati   new   继承   

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

 

div设置一个宽度,然后添加margin:0 auto属性

 

div{

        width:200px;

        margin:0 auto;

     }  

居中一个浮动元素

 

      确定容器的宽高 500 高 300 的层

      设置层的外边距

 

.div {

      Width:500px ; height:300px;//高度可以不设

      Margin: -150px 0 0 -250px;

position:relative;相对定位

//方便看效果

      left:50%;

      top:50%;

}

22.你怎么来实现页面设计图,你认为前端应该如何高质量完成工作? 一个满屏 品 字布局 如何设计?

 

* 首先划分成头部、body、脚部;。。。。。

 

*  

  实现效果图是最基本的工作,精确到2px;

 

  与设计师,产品经理的沟通和项目的参与

 

  做好的页面结构,页面重构和用户体验

 

  处理hack,兼容、写出优美的代码格式

 

  针对服务器的优化、拥抱 HTML5。

23.列出display的值,说明他们的作用。position的值, relative和absolute定位原点是?

 

  1.    block 象块类型元素一样显示。

  none 缺省值。向行内元素类型一样显示。

  inline-block 象行内元素一样显示,但其内容象块类型元素一样显示。

  list-item 象块类型元素一样显示,并添加样式列表标记。

 

  2.

  *absolute

        生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

 

  *fixed (老IE不支持)

        生成绝对定位的元素,相对于浏览器窗口进行定位。

 

  *relative

        生成相对定位的元素,相对于其正常位置进行定位。

 

  * static  默认值。没有定位,元素出现在正常的流中

  *(忽略 top, bottom, left, right z-index 声明)。

 

  * inherit 规定从父元素继承 position 属性的值。

24.为什么要初始化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; }

html和css面试题

标签:abs   工作   pos   行内元素   static   css   ati   new   继承   

原文地址:http://www.cnblogs.com/cutenana/p/7398236.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!