【CSS】面试题
css单位
- px：像素，相对于显示器屏幕分辨率
- em：相对于当前元素的font-size
- rem：相对于html根元素。html{font-size:62.5%}
- vw：视窗宽度的1%
- vh：视窗高度的1%
渐进增强，优雅降级
渐进增强：一开始针对低版本浏览器进行构建，完成基本功能，然后逐步添加那些只有高级浏览器才支持的效果、交互，功能。
.transition { /*渐进增强写法*/
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
优雅降级：一开始构建完整的功能，再针对低版本浏览器进行兼容。
.transition { /*优雅降级写法*/
transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
}
浏览器内核
浏览器内核分为渲染引擎和JS引擎。渲染引擎负责获得网页的内容(html、xml)、整理讯息(例如加入CSS)，以及计算网页的显示方式，然后输出至显示器或打印器。JS引擎负责解析JS。
Trident（IE内核）：IE
Gecko（火狐内核）：Firefox
Blink：Opera、Chrome（以前webkit，现在Blink）
Webkit：Safari
-webkit-transform:rotate(-3deg); /Safari*/ -moz-transform:rotate(-3deg); /*为Firefox*/ -ms-transform:rotate(-3deg); /*为IE*/ -o-transform:rotate(-3deg); /*为Opera*/Chrome/ transform:rotate(-3deg);
盒子模型
标准盒子模型、IE盒子模型、box-sizing
CSS3新增伪类
p:first-of-type 选择属于其父元素的首个元素 p:last-of-type 选择属于其父元素的最后元素 p:only-of-type 选择属于其父元素唯一的元素 p:only-child 选择属于其父元素的唯一子元素 p:nth-child(2) 选择属于其父元素的第二个子元素 :enabled :disabled 表单控件的禁用状态。 :checked 单选框或复选框被选中。
居中
块级
border: 1px solid red; margin: 0 auto; height: 50px; width: 80px;
绝对定位元素margin或transform
flex居中父{display:flexjustify-content:center,align-item:center;}子{flex：auto}
display
none，inline，block，inline-block，table，list-item，flex
position
- static：默认，按照正常文档流
- relative：相对定位，不脱离文档流，相对其正常位置进行定位
- absolute：绝对定位，参考最近的不为static的父元素定位，通过left，top，right，bottom规定
- fixed：固定定位，相对浏览器窗口进行定位，通过left，top，right，bottom规定
- inherit：从父元素继承
visibility
- visible：默认，元素可见
- hidden：元素不可见
- collapse：对表格元素可以删除一行或一列，不影响表格布局。其他元素上呈现为hidden
- inherit：从父元素继承
不同浏览器上的行为：
- chrome中，使用collapse值和使用hidden没有区别。
- firefox，opera和IE，使用collapse值和使用display：none没有什么区别。
position、display、float优先级
position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。
三角形
width:0; height:0; border-top:40px solid transparent; border-left:40px solid transparent; border-right:40px solid transparent; border-right:40px solid #ff0000;
BFC块级格式化上下文（Bock Formatting context）
BFC是一个独立的渲染布局环境。规定了内部block-lever Box如何布局，并且与区域外毫不相干。
BFC布局规则：
- 内部box垂直方向上一个接一个放置
- box垂直方向上的距离有margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个盒子（块盒和行盒）的左margin与包含快的左border贴合。
- BFC区域不会与浮动盒子重叠
- BFC独立容器，不影响外面元素，外面也影响不了里面
- 计算BFC的高度时浮动元素也会参与计算
如何创建BFC
- float值不是none
- position值不是static或relative
- display值为inline-block、flex，table-cell、table-caption
- overflow不为visible
- 根元素html
浮动
浮动元素碰到包含它的边框或浮动元素的边框会停留。由于浮动元素不在文档流中，所以文档流的块框变现就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。清除浮动主要是为了解决父元素因为子元素浮动引起的高度塌陷的问题
出现清楚浮动的情况：1.当父元素不给高度的时候，内部元素不浮动时会撑开，而浮动的时候，父元素变成一条线。
清除浮动：
- 额外标签clear:both,添加了无意义标签，但是父元素还是塌陷的
- 父元素指定高度
- 父元素添加overflow:hidden或者auto，通过触发BFC方式，实现清除浮动
- 使用after伪元素清楚浮动::after{content:"",display:block;height:0;clear:both;visibility:hidden;},父定义zoom
参考文档：https://www.jianshu.com/p/2c1708a73438
元素竖向百分比
元素竖向百分比是相对于父元素的宽度计算的。
响应式设计
响应式设计是一个网站能兼容多个终端。通过媒体查询监测不同的设备屏幕尺寸做处理。
// head标签中加入 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
然后使用media queries
@media screen and (max-width: 980px) {
#head { … }
#content { … }
#footer { … }
}
16.line-height
行高指一行为的高度，具体来说是两行文字间基线的距离。
单行文字居中设置line-height和height一样即可
多行文本居垂直居中需要设置display属性为inline-block
17.Chrome支持小于12px的字体
{font-size:10px;-webkit-transform:scale(0.8);
18.单行文字缩略
{overflow：hidden；white-space：nowrap；text-overflow：ellipsis；}
word-wrap：break-word对长不可分割单词进行换行(允许断句)
word-break：break-all 对非日韩进行换(怎样断句)
19.有一个高度自适应div，里面有两个div，一个高度100px，希望另一个填满
父div的position为relative。高度自适应的position:absolute;top100px;bottom:0;left:0;
20.浏览器如何解析CSS选择器
从右向左解析。节省性能。解析完毕将结构与DOM Tree一起分析简历Render Tree，最终用来进行绘图。
21.浏览器兼容性问题
1.Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
2.超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}
3.标签默认属性不一样，初始化CSS样式
22.png、jpg、gif
png是便携式网络图片，无损数据压缩位图文件格式，压缩比高，色彩好
jpg针对相片失真压缩方法，在色调及颜色平滑变化做的不错。
gif一种位图文件格式，以8为色重现真色彩的图像。实现动画效果。
23.overflow
scroll滚动条
auto子元素大于父时出现滚动条
visible溢出
hidden 溢出隐藏
24.雪碧图
把一个页面涉及到的所有图片都包含到一张大图中去。利用
background-imgae
background-repeat
background-position
减少HTTP请求，提高页面性能，减少图片字节
25.两栏布局
- float+margin-left
- absolute+left+top
- flex
26.三栏布局
- float+margin-left+marign-right
- absolute+left+right、
- flex
- 圣杯布局
- 双飞翼布局
27.css选择器
id选择器，类选择器，标签选择器，相邻（h1+p），子选择器（ul>li），后代选择器（li a），通配符（*），属性选择器a[rel=""]，伪类选择器（a:hover，li:nth-child），伪元素
优先级算法：A,B,C,D
内联>id>类，属性，伪类>标签，伪元素
28.css3新增伪类
x:first-of-type → 选择属于其父元素的首个 <x> 元素的每个 <x> 元素 x:last-of-type → 选择属于其父元素的最后一个 <x> 元素的每个 <x> 元素 x:only-of-type 选择属于其父元素唯一的 <x> 元素的每个 <x> 元素 x:only-child 选择属于其父元素的唯一子元素的每个 <x> 元素 x:nth-child(1) 选择属于其父元素的第一个子元素的每个 <x> 元素 :enabled 每个已启用的元素（多用于表单元素 例如input） :disabled 控制表单控件的禁用状态 :checked，单选框或复选框被选中 :before在元素之前添加内容（可用来做清除浮动） :after在元素之后添加内容
29.伪类和伪元素的区别
伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性 而不是元素的di、class、属性等静态的标签 由于状态是动态变化的，所以一个元素达到一个特定状态时，他可能得到伪类的样式；当状态改变时，他又失去这个样式。 由此可以看出，他的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类 （:first-child :link :visitive :hover :focus :lang） 伪元素： 与伪类针对特殊状态的元素不同的是，伪元素对元素中的特定内容进行操作， 它所操作的层次比伪类更深一层， 也因此它的动态性比伪类要低得多。它控制的内容实际上和元素是相同的， 但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素 （:first-line :first-letter :befoe :after)
浙公网安备 33010602011771号