系列文章
- 大厂前端面试题总结(Web安全篇)
- 大厂前端面试题总结(ES6篇)
- 大厂前端面试题总结(JS手写篇)
- 大厂前端面试题总结(JS理论篇)
- 大厂前端面试题总结(Vue篇)
- 大厂前端面试题总结(浏览器篇)
- 大厂前端面试题总结(性能优化篇)
CSS部分
目录
1、盒模型
2、垂直居中
3、三栏布局
4、CSS权重计算方式
5、BFC
6、清除浮动的方法
7、position属性(div布局方式)
8、Flex布局
9、实现一个自适应的正方形
10、实现一个三角形
11、CSS预处理器机制
2020.11.16补充
12、calc, support, media各自的含义及用法
13、1rem、1em、1vh、1px各自代表的含义
14、水平居中四种方式
15、画一条0.5px的直线?
16、行内元素有哪些?块级元素有哪些?空(void)元素有哪些?
17、页面导入样式时,使用link和@import有什么区别?
18、什么是 FOUC(无样式内容闪烁)?你如何来避免 FOUC??
2020.11.23
19、隐藏类有哪些
20、css的置换元素和非置换元素
2020.12.2
21、伪类和伪元素的区别(2020.12.18修)
2020.12.16
22、可继承的样式有哪些
1、盒模型
盒模型是Web页面布局的基本方式,它由 margin + border + padding + content
四部分组成。
在W3C标准(标准盒模型)中:width = content
在IE标准(怪异盒模型)中:width = content + padding + border
那么,在两种标准浏览器之间如何实现转换呢?
为了解决这个问题,在CSS3中增加了一个border-sizing
属性:
当border-sizing: border-box
时,是IE盒模型;
当border-sizing: content-box
时,是W3C盒模型。
TIP:感谢qq_40360121、树笨无名博友的纠正
2、垂直居中
垂直居中的方式有十几种,但常用的方式有三种:第一种使用flex
;第二种使用position + transform
;第三种使用position + 负margin
。
<div class='outer'>
<div class='inner'>
</div>
</div>
第一种:flex,outer中设置样式
.outer {
display: flex;
justify-content: center;
align-items: center;
}
第二种:position+transform,主要在inner中设置样式,inner宽高已知
.outer {
position: relative;
}
.inner {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
TIP:感谢rubbishmaker9527指正修改
第三种:position+负margin,主要在inner中设置样式,inner宽高已知
.outer {
position: relative;
}
.inner {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
margin-top: -50%;
margin-left: -50%;
}
扩展:
第四种:position+负margin,将四个方向的距离都设置成0,然后使用margin: auto;
也可以实现.outer { position: relative; } .inner { position: absolute; width: 100px; height: 100px; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
3、三栏布局
三栏布局是一种常见的布局方式。原理是中间固定,两边自适应。常用的有三种方式:
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
* {
padding: 0;
margin: 0;
}
.container {
height: 500px;
}
第一种:flex
.container {
display: flex;
}
.left {
flex-bases: 200px
}
.right {
flex-bases: 200px;
}
.main {
flex: 1;
}
第二种:position
.left, .right, .main {
position: absolute;
height: inherit;
}
.left, .right {
width: 200px;
}
.left {
left: 0;
}
.right {
right: 0;
}
.main {
left: 200px;
right: 200px;
}
第三种:float + margin
.left, .right {
width: 200px;
height: inherit;
}
.left {
float: left;
}
.right {
float: right;
}
.main {
margin: 0 200px;
}
TIP:感谢树笨无名博友的纠正
4、CSS权重计算方式
CSS基本选择器包括:ID选择器、类选择器、标签选择器、通配符选择器。一般情况下按照:!importment > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符选择器
。
但如果这几种选择器都作用一个元素时,该元素最后会采用哪种样式呢?常见的有两种方式:第一种采用二进制规则计算;第二种采用1,10,100,1000这种方式进行进行计算。我比较倾向于采用二进制方式进行权重计算比较。
权值计算方式
- 内联样式:1000;
- ID选择器:0100;
- 类选择器和伪类选择器:0010;
- 标签选择器和属性选择器:0001;
- 通配符选择器、子选择器和相邻选择器:0000;
- 继承的样式没有权值。
比较规则
层级相同,向后比较;层级不同,层级高的权重大,不论底层级有多少个选择器。
5、BFC
BFC 是 Block Formatting Context 的简称,翻译过来就是块级格式化上下文
。
以下方式都会创建 BFC
- 根元素( html )
- 浮动元素( float 值不为 none )
- 绝对定位元素( position 值为 absolution 或 fiexd )
- 行内块元素( display 值为 block )
- 表格单元格( display 值为 table-cell , html 内表格单元格默认为该值)
- 表格标题( display 值为 table-caption ,同上)
- 匿名表格单元格元素( display 值为 table、table-row、table-row-group、table-header-group、table-footer-group(它们分别是 html 里的 table、row、tbody、thead、tfoot 的默认值)或 inline-table )
- overflow 值不为 visible 的元素
- display 值不为 flow-root 的元素
- contain 值为 layout、content 或 paint 的元素
- 弹性元素( display 值为 flex 或 inline-flex 元素的直接子元素)
- 网格元素( display 值为 grid 或 inline-grid 元素的直接子元素)
- 多列容器(元素的 column-count 或 column-width 不为 auto ,包括 column-count 为 1 ) column-span 为all的元素始终会创建一个新的 BFC,即使该元素没有包裹在一个多列容器中(标准变更,Chrome BUG)
BFC 布局规则
- 内部 box 会在垂直方向一个接一个的放置;
- box 垂直方向的距离由 margin 决定,属于同一个 BFC 的两个相邻的 box margin 会发生重叠;
- 每个元素的左外边距与包含块的左边界相接触,即使浮动元素也如此;
- BFC 区域不会与 float 元素区域发生重叠;
- 计算 BFC 高度时,浮动元素子元素也参与计算;
- BFC 就是页面上一个独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。
BFC 能够解决的问题
- 父元素塌陷
- 外边距重叠
- 清除浮动
6、清除浮动的方法
清除浮动的主要目的是为了解决父元素塌陷,比较常用的就是.clearfix
伪类。
第一种:clearfix
<div class="outer clearfix">
<div class="inner">
</div>
</div>
.clearfix {
display: block;
height: 0;
content: '';
clear: both;
visibility: hidden;
}
第二种:同级额外创建div,<div class=“clear”>
.clear {
clear: both;
}
第三种:触发父元素BFC,overflow:hidden
7、Position属性(Div布局方式)
absolute
:绝对定位,相对于static
以外第一个父元素进行定位;relative
:相对定位,相对于自身进行定位;fixed
:固定定位,相对于浏览器窗口进行定位;static
:默认值,没有定位,元素出现在正常的流中;inherit
:规定应该从父元素中继承position
的属性。
一般情况下我们喜欢子绝父相
,也就是父元素相对定位、子元素绝对定位这种布局方式。这种布局方式中,子元素相对于父元素padding
属性进行定位。
在CSS3中新增加了一个position:sticky
属性。这个属性的作用是”动态的“:当元素跨越特定阙值前为相对定位,之后为固定定位。元素的阙值指的是top、left、right、bottom其中之一,然后方可使粘性定位生效,否则其行为和绝对定位相同。但sticky
尚处实验阶段。
8、Flex布局
父容器
- 主轴方向,flex-direction:
row、row-reverse、column、column-reverse
- 换行方式,flex-wrap:
nowrap、wrap、wrap-reverse
- 编写,flex-flow:
flex-direction、flex-wrap,默认为row nowrap
- 主轴对齐方式,justify-content:
flex-start、flex-end、center、space-between、space-around
- 交叉轴对齐方式,align-items:
flex-start、flex-end、center、baseline、stretch
- 多根轴线对齐方式,align-content:
flex-start、flex-end、center、space-between、space-around、stretch
子容器
- 在主轴上排列顺序order:
默认为0,越小排列越靠前
- 放大比例flex-grow:
默认为0,数值
- 缩小比例flex-shrink:
默认为1,数值
- 基础尺寸flex-basis:
默认为auto,可指定大小,例如100px
- 自己的对齐方式align-self:
auto、flex-start、flex-end、center、baseline、stretch
- 编写flex:
是flex-grow、flex-shrink、flex-basis的缩写,默认 0 1 auto
- flex:
auto
=flex: 1 1 auto
- flex:
none
=flex: 0 0 auto
- flex取值为单值:
1、无单位:flex-grow;2、有单位:flex-basis
- flex取值为双值:
1、无单位:grow&shrink;2、有单位:grow&basis
9、实现一个自适应的正方形
方式一:利用CSS3里面的vm单位
.square {
width: 100vw; // or vh
height: 100vw; // or vh
}
方式二:利用margin或padding的参考父元素的width属性按照百分比进行计算
.square {
width: 10%;
padding-bottom: 10%;
height: 0; // 防止内容撑开多余的高度
}
10、实现一个三角形
方式一:利用盒模型的border属性上下左右交界框处会呈现出平滑斜线的这个特性,通过设置不同的上下左右边框宽度或颜色即可得到三角形或者梯形
.triangle {
height: 0;
width: 0;
border-color: red blue green pink;
border-style: solid;
border-width: 30px;
}
如果想实现一个单独的三角形,只要将其他三块颜色设置成透明即可:
.triangle {
height: 0;
width: 0;
border-color: red transparent transparent transparent;
border-style: solid;
border-width: 30px;
}
方式二:利用CSS3中的clip-path属性
clip-path
属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。clip-path属性详情链接
.triangle {
width: 30px;
height: 30px;
background: red;
clip-path: ploygon(0px 0px, 0px 30px, 30px 0px) //将坐标(0,0),(0,30),(30,0) 连成一个三角形
transform: rotate(225deg) // 旋转225,变成下三角
}
11、CSS预处理器机制
为了适应当今网站复杂度,CSS预处理器应运而生。
CSS预处理器的作用:
1、文件切分
CSS预处理器扩展了@import
指令的能力,通过编译环节将切分后的文件重新合并为一个大文件。这一方面解决了大文件不便维护的问题,另一方面也解决了一堆小文件在加载时的性能问题。
2、模块化
把文件切分的思路再向前推进一步就是“模块化”。一个大的CSS文件在合理切分之后,所产生的这些小文件相互关系应该是一个树形结构。
树形的根节点一般称为“入口文件”,属性的其他节点一般称为“模块文件”。入口文件通常会依赖多个模块文件,各个模块文件也可能会依赖其它更末端的模块,从而构成整个树形。示例:
entry.styl
├─ base.styl
│ ├─ normalize.styl
│ └─ reset.styl
├─ layout.styl
│ ├─ header.styl
│ │ └─ nav.styl
│ └─ footer.styl
├─ section-foo.styl
├─ section-bar.styl
└─ …
入口文件entry.styl在编译时会引入所需的模块,生成entry.css,然后被页面引用。
3、选择符嵌套
在CSS预处理语言中,嵌套语法可以很容易地表达出规则之间的层级关系,为单条生命写注释也很清晰易读。
.nav
margin: auto // 水平居中
width: 1000px
color: #333
li
float: left // 水平排列
width: 100px
a
display: block
text-decoration: none
4、变量
变量让开发者更容易实现网站视觉风格的统一,也让换肤这样的需求变得轻松容易。
// 用 Stylus 来写
$color-primary = #ff4466
strong
color: $color-primary
font-weight: bold
/* ... */
.notice
color: $color-primary
5、运算
运算可以让值与值之间建立关联。在CSS里面有些属性的值其实和其他属性的值是紧密相关,CSS语法无法表达这层关系;而在预处理语言中,我们可以用变量和表达式来呈现这种关系。
.wrapper
$max-lines = 3
$line-height = 1.5
overflow: hidden
line-height: $line-height
max-height: unit($line-height * $max-lines, 'em')
变量可以是局部定义的变量,也可以从更上层的作用域获取:
$line-height = 1.5 // 全局统一行高
body
line-height: $line-height
.wrapper
$max-lines = 3
max-height: unit($line-height * $max-lines, 'em')
overflow-y: hidden
6、函数
把常见的运算操作抽象出来,我们就得到了函数。开发人员可以自定义函数,预处理器里也内置大量的函数。最常用的内置函数应该就是颜色的运算函数。
.button
$color = #ff9833
background-color: $color
&:hover
background-color: darken($color, 20%)
7、Mixin
Mixin的形态和用法跟函数十分相似——先定义,然后在需要的地方调用,在调用时可以接受参数。它与函数的不同之处在于:函数用于产生一个值,而Mixin的作用是产生一段CSS代码。Mixin可以产生多条CSS规则,也可以只产生一些CSS声明。
// 为 clearfix 定义一个 mixin
clearfix()
...
&::after
...
// 在需要的元素身上调用
.info
clearfix()
footer
clearfix()
8、工程化
CSS预处理语言无法直接运行于浏览器环境,也就是编写的源码需要编译成CSS代码之后才能用于页面。但现在的前端开发流程已经包含了构建环节,所以开发只要按照标准写法即可,后期代码校验、代码压缩、代码后处理等让工具搞定就好了。
参考链接
12、calc, support, media各自的含义及用法
- @support:
用于检测浏览器是否支持CSS某个属性,即条件判断,如果支持某个属性,可以写一套样式,如果不支持某属性,提供另一套样式作为替补。
基本用法:@support(prop:value){ /*自己的样式*/ } @supports (display: flex) { div { display: flex; }}
除此之外还支持逻辑运算符
or
、and
和not
及其混用
@supports (transition-property: color) or ((animation-name: foo) and (transform: rotate(10deg))){/*自己的样式 */}
calc():用于计算动态函数值,支持“+”,“-”,“*”,“/”运算
- 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
- 任何长度值都可以使用calc()函数进行计算;
- calc()函数支持 “+”, “-”, “*”, “/” 运算;
- calc()函数使用标准的数学运算优先级规则;
@media:针对不同的媒体类型定义不同的样式
基本用法
@media mediatype and|not|only (media feature) {CSS-Code;}
参考链接
13、1rem、1em、1vh、1px各自代表的含义
rem
:相对于页面根元素元素,通常做法是给html元素设置一个字体大小,然后其他元素的大小就是相对于根元素的大小em
:相对于父元素字体大小,元素的width/height/padding/margin用em的话是相对于该元素的font-sizevw/vh
:视窗的宽度和高度,相对于屏幕宽度和高度的1%,处理宽度的时候%单位更合适,高度vh更合适px
:像素,相对于屏幕分辨率而言
参考链接
14、水平居中四种方式
- text-align方式
text-align: center
:文本居中 - margin方式
margin: auto
:content居中,非块级元素必须设置宽度 - flex方式
justify-content: center
:主轴对齐
其他几种方式参考上文:2、垂直居中
15、画一条0.5px的直线?
transform: scale(0.5,0.5); // 2D缩放转化
更多transform信息参考菜鸟教程链接:CSS3 transform 属性 | 菜鸟教程
16、行内元素有哪些?块级元素有哪些?空(void)元素有哪些?
- 行内元素:a、b、span、img、input、strong、select、label、em、button、textarea等
- 块级元素:div、ul、li、dl(定义列表)、p、h1-h6、blockquote(段落缩进)等
- 空元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img等
参考文章
17、页面导入样式时,使用link和@import有什么区别?
-
差别1:老祖宗的差别
link属于XHTML标签,而@import完全是css提供的一种方式。
link标签除了可以加载css外,还可以做很多其他的事情,比如定义RSS,定义rel连接属性等,@import只能加载CSS。 -
差别2:加载顺序的差别
当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再加载。所以有时候浏览@import加载CSS的页面时会没有样式(就是闪烁),网速慢的时候还挺明显。 -
差别3:兼容性的差别
由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题,完全兼容。 -
差别4:使用dom控制样式时的差别。
当时用JavaScript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的(不支持)。
参考链接
18、什么是 FOUC(无样式内容闪烁)?你如何来避免 FOUC?
什么是FOUC(文档样式短暂失效)?
如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。
解决方法:
使用LINK标签将样式表放在文档HEAD中。
19、隐藏类有哪些
隐藏属性即通过css
样式将元素隐藏起来。
常用的几种方式:
- 通过设置
display: none
- 通过设置
visibility: hidden
- 通过设置
opacity: 0
- 通过将元素盒模型设置为:
.hiddenBox { margin:0; border:0; padding:0; height:0; width:0; overflow:hidden; }
元素隐藏后的事件响应
元素隐藏后只有opacity: 0
的元素可以触达点击事件,其他几种方式都不能触发点击事件;
通过JS
以上任意一种方式都可以触发点击事件
CSS3 transition对这几种方法的影响(动画效果)
display:none
完全不受transition属性的影响,元素立即消失visibility:hidden
元素消失的时间跟transition属性设置的时间一样,但是没有动画效果opacity
和height
等属性能够进行正常的动画效果
20、css的置换元素和非置换元素
什么是置换元素
- 内容不受CSS视觉格式化模型控制
- CSS渲染模型并不考虑对此内容的渲染
- 一般元素本身拥有固定的宽高比的元素
行内级置换元素的宽度
- 行内级非置换元素:高度和宽度设置没有用,垂直方向上的margin、padding设置也没有用。
- 行内级置换元素:
-
如果宽高或者宽的值为auto,且元素有固有的宽度,则width是此固有的宽度;
-
如果宽度设置为auto,且不符合上述条件,则宽度的使用值为300px。
如:iframe,canvas
-
如果宽度设置为auto,但是高度有非auto的值,且元素有固定的宽高比:
width = 高度 * 固定宽高比
如img只设定了height,宽度会按比例计算
-
行内级置换元素的高度
- 行内级非置换元素
高度和宽度设置是不适用,垂直方向上的margin、padding设置也没有用。 - 行内级置换元素
- 如果宽高或者高的值为auto,且元素有固有的高度,则height是此固有的宽度
- 如果高度设置为auto,但是宽度有非auto的值,且元素有固定的宽高比:
height = 宽度 / 固定宽高比
- 如果高度设置成auto,且不符合上述条件,则height的值不能大于150px,且宽度不能大于高度的2倍。
- 常见的行内置换元素
<img>
<input>
<textarea>
<select>
<object>
21、伪类和伪元素的区别
伪元素
- 每条选择器最多只能包含一个伪元素
伪类
- 每条选择器可以包含多个伪类
- UI伪类选择器顺序:
:hover
、:foucs
、:active
总结
-
伪元素的操作对象是新生成的dom元素,而不是原来dom结构里就存在的;而伪类恰好相反,伪类的操作对象是原来的dom结构里就存在的元素。
-
伪元素与伪类的根本区别在于:操作的对象元素是否存在于原来的dom结构里。
22、可继承的样式有哪些
继承就是指子节点默认使用父节点的样式属性。
不可继承的属性太多了不要背,记住可以继承的属性有哪些就行了。
- 可以继承的属性很少,只有颜色,文字,字体,间距,行高,对齐方式和列表的样式可以继承。
- 所有元素可继承:
visibility
和cursor
。 - 内联元素可继承:
letter-spacing
、word-spacing
、white-space
、line-height
、color
、font
、font-family
、font-size
、font-style
、font-variant
、font-weight
、text-decoration
、text-transform
、direction
。 - 终端块状元素可继承:
text-indent
和text-align
。 - 列表元素可继承:
list-style
、list-style-type
、list-style-position
、list-style-image
。
更多推荐
大厂前端面试题总结(CSS篇)
发布评论