1、display的属性/效果
none | 此元素不会被显示。 |
block | 此元素将显示为块级元素,此元素前后会带有换行符。 |
inline | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |
inline-block | 行内块元素。(CSS2.1 新增的值) |
list-item | 此元素会作为列表显示。 |
run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
compact | CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
marker | CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
table | 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 |
inline-table | 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 |
table-row-group | 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 |
table-header-group | 此元素会作为一个或多个行的分组来显示(类似 <thead>)。 |
table-footer-group | 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 |
table-row | 此元素会作为一个表格行显示(类似 <tr>)。 |
table-column-group | 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 |
table-column | 此元素会作为一个单元格列显示(类似 <col>) |
table-cell | 此元素会作为一个表格单元格显示(类似 <td> 和 <th>) |
table-caption | 此元素会作为一个表格标题显示(类似 <caption>) |
inherit | 规定应该从父元素继承 display 属性的值。 |
2、position的属性/效果
absolute | 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed | 生成固定定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
relative | 生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
sticky | 粘性定位,该定位基于用户滚动的位置。 它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。 注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。 |
inherit | 规定应该从父元素继承 position 属性的值。 |
initial | 设置该属性为默认值,详情查看 CSS initial 关键字。 |
3、什么是伪类、伪元素
- 伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息;
- 伪元素本质上是创建了一个有内容的虚拟容器;
- 伪类:用于向某些选择器添加特殊的效果(如::link 选择未访问的链接;:visited 选择已访问的链接;:hover 选择鼠标指针移入链接;:active 被激活的链接,即按下单击鼠标左键但未松开;)
- 伪元素:用于将特殊的效果添加到某些选择器(如:::before / :before在某个元素之前插入一些内容;::after / :after在某个元素之后插入一些内容)
4、css选择器的权重关系是怎样的
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
5、实现不定宽高的元素水平居中的方式有哪些
方案一:
.wraper{
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
}
方案二:
.wraper{
display:-webkit-flex;
justify-content:center; //水平居中
align-items:center; //垂直居中
}
6、物理像素、css像素、设备独立像素都是什么
物理像素:物理像素,设备能控制显示的最小单位,我们常说的1920×1080像素分辨率就是用的设备像素单位
css像素:适用于web编程,指的是我们在样式代码中使用到的逻辑像素,是一个抽象概念,实际并不存在
设备独立像素:与设备无关的逻辑像素,代表可以通过程序控制使用的虚拟像素,是一个总体概念,包括了CSS像素
7、查找DOM、操作DOM的方法有哪些
8、事件委托是指什么
它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。
9、什么是伪数组
这里把符合以下条件的对象称为伪数组: 1,具有length属性 2,按索引方式存储数据 3,不具有数组的push,pop等方法
10、var、let、const区别是什么,什么是变量提升
var声明的变量会挂载在window上,而let和const声明的变量不会
var声明变量存在变量提升,let和const不存在变量提升
let和const声明形成块作用域
同一作用域下let和const不能声明同名变量,而var可以
const一旦声明必须赋值,不能使用null占位,声明后不能再修改,如果声明的是复合类型数据,可以修改其属性
11、[1,2,3].map(parseInt)的执行结果,为什么
12、匹配0-1000闭区间的正则表达式
13、实现一个深拷贝函数
14、实现一个js原型继承的例子
15、列举出可以实现输出1/2/3,要求一秒打印一次的方式