1、列举出通过CSS样式隐藏元素的方法，并说明其区别。
2、CSS3的box-sizing的取值及各值的说明。
3、Flex布局实现容器box内部元素item垂直居中对齐。
.box { display: flex; align-items: center }
4、写出所有浏览器兼容display:inline-block的hack。
- inline-block指同时拥有内联元素（显示在一行）和块元素（可以设置宽高）的特性。
- hack指兼容ie的方法,具体有以下三种方法 ：
1 /*方法1*/ 2 div { display:inline-block; } /*触发块元素*/ 3 div { display:inline; } /*使得块元素呈递为内联对象*/ 4 /* 两个display需先后放在两个CSS声明 */ 6 /*方法2*/ 7 div { 8 display:inline; /*设置为内联元素*/ 9 zoom:1; /*触发块元素的layout*/ 10 } 12 /*方法3*/ 13 div{ 14 display:inline-block; 15 display:inline; /*触发ie的layout*/ 16 zoom:1 ； 17 }
5、li:nth-child(2n+1)代表什么意思?
父元素下的子元素中序号为基数的元素
6、写出position的所有值和意义？
1、static: position的默认值，对象遵循文档流，top、bottom、left、right等属性不会被应用。
2、relative: 对象遵循文档流，但将依据top,bottom,left,right属性在文档流中偏移位置，其层叠通过z-index定义。
3、absolute: 对象脱离文档流，依据top、bottom、left、right属性相对于其含有position属性为relative或absolute的父元素（若没有则不断向上查找，直到body为止）中进行定位，其层叠通过z-index定义。
4、fixed:对象脱离文档流，其依据top、bottom、left、right属性相对于浏览器窗口进行定位，即便出现滚动条，对象也不会随着滚动而位置变化，层叠关系通过z-index定义。
7、写出box-sizing的所有属性值和意义。
a. content-box：默认，w3c标准盒模型。 外盒：元素空间尺寸 = width/height（内容高度/宽度）+ padding + border + margin 内盒：元素大小 = width/height(内容高度/宽度) + padding + border + margin
b. border-box ：IE盒模型。 外盒：元素空间尺寸 = width/height(内容高度/宽度 + padding + border) + margin 内盒：元素大小 = width/height（内容高度/宽度 + padding + border) 可以用来避免增加padding大小的时候，内容撑出.
c. inherit 继承父元素的盒模型
8、display:none;与visibility:hidden;的区别 。
布局方式相同，唯一的区别在inline-block可以设置宽高，inline不可以。另外：inline设置上下内边距和上下外边距会造成一些mess。
9、display:inline-block，block，inline的区别与用法
一、首先要了解什么是块级元素与行级元素
块级元素
会占领页面的一行，其后多个block元素自动换行、 可以设置width，height，设置了width后同样也占领一行、同样也可以设置 margin与padding属性。
ps:常见的块级元素:div,img,ul,form,p等
行级元素
与其他元素在同一行上，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。
ps：em，strong，br,input等
10、display:inline-block，block，inline元素的区别
1、display：block将元素显示为块级元素，从而可以更好地操控元素的宽高，以及内外边距，每一个块级元素都是从新的一行开始。
2、display : inline将元素显示为行内元素，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。多个相邻的行内元素排在同一行里，知道页面一行排列不下，才会换新的一行。
3、display：inline-block看上去值名inline-block是一个混合产物，实际上确是如此，将元素显示为行内块状元素，设置该属性后，其他的行内块级元素会排列在同一行。比如我们li元素一个inline-block，使其既有block的宽度高度特性，又有inline的同行特性，在同一行内有不同高度内容的元素时，通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。
例：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>display:inline-block</title> <style type="text/css"> li{ width:200px; text-align: center; list-style: none; display: inline-block; background-color: #eee; } </style> </head> <body> <ul> <li><a href="#">inline-block</a></li> <li><a href="#">inline-block</a></li> <li><a href="#">inline-block</a></li> <li><a href="#">inline-block</a></li> <li><a href="#">inline-block</a></li> </ul> </body> </html>
11、display:inline-block，block，inline示例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> #inline p{ display: inline; background-color:red ; width:300px;/*这里设置无用*/ } #inline-block p{ display: inline-block; background-color:red ; width:100px; padding:10px; } #block p{ display: block; background-color: red; width:100px; padding:20px; } div{ margin:20px; background-color: #eee; } </style> </head> <body> <div id="inline"> display:inline 在同一行，并且宽度就等于文字内容的宽度且设置宽度无用<p>内容内容内容内容内容内容内容</p>内容内容内容内容内容内容 </div> <div id="inline-block"> display:inline-block 既有行级元素的特性，也有块级元素的特性，因此在同一行，能设置宽高，margin，padding<p>内容内容内容内容内容内容内容</p>内容内容内容内容内容内容 </div> <div id="block"> display:block 块级元素会自动换新行，占领一行,可以设置宽高，margin，padding <p>内容内容内容内容内容内容内容</p>内容内容内容内容内容内容 </div> </body> </html>
需要注意的是：
低版本的ie浏览器（ie6 ie7）是不支持display:inline-block;所以理论上ie是不识别的，但是在 ie 内核下有个部分叫做 hasLayout，只要触发了它，这个元素就可以设置高宽从而使行级元素拥有了display:inline-block属性的表象。
9、如何去除img元素底部的空白
10、盒模型：ie模型和标准模型，手写出来
11、css尺寸单位。em是相对于什么，百分比相对于什么
12、px和em的区别?
px和em都是长度单位;
区别是:
px的值是固定的，指定是多少就是多少， 计算比较容易。
em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px; 所以未经调整的浏览器都符合: 1em=16px; 那么12px=0.75em, 10px=0.625em
13、CSS 去掉inline-block元素间隙的几种方法?
间隙是怎么来的:
间隙是由换行或者回车导致的;
只要把标签写成一行或者 标签直接没有空格，就不会出现间隙;
怎么去除?
方法1: 元素间的间隙出现的原因 是元素标签之间的空格， 把空格去掉间隙自然就会消失。 <div class="itlike"> <span>撩课itlike</span><span>撩课itlike</span> </div>
方法2: 利用HTML注释标签 <div class="demo"> <span>撩课itlike</span><!-- --><span>撩课itlike</span> </div>
方法3: 取消标签闭合 <div class="demo"> <span>撩课itlike <span>撩课itlike <span>撩课itlike <span>撩课itlike </div>
方法4: 在父容器上使用font-size:0;可以消除间隙 <div class="demo"> <span>撩课itlike</span> <span>撩课itlike</span> <span>撩课itlike</span> <span>撩课itlike</span> </div> .demo {font-size: 0;}
14 盒模型
页面渲染时，dom 元素所采用的 布局模型。可通过box-sizing进行设置。根据计算宽高的区域可分为：
- content-box (W3C 标准盒模型)
- border-box (IE 盒模型)
- padding-box
- margin-box
15. BFC
块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
IE下为 Layout，可通过 zoom:1 触发
- 触发条件:
- 根元素
- position: absolute/fixed
- display: inline-block / table
- float 元素
- ovevflow !== visible
- 规则:
- 属于同一个 BFC 的两个相邻 Box 垂直排列
- 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
- BFC 中子元素的 margin box 的左边， 与包含块 (BFC) border box的左边相接触 (子元素 absolute 除外)
- BFC 的区域不会与 float 的元素区域重叠
- 计算 BFC 的高度时，浮动子元素也参与计算
- 文字层不会被浮动层覆盖，环绕于周围
- 应用:
- 阻止margin重叠
- 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中)
- 自适应两栏布局
- 可以阻止元素被浮动元素覆盖
16.层叠上下文
元素提升为一个比较特殊的图层，在三维空间中 (z轴) 高出普通元素一等。
- 触发条件
- 根层叠上下文(html)
- position
- css3属性
- flex
- transform
- opacity
- filter
- will-change
- -webkit-overflow-scrolling
- 层叠等级：层叠上下文在z轴上的排序
- 在同一层叠上下文中，层叠等级才有意义
- z-index的优先级最高
17. 居中布局
- 水平居中
- 行内元素: text-align: center
- 块级元素: margin: 0 auto
- absolute + transform
- flex + justify-content: center
- 垂直居中
- line-height: height
- absolute + transform
- flex + align-items: center
- table
- 水平垂直居中
- absolute + transform
- flex + justify-content + align-items
18. 选择器优先级
- !important > 行内样式 > #id > .class > tag > * > 继承 > 默认
- 选择器 从右往左 解析
19.去除浮动影响，防止父级高度塌陷
- 通过增加尾元素清除浮动
- :after / <br> : clear: both
- 创建父级 BFC
- 父级设置高度
20. CSS预处理器(Sass/Less/Postcss)
CSS预处理器的原理: 是将类 CSS 语言通过 Webpack 编译 转成浏览器可读的真正 CSS。在这层编译之上，便可以赋予 CSS 更多更强大的功能，常用功能:
- 嵌套
- 变量
- 循环语句
- 条件语句
- 自动前缀
- 单位转换
- mixin复用
面试中一般不会重点考察该点，一般介绍下自己在实战项目中的经验即可~
20.CSS动画
- transition: 过渡动画
- transition-property: 属性
- transition-duration: 间隔
- transition-timing-function: 曲线
- transition-delay: 延迟
- 常用钩子: transitionend
- animation / keyframes
- animation-name: 动画名称，对应@keyframes
- animation-duration: 间隔
- animation-timing-function: 曲线
- animation-delay: 延迟
- animation-iteration-count: 次数
- infinite: 循环动画
- animation-direction: 方向
- alternate: 反向播放
- animation-fill-mode: 静止模式
- forwards: 停止时，保留最后一帧
- backwards: 停止时，回到第一帧
- both: 同时运用 forwards / backwards
- 常用钩子: animationend
- 动画属性: 尽量使用动画属性进行动画，能拥有较好的性能表现
- translate
- scale
- rotate
- skew
- opacity
- color
21.CSS 设置文字只显示一行，多余显示省略号
CSS 设置文字只显示一行，多余显示省略号
.view-text{
/**
思路：
1.设置inline-block属相
2.强制不换行
3.固定高度
4.隐藏超出部分
5.显示“……”
*/
display: inline-block;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow:ellipsis;
}CSS 设置文字显示多行
/**
思路：
1.超出的文本隐藏
2.溢出用省略号显示
3.溢出不换行
4.将对象作为弹性伸缩盒子模型显示
5.从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
6.这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数
*/
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}22. 排除第一个元素的选择器：注意这里有理解上的误差，
:first-child，匹配的是在其父元素基础上满足的第一个元素。
:first-of-type选择器匹配属于其父元素的特定类型的首个子元素的每个元素。等同于:nth-of-type(1)。
:not(:first-child);若失败可以用
p:first-of-type{
background:#ff0000;
}
/*或者*/
p:nth-of-type(1){
background:#ff0000;
}
扫一扫
1733
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
