本文摘自PHP中文网,作者coldplay.xixi,侵删。
盒子模型
- 标准盒模型:content
怪异盒模型: border+content
专题推荐:2020年CSS面试题汇总(最新)
行内元素
- 特征
- 设置宽高无效
- 设置margin只有左右有效,上下无效
- 设置padding上下左右均有效,会撑起空间
- 不会进行自动换行
- 常见的行内元素
- a span b i strong
行内块元素
- 特征
- 可以设置宽高
- 与所有行内元素显示在同一行
- 常见的行内块元素
- img input button select
块级元素
- 特征
- 可以设置宽高
- 所有块级元素会独占一行
- 如果未设置宽高,默认继承父级宽高
- 常见的块级元素
- p p ul li h1-h6
css实现居中
- margin: 0 auto;
- position定位配合transform:translate
- flex布局
- text-align配合line-height,用于字体在其父元素区域内居中
- vertical-align: middle; 用来设置行内元素的居中
css hack
- 释意:针对不同的浏览器,写不同的css,用作兼容
- 条件hack
1
2
3
4
5
6
<!--[if IE]>
<style>
p {
color
:
red
;
}</style>
<![endif]-->
- 属性hack
1
2
3
4
.p {
color
:
red
;
/*IE 8+*/
*
color
:
green
;
/*IE 7*/
_color
: yellow;
/*IE 6*/
}
- 选择器hack
1
2
3
/*IE 6*/
* html .p {
color
:
red
;}
/*IE 7*/
* + html .p {
color
:
green
;}
px 和 em
- px是绝对单位,值是固定的
- em是继承父元素的font-size大小单位
support
@support用来检测浏览器是否支持某个css属性,可以理解为条件判断,一般用作兼容性处理。
media
媒体查询,根据视口大小写对应的css样式,一般配合rem做移动端的兼容。
calc
css的计算属性,用于动态计算长度值,支持数学运算。
清除浮动
- 伪元素清除浮动
- 原理:在父元素的伪元素中设置clear:both,即可解决高度坍塌的问题。
1
2
3
4
5
::after {
content
:
""
;
clear
:
both
;
overflow
:
hidden
;
height
:
0
;}
BFC:是一个独立的布局环境
- 格式化上下文,是一个独立的渲染区域,让处于BFC内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。
- 规则
- 同一个BFC下,相邻的两个box默认垂直排列
- 同一个BFC下,上下相邻的两个box,margin会发生重叠
- BFC不会与float区域重叠
- 计算BFC高度时,浮动子元素也会参与计算,所以不设置BFC高度,也会被浮动子元素撑开。
- 文字层不会被浮动层覆盖,而是环绕在周围
解决父子边缘重叠时子元素margin带着父元素一起移动
+原理:利用伪元素给父元素添加一个高度为0的table
盒子模型
- 标准盒模型:content
- 怪异盒模型: border+content
行内元素
- 特征
- 设置宽高无效
- 设置margin只有左右有效,上下无效
- 设置padding上下左右均有效,会撑起空间
- 不会进行自动换行
- 常见的行内元素
- a span b i strong
行内块元素
- 特征
- 可以设置宽高
- 与所有行内元素显示在同一行
- 常见的行内块元素
- img input button select
块级元素
- 特征
- 可以设置宽高
- 所有块级元素会独占一行
- 如果未设置宽高,默认继承父级宽高
- 常见的块级元素
- p p ul li h1-h6
css实现居中
- margin: 0 auto;
- position定位配合transform:translate
- flex布局
- text-align配合line-height,用于字体在其父元素区域内居中
- vertical-align: middle; 用来设置行内元素的居中
css hack
- 释意:针对不同的浏览器,写不同的css,用作兼容
- 条件hack
1
2
3
4
5
6
<!--[if IE]>
<style>
p {
color
:
red
;
}</style>
<![endif]-->
- 属性hack
1
2
3
4
.p {
color
:
red
;
/*IE 8+*/
*
color
:
green
;
/*IE 7*/
_color
: yellow;
/*IE 6*/
}
- 选择器hack
1
2
3
/*IE 6*/
* html .p {
color
:
red
;}
/*IE 7*/
* + html .p {
color
:
green
;}
px 和 em
- px是绝对单位,值是固定的
- em是继承父元素的font-size大小单位
support
@support用来检测浏览器是否支持某个css属性,可以理解为条件判断,一般用作兼容性处理。
media
媒体查询,根据视口大小写对应的css样式,一般配合rem做移动端的兼容。
calc
css的计算属性,用于动态计算长度值,支持数学运算。
清除浮动
- 伪元素清除浮动
- 原理:在父元素的伪元素中设置clear:both,即可解决高度坍塌的问题。
1
2
3
4
5
::after {
content
:
""
;
clear
:
both
;
overflow
:
hidden
;
height
:
0
;}
BFC:是一个独立的布局环境
- 格式化上下文,是一个独立的渲染区域,让处于BFC内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。
- 规则
- 同一个BFC下,相邻的两个box默认垂直排列
- 同一个BFC下,上下相邻的两个box,margin会发生重叠
- BFC不会与float区域重叠
- 计算BFC高度时,浮动子元素也会参与计算,所以不设置BFC高度,也会被浮动子元素撑开。
- 文字层不会被浮动层覆盖,而是环绕在周围
解决父子边缘重叠时子元素margin带着父元素一起移动
+原理:利用伪元素给父元素添加一个高度为0的table
相关教程推荐:CSS视频教程
以上就是整理css常见面试题的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《CSS面试题》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者