css部分
两种盒模型分别说一下。
- CSS 盒模型本质上是一个盒子,盒子包裹着HTML 元素,盒子由四个属性组成,从内到外分别是:content 内容、padding 内填充、border 边框、外边距 margin。
-
两种盒模型的区别:宽度和高度的计算方式不同。
-
w3c盒模型(标准盒模型)
width = content-width
height = content-height -
ie盒模型(怪异和模型)
width = content-width + padding-width + border-width
height = content-height + padding-height + border-height
如何垂直居中?
- flex布局:display:flex; justify-content: center; align-items: center;
-
父display:table;子display:table-cell、vertical-align:middle;它俩在一起可以解决居中的问题。
-
父height、line-height;子display:inline-block、vertical-align:middle、line-height;居中。
Flex 怎么用,常用属性有哪些?
- Flex意为:‘弹性布局’
- flex-direction:row(水平)、column(垂直)
- justify-content:center(居中)、flex-start(起始点顶部对齐)、flex-end(终点底部对齐)、
space-between:两端对齐,组件之间的间隔都相等。
space-around:距边界两侧的间隔相等,元素之间的间隔比项目与边框的间隔大一倍。
- align-items:center(居中)、flex-start(起始点顶部对齐)、flex-end(终点底部对齐)
- flex-wrap:nowrap(不换行)、wrap(换行)
Grid布局用过吗?
- grid是栅格布局系统
- display:grid;
grid-template-columns设置列宽
grid-template-row设备行高
grid-gap 网格项间隙
BFC 是什么?
- BFC(Block formatting context)直译为"块级格式化上下文"。
- 属于同一个BFC的两个相邻Box的margin会发生重叠。
-
1.利用BFC避免margin重叠。
2.自适应两栏布局。
3.清楚浮动。
CSS 选择器优先级
- !important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
CSS 中 class 和 ID 的区别
- id和class都是选择器,唯一不同的地方在于权重不同。id > class。
- class可重复,id是唯一的。
CSS reset 和 CSS normalize是什么?
- CSS reset重置默认样式。删除浏览器内置样式。
-
CSS normalize Normalize.css是一种CSS reset的替代方案。
1、保护有用的浏览器默认样式而不是完全去掉它们
2、修复浏览器自身的bug并保证各浏览器的一致性
3、优化CSS可用性:用一些小技巧
4、Normalize.css是模块化的
浮动 (Floats)元素有哪些特性?
- 任何定义为float的元素都会自动被设置为一个块状元素显示。
- 当我们没有指定浮动元素宽度时,浮动元素会自动收缩到能够包含内容的宽度。
- 浮动模型不会与流动模型发生冲突
清除浮动说一下
- 1.对父元素中最后一个元素清除浮动。div style=”clear:both”。
- 给父元素添加overflow:hidden
- 2.对父元素加样式.clearifix样式。.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }.clearfix { *zoom:1; }
z-index和叠加上下文是如何形成的?
-
在一个层叠上下文,所有的元素根据规则从下到上排列,分成七个等级。
1、背景和边框 - 元素的背景和边边框。层叠上下文中的最低等级。
2、负z-index值 - 有着负z-index值的子元素。
3、块级盒 - 文档流中非定位子元素。
4、浮动盒 - 非定位浮动元素。
5、行内盒 - 文档流中行内级别非定位子元素。
6、z-index:0 - 定位元素。这些元素形成新的层叠上下文。
7、正z-index值 - 定位元素。层叠上下文中的最高等级。
层叠上下文七种层叠等级示意图
CSS sprites是什么
- 多个图像组合成一个称为精灵表或拼贴图的单个图像,用户不下载多个文件,而是下载单个文件并通过偏移文件显示必要的图像。
字体图标和svg图标用过吗
- iconfont阿里巴巴图标库。
- Element和antd vue ui中的icon。
你日常工作是如何处理浏览器兼容的?
- 浏览器中内置样式,使用css normalize进行样式和浏览器的兼容。
-
Margin不一致的问题:
当有多张图片需要排在一行时,我们通常使用“Float:Left”来实现,这样一来,浏览器就存在兼容性问题。导致图片与后面的内容存在margin不一致的问题。对此一种解决方法就是给图片添加“Display:inline”项即可。 -
DIV居中问题:
通常我们会利用“vertical-align:middle”来实现,这对于搜狗浏览器来说,是正常的,但是对于IE浏览器来说,却并没有效果。对此,一种较好的解决方法是:将文字的行高设置与DIV一样时即可解决问题。 -
设置较小高度标签(一般小于10px),在ie6,ie7,遨游中高度超出自己设置高度
给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
如何为有功能限制的浏览器提供网页?
渐进增强,优雅降级是什么?
- 渐进增强 progressive enhancement:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
- 优雅降级 graceful degradation:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
有哪些的隐藏内容的方法?
- display:none;删除dom树上的节点。
- visibility: hidden ;文档流的位置变空,会占页面上的空间。
- overflow:hidden;
- 内容透明度设置为0
栅格系统是什么
你用过媒体查询吗?
- 响应式布局
- @media screen and (min-width: 400px) and (max-width: 700px) { … }
如何优化网页的打印样式?
- 1、打印样式表中最好不要用背景图片,因为打印机不能打印CSS中的背景。如要显示图片,请使用html插入到页面中。
- 2、最好不要使用像素作为单位,因为打印样式表要打印出来的会是实物,所以建议使用pt和cm。
- 3、隐藏掉不必要的内容。(@print div{display:none;})
- 4、打印样式表中最好少用浮动属性,因为它们会消失。
- 5、如果想要知道打印样式表的效果如何,直接在浏览器上选择打印预览就可以了。
如果设计中使用了非标准的字体,你该如何去实现?
- 1、用图片代替。
- 2、使用在线字库。
浏览器是如何判断元素是否匹配某个 CSS 选择器?
- 首先浏览器会生成一个元素集合,这个集合一般是由最后一个索引生成的(如果没有索引就是所有元素的集合)。随后,从后向前匹配,如果不符合上一部分,就将这个元素从集合中删掉,如此操作直至整个集合都遍历完成,最后剩下的元素就是匹配当前CSS选择器的。
伪元素 (pseudo-elements) 有什么用?
- 可以不用再多写一个 dom; 可以用 content 搭配出很多效果
列出你所知道的 display 属性的全部值
- block、inline、flex、grid、list-item、table、table-cell、content、 inline-block、inline-flex
inline 和 inline-block 的区别
- inline - 内联元素特点:1、和其他元素都在一行上;2、元素的高度、宽度及顶部和底部边距不可设置;3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
- inline-block - 内联块状元素:1、和其他元素都在一行上;2、元素的高度、宽度、行高以及顶和底边距都可设置。
relative、fixed、absolute 和 static 元素的区别?
- relative(相对定位):生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常(原先本身)位置进行定位。可通过z-index进行层次分级。
- fixed(固定定位):生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
- absolute(绝对定位):生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
- static(静态定位):默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
响应式设计 (responsive design) 和自适应设计 (adaptive design) 不同?
- 响应式是通过视口分辨率识别不同客户端展现不同的布局和内容,一套代码。(bootstrap)
- 自适应是为不同类别的设备建立不同的网页,检测到设备分辨率大小后调用相应的网页。多套代码。
为什么提倡使用 translate() 而非 不是 absolute?
- translate()是transform的一个值。
- 改变transform或opacity不会触发浏览器重新布局(reflow)或重绘(repaint),只会触发复合(compositions)
- transform使浏览器为元素创建一个 GPU 图层;translate改变位置时,元素依然会占据其原始空间。
- 而改变绝对定位会触发重新布局,进而触发重绘和复合。改变绝对定位会使用到 CPU。
- 因此translate()更高效,可以缩短平滑动画的绘制时间。