html和css面试题

Posted 2020-10-03

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; }