(接上篇前端面试问题整理(HTML方向))
三、问题整理(CSS)
1. 添加CSS样式的方式有哪几种?
- 内联样式:在HTML元素中使用
style
属性
- 内部样式表:在HTML文档的头部
区域内使用
元素来包含样式表
- 外部引用:用
链接外部的CSS文档
2. CSS选择器有哪些?
- 通配选择器
* {}
- 标签选择器
h1 {}
- ID选择器(ID不能以数字开头)
#container {}
- 类选择器
.redbox {}
- 属性选择器
a[href="https://example.org"] {}
- 伪类选择器:同一个标签,根据其不同的种状态,有不同的样式,这就叫做动态伪类
a:hover{}
3. CSS样式优先级?
- 下面的规则优先级依次递减
- 后面加了
! important
的规则
- 内联样式,即写在
style
属性里面的
- 外部样式表,后面出现的规则优先级更高
- 下面的选择器优先级依次递减
- ID选择器
- 类选择器、属性选择器、伪类选择器
- 标签选择器
- 通配选择器
4. 如何让一个元素消失?
方式 |
页面布局 |
绑定事件 |
设置样式display:node |
改变,空间不保留 |
|
设置样式visibility:hidden |
不改变,空间保留 |
依然触发 |
设置样式opacity:0 |
不改变,空间保留 |
依然触发 |
5. position的定位方式有哪几种?
值 |
定位方式 |
文档流 |
top |
static |
无定位(默认) |
在 |
无 |
relative |
相对定位,相对正常位置定位 |
在 |
有 |
absolute |
绝对定位,相对于 非static 定位的第一个父元素进行定位 |
不在 |
有 |
fixed |
固定定位,依据视口定位 |
不在 |
有 |
6. 讲讲盒模型?
- 在CSS中,每个元素都可以看成是一个盒子,盒模型从内到外依次是
content
,padding
,border
,margin
。
- 盒模型可以分为两种,标准盒模型和IE盒模型,
- 在标准盒模型中,元素的
width
和height
仅仅指content
,即box-sizing:content-box
。
- 在IE盒模型中,元素的
width
和height
指content
和border
,即box-sizing:border-box
。
7. 如何让一个元素在父元素中水平居中?
- 如果元素为行内元素,设置父元素
text-align:center
,
- 如果元素宽度固定,可以设置左右
margin
为auto
,
- 如果元素宽度固定,通过使用绝对定位,以及设置元素的
margin-left
为其宽度的一半,
- 使用flex布局,指定
justify-content
属性为center
。
8. 如何让一个元素在父元素中垂直居中?
- 将显示方式设置为表格,display:table-cell,同时设置vertial-align:middle
- 如果元素为行内元素,设置
line-height
为height
值,
- 如果元素高度固定,可以设置上下
margin
为auto
,
- 使用flex布局,设置
align-item
为center
9. display常用的属性值有哪几种?
inline
,inline-block
,block
可以设置元素为行内元素,行内块级元素,块级元素
属性值 |
独占一行 |
宽高 |
内边距 |
外边距 |
inline |
否 |
无 |
上下左右都有效 |
左右有效,上下无效 |
inline-block |
否 |
有 |
上下左右都有效 |
上下左右都有效 |
block |
是 |
有 |
上下左右都有效 |
上下左右都有效 |
flex
,grid
,table
可以设置元素内部的布局方式
10. 如何清除浮动?
- 在最后一个浮动元素后面新增一个块级元素,然后为其设置样式
clear:both;
- 给父级容器添加
::after
伪元素,并设置如下样式
.container::after{
content:'';
display:block;
clear:both;
visibility: hidden;
height: 0;
}
- 为父级容器开启BFC,给父级容器设置样式
overflow:hidden