前端开发知识分享

前端面试题之HTML和css-很实用的知识点

2020-04-24  本文已影响0人  前端_java爱好者

display: none; 与 visibility: hidden; 的区别

相同： 它们都能让元素不可见

区别：

css hack 原理及常用 hack

原理：利用不同浏览器对 CSS 的支持和解析结果不一样编写针对特定浏览器样式。常见的 hack 有 1）属性 hack。2）选择器 hack。3）IE 条件注释

IE 条件注释：适用于[IE5, IE9]常见格式如下

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

选择器 hack：不同浏览器对选择器的支持不一样

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

属性 hack：不同浏览器解析 bug 或方法

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

link 与 @import 的区别

CSS 有哪些继承属性

display,float,position 的关系

外边距折叠(collapsing margins)

外边距重叠就是 margin-collapse

相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。 这种合并外边距的方式被称为折叠，结合而成的外边距称为折叠外边距

折叠结果遵循下列计算规则：

介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？

CSS 选择符有哪些？

CSS3 新增伪类有那些？

如何居中 div？如何居中一个浮动元素？如何让绝对定位的 div 居中？

如果需要居中的元素为常规流中 inline 元素，为父元素设置 text-align: center;即可实现

如果需要居中的元素为常规流中 block 元素，1）为元素设置宽度，2）设置左右 margin 为 auto。3）IE6 下需在父元素上设置 text-align: center;,再给子元素恢复需要的值

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
        text-align: center; /* 3 */
    }
    .content {
        width: 500px;      /* 1 */
        text-align: left;  /* 3 */
        margin: 0 auto;    /* 2 */

        background: purple;
    }
</style>

如果需要居中的元素为浮动元素，1）为元素设置宽度，2）position: relative;，3）浮动方向偏移量（left 或者 right）设置为 50%，4）浮动方向上的 margin 设置为元素宽度一半乘以-1

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
    }
    .content {
        width: 500px;         /* 1 */
        float: left;

        position: relative;   /* 2 */
        left: 50%;            /* 3 */
        margin-left: -250px;  /* 4 */

        background-color: purple;
    }
</style>

如果需要居中的元素为绝对定位元素，1）为元素设置宽度，2）偏移量设置为 50%，3）偏移方向外边距设置为元素宽度一半乘以-1

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
        position: relative;
    }
    .content {
        width: 800px;

        position: absolute;
        left: 50%;
        margin-left: -400px;

        background-color: purple;
    }
</style>

如果需要居中的元素为绝对定位元素，1）为元素设置宽度，2）设置左右偏移量都为 0,3）设置左右外边距都为 auto

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
        position: relative;
    }
    .content {
        width: 800px;

        position: absolute;
        margin: 0 auto;
        left: 0;
        right: 0;

        background-color: purple;
    }
</style>

如何竖直居中一个元素

display 有哪些值？说明他们的作用

position 有哪些值 relative 和 absolute 定位原点是？

CSS3 有哪些新特性？

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

/* 把上、左、右三条边隐藏掉（颜色设为 transparent）*/
#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

一个满屏品字布局如何设计?

简单的方式：

经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用 hack 的技巧 ？

li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？(也称幽灵字符)

行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为 0，就没有空格了

display:inline-block 间隙问题怎么解决？(携程)

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

display:inline-block 什么时候会显示间隙？

css 定义的权重

网上有声称诸如id权重100，class权重10等计算方法，这是不正确的。 实际上应该如下：

  1. 如果一个声明来自style属性而不是选择器，计作1或者a=1（在一个html文档中，元素“style”的值是样式表规则，这个规则中没有选择器，所以a=1, b=0, c=0, and d=0）
  2. 选择器中id属性的个数,计作b
  3. 选择器中其他属性以及伪类的个数，计作c
  4. 选择器中元素及伪元素的个数，计作d

一些例子：

* {}     /* a=0 b=0 c=0 d=0 -> 优先级= 0,0,0,0 */
li {}     /* a=0 b=0 c=0 d=1 -> 优先级 = 0,0,0,1 */
li:first-line {}     /* a=0 b=0 c=0 d=2 -> 优先级 = 0,0,0,2 */
ul li {}     /* a=0 b=0 c=0 d=2 -> 优先级 = 0,0,0,2 */
ul ol+li {}     /* a=0 b=0 c=0 d=3 -> 优先级 = 0,0,0,3 */
h1 + *[rel=up]{}     /* a=0 b=0 c=1 d=1 -> 优先级 = 0,0,1,1 */
ul ol li.red {}     /* a=0 b=0 c=1 d=3 -> 优先级 = 0,0,1,3 */
li.red.level {}     /* a=0 b=0 c=2 d=1 -> 优先级 = 0,0,2,1 */
#x34y {}     /* a=0 b=1 c=0 d=0 -> 优先级 = 0,1,0,0 */
style=""     /* a=1 b=0 c=0 d=0 -> 优先级 = 1,0,0,0 */

[备注]
　　:first-line 伪元素
　　[rel=up] 其他属性

优先级只基与选择器的形式，特殊的，一个“[id=p33]“形式的选择器是按照属性选择器来计算的（a=0, b=0, c=1, d=0），即使用定义中包含ID。

了解了这些 你应该不会再对”11个class与一个id”谁的优先级高“这类的问题有疑问了吧，因为a,b,c,d只是在各自位置数字的累加，而不会越级。

当然权重最高的是!important，会覆盖以上所有。行内样式也高不过它。

有一幅生动的图可以展示这个规则： 大鱼吃小鱼

CSS 优先级算法如何计算？

谈谈浮动和清除浮动

浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上

解决方法

  1. 父级 div 定义伪类：after 和 zoom (推荐使用，建议定义公共类，以减少 CSS 代码)
   .clearfloat:after{
       display:block;
       clear:both;
       content:"";
       visibility:hidden;
       height:0}

   .clearfloat{zoom:1}
  1. 在结尾处添加空 div 标签 clear:both
<div class="parent">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="clearfloat"></div>
</div>

<style>
    .left {float:left}
    .clearfloat{clear:both}
</style>
  1. 父级 div 定义 height
  2. 父级 div 定义 overflow:auto
  3. 父级 div 定义 overflow:hidden
  4. 父级 div 也一起浮动
  5. 父级 div 定义 display:table
  6. 结尾处加 br 标签 clear:both

参考链接几种常用的清除浮动方法

box-sizing 常用的属性有哪些？分别有什么作用？

请列举几种隐藏元素的方法

rgba() 和 opacity 的透明效果有什么不同？

css 属性 content 有什么作用？

content 属性专门应用在 before/after 伪元素上，用于插入额外内容或样式

请解释一下 CSS3 的 Flexbox（弹性盒布局模型）以及适用场景？

Flexbox 用于不同尺寸屏幕中创建可自动扩展和收缩布局

请写出多种等高布局

圣杯布局的实现原理？

要求：三列布局；中间主体内容前置，且宽度自适应；两边内容定宽

好处：重要的内容放在文档流前面可以优先渲染

原理：利用相对定位、浮动、负边距布局，而不添加额外标签

  .container {
      padding-left: 150px;
      padding-right: 190px;
  }
  .main {
      float: left;
      width: 100%;
  }
  .left {
      float: left;
      width: 190px;
      margin-left: -100%;
      position: relative;
      left: -150px;
  }
  .right {
      float: left;
      width: 190px;
      margin-left: -190px;
      position: relative;
      right: -190px;
  }

什么是双飞翼布局？实现原理？

双飞翼布局：对圣杯布局（使用相对定位，对以后布局有局限性）的改进，消除相对定位布局

原理：主体元素上设置左右边距，预留两翼位置。左右两栏使用浮动和负边距归位，消除相对定位。

.container {
    /*padding-left:150px;*/
    /*padding-right:190px;*/
}
.main-wrap {
    width: 100%;
    float: left;
}
.main {
    margin-left: 150px;
    margin-right: 190px;
}
.left {
    float: left;
    width: 150px;
    margin-left: -100%;
    /*position: relative;*/
    /*left:-150px;*/
}
.right {
    float: left;
    width: 190px;
    margin-left: -190px;
    /*position:relative;*/
    /*right:-190px;*/
}

在 CSS 样式中常使用 px、em 在表现上有什么区别？

为什么要初始化 CSS 样式？

reset.css 和 Normalize.css 理解

reset.css 意为重置默认样式。HTML 中绝大部分标签元素在网页显示中都有一个默认属性值，通常为了避免重复定义元素样式，需要进行重置默认样式

Eric Meyer（CSS Reset）推荐

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Normalize.css 只是一个很小的 css 文件,但它在默认的 HTML 元素样式上提供了跨浏览器的高度一致性。相比于传统的 css reset，Normalize.css 是一种现代的，为 HTML5 准备的优质替代方案。

Normalize.css 是一种 CSS reset 的替代方案。经过@necolas 和@jon neal 花了几百个小时来努力研究不同浏览器的默认样式的差异，这个项目终于变成了现在这样。

我们创造 normalize.css 有下几个目的：

什么是 FOUC(Flash of Unstyled Content)？ 如何来避免 FOUC？

介绍使用过的 CSS 预处理器？

CSS 优化、提高性能的方法有哪些？

浏览器是怎样解析 CSS 选择器的？

浏览器解析 CSS 选择器的方式是从右到左

在网页中的应该使用奇数还是偶数的字体？

在网页中的应该使用“偶数”字体：

margin 和 padding 分别适合什么场景使用？

抽离样式模块怎么写，说出思路？

CSS 可以拆分成 2 部分：公共 CSS 和 业务 CSS：

元素竖向的百分比设定是相对于容器的高度吗？

元素竖向的百分比设定是相对于容器的宽度，而不是高度

全屏滚动的原理是什么？ 用到了 CSS 的那些属性？

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的 IE？

$(window).resize(function () {
    screenRespond();
});

screenRespond();

function screenRespond(){

    var screenWidth = $(window).width();

    if(screenWidth <= 1800){
        $("body").attr("class", "w1800");
    }

    if(screenWidth <= 1400){
        $("body").attr("class", "w1400");
    }

    if(screenWidth > 1800){
        $("body").attr("class", "");
    }
}

什么是视差滚动效果，如何给每页做不同的动画？

实现原理

a 标签上四个伪类的执行顺序是怎么样的？

link > visited > hover > active

伪元素和伪类的区别和作用？

伪元素:在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如：

p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}

伪类: 将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：

a:hover {color: #FF00FF}
p:first-child {color: red}

::before 和 :after 中双冒号和单冒号有什么区别？

如何修改 Chrome 记住密码后自动填充表单的黄色背景？

input [type=search] 搜索框右侧小图标如何美化？

input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance: none;
  height: 15px;
  width: 15px;
  border-radius: 8px;
  background:url("images/searchicon.png") no-repeat 0 0;
  background-size: 15px 15px;
}

网站图片文件，如何点击下载？而非点击预览？

<a href="logo.jpg" download>下载</a> <a href="logo.jpg" download="网站LOGO" >下载</a>

iOS safari 如何阻止“橡皮筋效果”？

  $(document).ready(function(){
      var stopScrolling = function(event) {
          event.preventDefault();
      }
      document.addEventListener('touchstart', stopScrolling, false);
      document.addEventListener('touchmove', stopScrolling, false);
  });

你对 line-height 是如何理解的？

line-height 三种赋值方式有何区别？（带单位、纯数字、百分比）

设置元素浮动后，该元素的 display 值会如何变化？

设置元素浮动后，该元素的 display 值自动变成 block

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

  .shrink{
    -webkit-transform:scale(0.8);
    -o-transform:scale(1);
    display:inline-block;
  }

让页面里的字体变清晰，变细用 CSS 怎么做？（IOS 手机浏览器字体齿轮设置）

  -webkit-font-smoothing: antialiased;

font-style 属性 oblique 是什么意思？

font-style: oblique; 使没有 italic 属性的文字实现倾斜

如果需要手动写动画，你认为最小时间间隔是多久？

16.7ms 多数显示器默认频率是 60Hz，即 1 秒刷新 60 次，所以理论上最小间隔: 1s / 60 * 1000 ＝ 16.7ms

overflow: scroll 时不能平滑滚动的问题怎么处理？

监听滚轮事件，然后滚动到一定距离时用 jquery 的 animate 实现平滑效果。

一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度

CSS 中类 class 和 id 的区别

对于 CSS 而言，id 和 class 都是选择器，唯一不同的地方在于权重不同。如果只说 CSS，上面那一句话就讲完了。拓展出来，对于 html 而言，id 和 class 都是 dom 元素的属性值。不同的地方在于 id 属性的值是唯一的，而 class 属性值可以重复。id 还一个老特性是锚点功能，当浏览器地址栏有一个#xxx，页面会自动滚动到 id=xxx 的元素上面。

更直接的：id 给 js 用，class 给 css 用（趋势）

如何优化网页的打印样式

<link rel="stylesheet" type="text/css" media="screen" href="xxx.css" />

其中 media 指定的属性就是设备，显示器上就是 screen，打印机则是 print，电视是 tv，投影仪是 projection。

 <link rel="stylesheet" type="text/css" media="print" href="yyy.css" />

但打印样式表也应有些注意事项：

请问为何要使用 transform 而非 absolute positioning，或反之的理由？为什么？

反之

请解释 CSS sprites，以及你要如何在页面或网站中实现它

你熟悉 SVG 样式的书写吗？

SVG 等效的 CSS
fill background-color 或 color
fill-opacity background-color 或 color 设置 rgba/hsla
opacity opacity
stroke border-color
stroke-width border-thickness
stroke-opacity border-color 设置 rgba
rx, ry border-radius

下面的属性在 SVG 和 CSS 中是一样的，只是在 SVG 的 transformations 和 dimensions 中稍有区别：

参考链接：基本的 SVG 样式属性

如果设计中使用了非标准的字体，你该如何去实现？

上一篇下一篇

猜你喜欢

热点阅读