盒子模型的理解 ?
CSS 盒子模型具有内容 (content)、填充 (padding)、边框 (border)、边界 (margin)这些属性。
我们所说的 width,height 指的是内容 (content) 的宽高。
一个盒子模型的中:
如何在页面上实现一个圆形的可点击区域 ?
实现不使用 border 画出 1px 高的线,在不同浏览器的标准模式与怪异模式下都能保持一致的效果。
<div style="height:1px;overflow:hidden;background:red"></div>
CSS 中哪些属性可以同父元素继承 ?
继承:(X)HTML 元素可以从其父元素那里继承部分 CSS 属性,即使当前元素并没有定义该属性,比如:color,font-size。
box-sizing 常用的属性有哪些 ?分别有什么作用 ?
常用的属性:content-box、 border-box 、inherit
作用
页面导入样式时,使用 link 和 @import 有什么区别 ?
常见兼容性问题?
清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ?
一个块级元素如果没有设置 height,那么其高度就是由里面的子元素撑开,如果子元素使用浮动,脱离了标准的文档流,那么父元素的高度会将其忽略,如果不清除浮动,父元素会出现高度不够,那样如果设置 border 或者 background 都得不到正确的解析。
正是因为浮动的这种特性,导致本属于普通流中的元素浮动之后,包含框内部由于不存在其他普通流元素了,也就表现出高度为 0(高度塌陷
)。在实际布局中,往往这并不是我们所希望的,所以需要闭合浮动元素,使其包含框表现出正常的高度。
清除浮动的方式
总结:比较好的是倒数第 2 种方式,简洁方便。
如何保持浮层水平垂直居中 ?
一、水平居中
(1)行内元素解决方案
只需要把行内元素包裹在一个属性 display 为 block 的父层元素中,并且把父层元素添加如下属性即可。
.parent { text-align: center; }
(2)块状元素解决方案
.item { /* 这里可以设置顶端外边距 */ margin: 10px auto; }
(3)多个块状元素解决方案将元素的 display 属性设置为 inline-block,并且把父元素的 text-align 属性设置为 center 即可:
.parent { text-align:center; }
(4)多个块状元素解决方案
使用 flexbox 布局,只需要把待处理的块状元素的父元素添加属性 display: flex 及 justify-content: center 即可。
.parent { display: flex; justify-content: center; }
二、垂直居中
(1)单行的行内元素解决方案
.parent { background: #222; height: 200px; } /* 以下代码中,将 a 元素的 height 和 line-height 设置的和父元素一样高度即可实现垂直居中 */ a { height: 200px; line-height:200px; color: #FFF; }
(2)多行的行内元素解决方案组合
使用 display: table-cell 和 vertical-align: middle 属性来定义需要居中的元素的父容器元素生成效果,如下:
.parent { background: #222; width: 300px; height: 300px; /* 以下属性垂直居中 */ display: table-cell; vertical-align: middle; }
(3)已知高度的块状元素解决方案
.item{ position: absolute; top: 50%; margin-top: -50px; /* margin-top值为自身高度的一半 */ padding:0; }
三、水平垂直居中
(1)已知高度和宽度的元素解决方案 1
这是一种不常见的居中方法,可自适应,比方案 2 更智能,如下:
.item{ position: absolute; margin:auto; left:0; top:0; right:0; bottom:0; }
(2)已知高度和宽度的元素解决方案 2
.item{ position: absolute; top: 50%; left: 50%; margin-top: -75px; /* 设置margin-left / margin-top 为自身高度的一半 */ margin-left: -75px; }
(3)未知高度和宽度元素解决方案
.item{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 使用 css3 的 transform 来实现 */ }
(4)使用 flex 布局实现
.parent{ display: flex; justify-content: center; align-items: center; /* 注意这里需要设置高度来查看垂直居中效果 */ background: #AAA; height: 300px; }
position 、float 和 display 的取值和各自的意思和用法
position
float
display
定位机制
上面三个属性都属于 CSS 定位属性。CSS 三种基本的定位机制:普通流、浮动、绝对定位。
css3 动画效果属性有哪些 ?
canvas 与 svg 的区别 ?
现在对两种技术做对比归纳如下:
Canvas
SVG
px 和 em 的区别 ?
会不会用 ps 扣图,png、jpg、gif 这些图片格式解释一下,分别什么时候用。如何优化图像、图像格式的区别 ?
JPG 的特性
PNG 的特性
GIF格式特点
由以上特点看出只有 256 种颜色的 gif 图片不适合作为照片,它适合做对颜色要求不高的图形。
我们知道可以以外链的方式引入 CSS 文件,请谈谈外链引入 CSS 有哪些方式,这些方式的性能有区别吗 ?
CSS 的引入方式最常用的有三种
第一:外链式
这种方法可以说是现在占统治地位的引入方法。
如同 IE 与浏览器。这也是最能体现 CSS 特点的方法;
最能体现 DIV + CSS 中的内容离的思想,也最易改版维护,代码看起来也是最美观的一种。
第二:内部样式表
这种方法的使用情况要少的多,最长见得就是访问量大的门户网站。或者访问量较大的企业网站的首页。
与第一种方法比起来,优弊端也明显。
优点:速度快,所有的 CSS 控制都是针对本页面标签的,没有多余的 CSS 命令;再者不用外链 CSS 文件。直接在文档中读取样式。
缺点:就是改版麻烦些,单个页面显得臃肿,CSS 不能被其他 HTML 引用造成代码量相对较多,维护也麻烦些采用这种方法的公司大多有钱,对他们来说用户量是关键,他们不缺人进行复杂的维护工作。
第三:行内样式
认为 HTML 里不能出现 CSS 命令。其实有时候没有什么大不了。比如通用性差,效果特殊,使用 CSS 命令较少,并且不常改动的地方,使用这种方法反而是很好的选择。
第四、@import 引入方式
<style type="text/css"> @import url(my.css); </style>
CSS Sprite 是什么,谈谈这个技术的优缺点。
加速的关键,不是降低重量,而是减少个数。传统切图讲究精细,图片规格越小越好,重量越小越好,其实规格大小无计算机统一都按 byte 计算。客户端每显示一张图片都会向服务器发送请求。所以,图片越多请求次数越多,造成延迟的可越大。
诚然 CSS Sprites 是如此的强大,但是也存在一些不可忽视的缺点,如下:
CSS Sprites 非常值得学习和应用,特别是页面有一堆 ico(图标)。总之很多时候大家要权衡一下再决定是不是应用 CSS Sprites。
以 CSS3 标准定义一个 webkit 内核浏览器识别的圆角(尺寸随意)
-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;。
优先级算法如何计算?内联和 important 哪个优先级高 ?
css 的基本语句构成是 ?
回答:选择器、属性和属性值。
如果让你来制作一个访问量很高的大型网站,你会如何来管理所有 CSS 文件、JS 与图片?
回答:涉及到人手、分工、同步;
CSS 选择符有哪些 ?哪些属性可以继承 ?优先级算法如何计算 ?新增伪类有那些 ?
CSS 选择符
可继承的样式
font-size,font-family,color,ul,li,dl,dd,dt;
不可继承的样式
border padding margin width height 事实上,宽度也不是继承的,而是如果你不指定宽度,那么它就是 100%。由于你子 DIV 并没有指定宽度,那它就是 100%,也就是与父 DIV 同宽,但这与继承无关,高度自然也没有继承一说。
优先级算法
CSS3 新增伪类举例
CSS3 有哪些新特性 ?
transform: rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);
一个满屏 品字布局 如何设计 ?
第一种方式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>满屏品字布局</title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%;/*此设置非常关键,因为默认的body,HTML高度为0,所以后面设置的div的高度无法用百分比显示*/ } .header{ height:50%; /*此步结合html,body高度为100%,解决元素相对窗口的定位问题*/ width: 50%; background: #ccc; margin:0 auto; } .main{ width: 100%; height: 50%; background: #ddd; } .main .left,.main .right{ float: left;/*采用float方式,对元素进行左右定位*/ width:50%;/*此步解决元素相对窗口的定位问题*/ height:100%;/*此步解决元素相对窗口的定位问题*/ background: yellow; } .main .right{ background: green; } </style> </head> <body> <div class="header"></div> <div class="main"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
效果如下:
为什么要初始化 CSS 样式 ?
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。初始化样式会对 SEO 有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。
初始化 CSS 样式例子
html, body { padding: 0; margin: 0; } ...
collapse、overflow、float 这些特性相互叠加后会怎么样?
margin collapse 我觉得这里的意思应该是 Collapsing margins,即外边距折叠,指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距。
其中所说的 margin 毗邻,可以归结为以下两点:
请解释一下CSS3 的 Flexbox(弹性盒布局模型),以及适用场景 ?
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
任何一个容器都可以指定为 Flex 布局,行内元素也可以使用 Flex 布局。
注意:设为 Flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效。
flex 布局最常用的是什么场景 ?
一般实现垂直居中是一件很麻烦的事,但 flex 布局轻松解决。
.demo { display: flex; justify-content: center; align-items: center; }
用纯 CSS 创建一个三角形的原理是什么?
把上、左、右三条边隐藏掉(颜色设为 transparent)
#demo { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent; }
absolute 的 containing block(容器块) 计算方式跟正常流有什么不同 ?
无论属于哪种,都要先找到其祖先元素中最近的 position 值不为 static 的元素,然后再判断:
补充:
对 BFC 规范(块级格式化上下文:blockformatting context)的理解 ?
W3C CSS 2.1 规范中的一个概念,它是一个独立容器,决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。
用 position: absolute 跟用 float 有什么区别吗 ?
svg 与 convas 的区别 ?
何时应当时用 padding 和 margin ?
何时应当使用 margin
何时应当时用 padding
个人认为:margin 是用来隔开元素与元素的间距;padding 是用来隔开元素与内容的间隔,让内容(文字)与(包裹)元素之间有一段 呼吸距离
。
文字在超出长度时,如何实现用省略号代替 ? 超长长度的文字在省略显示后,如何在鼠标悬停时,以悬浮框的形式显示出全部信息 ?
注意:设置 width,overflow: hidden, white-space: nowrap (规定段落中的文本不进行换行), text-overflow: ellipsis,四个属性缺一不可。这种写法在所有的浏览器中都能正常显示。
CSS 里的 visibility 属性有个 collapse 属性值 ?在不同浏览器下有什么区别 ?
Collapse
position 跟 display、overflow、float 这些特性相互叠加后会怎么样 ?
对 BFC 规范(块级格式化上下文:block formatting context) 的理解 ?
BFC 规定了内部的 Block Box 如何布局。
定位方案:
计算 BFC 的高度时,浮动元素也会参与计算。
满足下列条件之一就可触发 BFC:
浏览器是怎样解析 CSS 选择器的 ?
元素竖向的百分比设定是相对于容器的高度吗 ?
当按百分比设定一个元素的宽度时,它是相对于父容器的宽度计算的。
全屏滚动的原理是什么 ?用到了 CSS 的哪些属性 ?
原理
什么是响应式设计 ?响应式设计的基本原理是什么 ?如何兼容低版本的 IE ?
<meta name="viewport" content="” width="device-width" initial-scale="1" maximum-scale="1" user-scalable="no"/>
视差滚动效果 ?
视差滚动(Parallax Scrolling)通过在网页向下滚动的时候,控制背景的移动速度比前景的移动速度慢
来创建出令人惊叹的 3D 效果。
::before 和 :after 中双冒号和单冒号有什么区别 ?解释一下这 2 个伪元素的作用
:before 和 :after 这两个伪元素,是在 CSS2.1 里新出现的。起初,伪元素的前缀使用的是单冒号语法,但随着 Web 的进化,在 CSS3 的规范里,伪元素的语法被修改成使用双冒号,成为 ::before、 ::after 。
怎么让 Chrome 支持小于 12px 的文字 ?
p { font-size: 10px; -webkit-transform: scale(0.8); // 0.8 是缩放比例 }
让页面里的字体变清晰,变细用 CSS 怎么做 ?
-webkit-font-smoothing 在 window 系统下没有起作用,但是在 IOS 设备上起作用 -webkit-font-smoothing:antialiased 是最佳的,灰度平滑。
如果需要手动写动画,你认为最小时间间隔是多久,为什么 ?
多数显示器默认频率是 60Hz,即 1 秒刷新 60 次,所以理论上最小间隔为:1/60*1000ms = 16.7ms。
有一个高度自适应的 div,里面有两个 div,一个高度 100px,如何让另一个填满剩下的高度 ?
png、jpg、gif 这些图片格式解释一下,分别什么时候用。有没有了解过webp ?
style 标签写在 body 后与 body 前有什么区别?
页面加载自上而下,当然是先加载样式。
写在 body 标签后,由于浏览器以逐行方式对 HTML 文档进行解析,当解析到写在尾部的样式表(外联或写在style标签)会导致浏览器停止之前的渲染,等待加载且解析样式表完成之后重新渲染,在 windows 的 IE 下可能会出现 FOUC 现象(即样式失效导致的页面闪烁问题)
阐述一下CSS Sprites
将一个页面涉及到的所有图片都包含到一张大图中去,然后利用 CSS 的 background-image,background-repeat,background-position 的组合进行背景定位。
利用 CSS Sprites 能很好地减少网页的 http 请求,从而大大的提高页面的性能;CSS Sprites 能减少图片的字节。
用 css 实现左侧宽度自适应,右侧固定宽度 ?
1、标准浏览器的方法
当然,以不折腾人为标准的 w3c 标准早就为我们提供了制作这种自适应宽度的标准方法。
代码很少,而且不会有额外标签。不过这是 IE7 及以下都无效的方法。
.container { display: table; width: 100%; } .main { display: table-cell; } .sidebar { display: table-cell; width: 300px; }
2、固定区域浮动,自适应区域不设置宽度但设置 margin
.container { overflow: hidden; *zoom: 1; } .sidebar { float: right; width: 300px; background: #333; } .main { margin-right: 320px; background: #666; } .footer { margin-top: 20px; background: #ccc; }
其中,sidebar 让它浮动,并设置了一个宽度;而 main 没有设置宽度。
大家要注意 html 中必须使用 div 标签,不要妄图使用什么 p 标签来达到目的。因为 div 有个默认属性,即如果不设置宽度,那它会自动填满它的父标签的宽度。这里的 main 就是例子。
当然我们不能让它填满了,填满了它就不能和 sidebar 保持同一行了。我们给它设置一个 margin。由于 sidebar 在右边,所以我们设置 main 的 margin-right 值,值比 sidebar 的宽度大一点点——以便区分它们的范围,例子中是 320。
假设 main 的默认宽度是 100%,那么它设置了 margin 后,它的宽度就变成了 100% - 320,此时 main 发现自己的宽度可以与 sidebar 挤在同一行了,于是它就上来了。而宽度 100% 是相对于它的父标签来的,如果我们改变了它父标签的宽度,那 main 的宽度也就会变——比如我们把浏览器窗口缩小,那 container 的宽度就会变小,而 main 的宽度也就变小,但它的实际宽度 100% - 320 始终是不会变的。
这个方法看起来很完美,只要我们记得清除浮动(这里我用了最简单的方法),那 footer 也不会错位。而且无论 main 和 sidebar 谁更长,都不会对布局造成影响。
但实际上这个方法有个很老火的限制——html 中 sidebar 必须在 main 之前!但我需要 sidebar 在 main 之后!因为我的 main 里面才是网页的主要内容,我不想主要内容反而排在次要内容后面。但如果 sidebar 在 main 之后,那上面的一切都会化为泡影。
3、固定区域使用定位,自适应区域不设置宽度,但设置 margin
.container { position: relative; } .sidebar { position: absolute; top: 0; right: 0; width: 300px; background: #333; } .main { margin-right: 320px; background: #666; }
咦,好像不对,footer 怎么还是在那儿呢?怎么没有自动往下走呢?footer 说——我不给绝对主义者让位!其实这与 footer 无关,而是因为 container 对 sidebar 的无视造成的——你再长,我还是没感觉。看来这种定位方式只能满足 sidebar 自己,但对它的兄弟们却毫无益处。
4、左边浮动,右边 overflow: hidden;
*{ margin:0; padding: 0; } html,body{ height: 100%;/*高度百分百显示*/ } #left { width: 300px; height: 100%; background-color: #ccc; float: left; } #right { height: 100%; overflow: hidden; background-color: #eee; }
第二种方法,我利用的是创建一个新的 BFC(块级格式化上下文)来防止文字环绕的原理来实现的。
BFC 就是一个相对独立的布局环境,它内部元素的布局不受外面布局的影响。它可以通过以下任何一种方式来创建:
关于 BFC,在 w3c 里是这样描述的:在 BFC 中,每个盒子的左外边框紧挨着 包含块 的 左边框 (从右到左的格式化时,则为右边框紧挨)。即使在浮动里也是这样的(尽管一个包含块的边框会因为浮动而萎缩),除非这个包含块的内部创建了一个新的 BFC。这样,当我们给右侧的元素单独创建一个 BFC 时,它将不会紧贴在包含块的左边框,而是紧贴在左元素的右边框。
问:浮动的原理和工作方式,会产生什么影响呢,要怎么处理 ?
工作方式:浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
影响
在使用基于浮动设计的 CSS 框架时,自会提供清除的方法,个人并不习惯使用浮动进行布局。
对 CSS Grid 布局的使用
5 分钟学会 CSS Grid 布局
rem、em、px、vh 与 vw 的区别 ?
一、 rem 的特点
html
根目录下的字体大小进行计算的。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了 IE8 及更早版本外,所有浏览器均已支持 rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用 rem 设定的字体大小。
二、px 特点
三、em 特点
所有未经调整的浏览器一般都符合: 1em = 16px。那么 12px = 0.75em,10px = 0.625em。为了简化 font-size 的换算,需要在 css 中的 body 选择器中声明 Fontsize = 62.5%,这就使 em 值变为 16px*62.5% = 10px, 这样 12px = 1.2em, 10px = 1em, 也就是说只需要将你的原来的 px 数值除以 10,然后换上 em 作为单位就行了。
四、vh 与 vw
视口
vh / vw 与 %
单位 |
解释 |
---|---|
vw |
1vw = 视口宽度的 1% |
vh |
1vh = 视口高度的 1% |
vmin |
选取 vw 和 vh 中最小的那个 |
vmax |
选取 vw 和 vh 中最大的那个 |
比如:浏览器视口尺寸为 370px,那么 1vw = 370px * 1% = 6.5px (浏览器会四舍五入向下取 7)
vh / vw 与 % 区别
单位 |
解释 |
---|---|
% |
元素的祖先元素 |
vh / vw |
视口的尺寸 |
不过由于 vw 和 vh 是 css3 才支持的长度单位,所以在不支持 css3 的浏览器中是无效的。
什么叫优雅降级和渐进增强 ?
区别
前端硬核面试专题的完整版在此:前端硬核面试专题,包含:HTML + CSS + JS + ES6 + Webpack + Vue + React + Node + HTTPS + 数据结构与算法 + Git 。