web前端总结面试问题<CSS&HTML问题>

一个父元素div，一个未知宽度、高度的子元素div [上下左右居中方法总结]

//1、position布局，position设为absolute，其他同情景一

　　　　　　　　　　　　2、display：table

　　　　　　　　　　　　父级元素：{ display:table;}

　　　　　　　　　　　　子级元素： { display:table-cell;vertical-align:middle }

　　　　　　　　　　　 3、flex布局

　　　　　　　　　　　　父级元素：{ display:flex;flex-direction:row;justify-content:center;align-items:center;}

　　　　　　　　　　　　子级元素：{flex:1}

　　　　　　　　　　　4、translate

　　　　　　　　　　　　position: absolute;
　　　　　　　　　　　　top: 50%;
　　　　　　　　　　　　left: 50%;
　　　　　　　　　　　　-webkit-transform: translate(-50%, -50%);
　　　　　　　　　　　　-moz-transform: translate(-50%, -50%);
　　　　　　　　　　　　-ms-transform: translate(-50%, -50%);
　　　　　　　　　　　　-o-transform: translate(-50%, -50%);
　　　　　　　　　　　　transform: translate(-50%, -50%);

常用Hack的技巧：

（1）IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性；
（2）Firefox下，只能使用getAttribute()获取自定义属性。解决方法：统一通过getAttribute()获取自定义属性。
（3）IE下，even对象有x,y属性，但是没有pageX,pageY属性；
（4）Firefox下，event对象有pageX,pageY属性，但是没有x,y属性。解决方法是条件注释，缺点是在IE浏览器下可能会增加额外的HTTP请求数。
（5）Chrome 中文界面下默认会将小于12px的文本强制按照12px显示，可通过加入 CSS属性-webkit-text-size-adjust: none;来解决。
（6）超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不再具有hover和active了，解决方法是改变CSS属性的排列顺序：
L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

两行溢出省略，兼容ie的

//兼容ie的
 .menu{
        position: relative;
        line-height: 24px;
        height: 48px;
        overflow: hidden;
        width: 100px;
    }
    .menu:after{
        content: '...';
        font-weight: bold;
        position: absolute;
        bottom: 0;
        right: -15px;
        padding: 0 20px 1px 45px;
        background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
    }

//不兼容ie
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        width:100px;

用纯CSS创建一个三角形的原理是什么？

把上、左、右三条边隐藏掉（颜色设为 transparent）

.demo {
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent red transparent;
}

CSS3 线性渐变

background: linear-gradient(direction, color-stop1, color-stop2, ...);

CSS3 Media

@media screen and (min-width:960px){
    body{background:orange;}
}

响应式布局的格式：

@media mediatype and/not/only (media feature){CSS-Code}

CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS 3新增伪类有哪些？

id选择器（# myid）
类选择器（.myclassname）
标签选择器（div、h1、p）
相邻选择器（h1 + p）
子选择器（ul < li）
后代选择器（li a）
通配符选择器（ * ）
属性选择器（a[rel = "external"]）
伪类选择器（a: hover, li: nth - child）
可继承： font-size font-family color, UL LI DL DD DT;
不可继承 ：border padding margin width height ;
优先级就近原则，样式定义最近者为准，载入样式以最后载入的定位为准。
优先级为：
       !important >  id > class > tag
       important 比 内联优先级高
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  单选框或复选框被选中。

如何居中div，如何居中一个浮动元素？

div{
        width:200px;
        margin:0 auto;
     }

如何理解表现与内容相分离？

表现与结构相分离简单的说就是HTML中只有标签元素 表现完全是由CSS文件控制的。

Firefox下文本无法撑开容器的高度，如何解决？

清除浮动 .clear{ clear:both; height:0px; overflow:hidden;}

怎么让Chrome支持小于12px 的文字？

body{-webkit-text-size-adjust:none} 

介绍一下 Sass 和 Less 是什么？它们有何区别？

Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，语法跟css一样(但多了些功能)，比css好写，而且更容易阅读。Sass语法类似与Haml，属于缩排语法（makeup），用意就是为了快速写Html和Css。
Less一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。
区别：
(1))Sass是基于Ruby的，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出Css到浏览器，也可以在开发环节使用Less，然后编译成Css文件，直接放到项目中，也有Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。
(2)变量符不一样，less是@，而Scss是$，而且变量的作用域也不一样，后面会讲到。
(3)输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。
(4)Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。

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

列出display的值，说明它们的作用。position的值里，relative和absolute定位原点是？

display的值：
block 像块类型元素一样显示。
none 缺省值。像行内元素类型一样显示。
inline-block 像行内元素一样显示，但其内容像块类型元素一样显示。
list-item 像块类型元素一样显示，并添加样式列表标记。
relative和absolute定位原点：
absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。
relative：生成相对定位的元素，相对于其正常位置进行定位。