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

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

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

区别：

display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility:hidden;是继承属性，子孙节点消失由于继承了 hidden，通过设置 visibility: visible;可以让子孙节点显式
修改常规流中元素的 display 通常会造成文档重排。修改 visibility 属性只会造成本元素的重绘
读屏器不会读取 display: none;元素内容；会读取 visibility: hidden 元素内容

css hack 原理及常用 hack

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

<!--[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 有哪些继承属性

关于文字排版的属性如：
- font
- word-break
- letter-spacing
- text-align
- text-rendering
- word-spacing
- white-space
- text-indent
- text-transform
- text-shadow
line-height
color
visibility
cursor

display,float,position 的关系

如果 display 为 none，那么 position 和 float 都不起作用，这种情况下元素不产生框
否则，如果 position 值为 absolute 或者 fixed，框就是绝对定位的，float 的计算值为 none，display 根据下面的表格进行调整
否则，如果 float 不是 none，框是浮动的，display 根据下表进行调整
否则，如果元素是根元素，display 根据下表进行调整
其他情况下 display 的值为指定值总结起来：绝对定位、浮动、根元素都需要调整 display

外边距折叠(collapsing margins)

外边距重叠就是 margin-collapse

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

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

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

CSS 选择符有哪些？

CSS3 新增伪类有那些？

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

元素的每个

元素。
p:last-of-type 选择属于其父元素的最后

元素的每个

元素。
p:only-of-type 选择属于其父元素唯一的

元素的每个

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

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

元素。
:after 在元素之前添加内容,也可以用来做清除浮动。
:before 在元素之后添加内容
:enabled 选择器匹配每个已启用的元素（大多用在表单元素上）。
:disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中

如何居中 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 有哪些新特性？

新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
弹性盒模型 display: flex;
多列布局 column-count: 5;
媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}
个性化字体 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}
颜色透明度 color: rgba(255, 0, 0, 0.75);
圆角 border-radius: 5px;
渐变 background:linear-gradient(red, green, blue);
阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
倒影 box-reflect: below 2px;
文字装饰 text-stroke-color: red;
文字溢出 text-overflow:ellipsis;
背景效果 background-size: 100px 100px;
边框效果 border-image:url(bt_blue.png) 0 10;
平滑过渡 transition: all .3s ease-in .1s;
动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;
转换
- 旋转 transform: rotate(20deg);
- 倾斜 transform: skew(150deg, -10deg);
- 位移 transform: translate(20px, 20px);
- 缩放 transform: scale(.5);

用纯 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等计算方法，这是不正确的。实际上应该如下：

一些例子：

* {}     /* 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 优先级算法如何计算？

谈谈浮动和清除浮动

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

解决方法

父级 div 定义伪类：after 和 zoom (推荐使用，建议定义公共类，以减少 CSS 代码)

   .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}.clearfloat{zoom: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>

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

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", "");}
}

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 样式属性

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

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

大前端面试题总结（html+css+js）
先从我们最熟悉的html+css开始 1.请简述css盒子模型一个css盒子从外到内可以分成四个部分:margin(外边距),border(边框),padding(内边距),content(内容) ...
前端面试题答案整理之CSS
介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的? css盒子模型由4部分构成,margin.border.padding.content.标准盒子模型和IE盒子模型的主要区别是在于 ...
web前端面试题之肉（css）
CSS复习 HTML 复习 HTML版本 HTML4/4.01(SGML) 超级xml(可扩展标记语言) XHTML(XML) 要求严格,所有的标签.属性小写,属性必须要有值 HTML5 HTML4 ...
与歌谣通关前端面试题【CSS篇汇总目录】
我是歌谣放弃很容易但坚持一定很酷欢迎关注公众号小歌谣一起讨论前后端知识 CSS汇总 [CSS] [css] 圣杯布局和双飞翼布局的理解和区别,并用代码实现 [css] CSS3有哪些新增的特性 ...
前端面试题-CSS选择器性能优化
一.CSS选择符 CSS选择符由一些初始化参数组成,这些参数指明了要应用这个CSS规则的页面元素. 作为一个网站的前端开发工程师,应该避免编写一些常见的开销很大的CSS选择符模式,尽量编写高效的CSS ...
前端面试题汇总（css基础篇）
前端面试题汇总(css基础篇) 1 css sprite是什么,有什么优缺点概念:将多个⼩图⽚拼接到⼀个图⽚中. 通过 background-position 和元素尺⼨调节需要显示的背景图案. ...
web前端面试题完美整理/涵盖html,CSS、JS、浏览器、Vue、React、移动web。
本篇文章整理总结了一些前端面试题,涵盖面很广,并且面的都是知名大厂,所以这些题还是很有代表性的,都掌握以后一面基础面应该没什么问题,二面也能应付大半,奉上: css相关更多教程:https://su ...
2021最新最全前端面试题（包含HTML、CSS、JavaScript、Vue、React、浏览器、算法与数据结构等）
整理了一些前端面试题,希望对正在找前端工作的伙伴有用.本篇文章内容篇幅较大,主要针对初中级前端开发工程师. 篇幅过长,大家可以先点赞收藏以后慢慢看. 关于HTML 的title和alt属性有什么区别 ...
金三银四求职季,前端面试题小梳理(HTML、CSS、JS)
好久没写学习记录,最近太多事,又到一年求职季,都说金三银四求职季,自己也做一下最近学习的一些前端面试题梳理,还是个小白,写的不对请指正,不胜感激. HTML篇 html语义化用语义化的代码标签书写, ...
前端面试题汇总CSS篇
转载自:https://www.cnblogs.com/zhangshuda/p/8465043.html 前端面试题 ----css篇 1.css盒模型有哪些及区别content-box borde ...

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

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

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

最新文章

热门文章