努力打造最全面的CSS面试题
CSS3新特性
-
新增的css选择器:( :first-child{样式} 、:last-child{样式}、:nth-child{样式}.......)
-
渐变:gradient: linear-gradient(线性渐变) || radial-gradient(圆形径向渐变)
-
圆角 :border-radius :2px; (半径为2px的圆角)
-
阴影: box-shadow:水平阴影位置 垂直阴影位置 模糊距离 阴影大小 阴影的颜色 阴影开始方法
-
盒子模型
-
文字阴影: text-shadow:水平阴影 垂直阴影 模糊距离 阴影颜色
-
文本溢出省略:
单行文本溢出省略号代替:
1.强制文字一行显示:white-spase:nowrap;(默认为normal,自动换行。)
2.超出的部分隐藏:overflow:hidden;。
3.超出文字用省略号代替:text-overflow:ellipsis;多行文本溢出省略号代替:
1.先设置一个盒子宽高,然后overflow:hidden; text-overflow:ellipsis;
2.弹性伸缩盒子模型显示:display:-webkit-box;
3.限制显示行数:-webkit-line-clamp:2;
4.设置或检索伸缩盒对象子元素的排列方式:-webkit-box-orient: vertical;(从上到下垂直排序) -
transation(过渡):要过渡的属性 花费时间 运动曲线 何时开始; (谁过渡,给谁加!)
-
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画的起始或结束状态;(前两个属性必须写)
-
transform(转换):
-
translateX | Y | Z (10px): 向 X | Y | Z 轴移动 10 px
-
rotateX | Y | Z(10deg) : 以 X | Y | Z 轴旋转 10 °
-
scale(X, Y) : 元素缩放,取决于 X 轴与 Y 轴的参数
-
skew(X,Y): 元素倾斜,参数表示 X 轴与 Y 轴倾斜的角度
-
-
flex布局:当父盒子设为flex布局后,子盒子的float,clear,vertical-align属性将失效。
flex布局
-
常见容器属性:
-
flex-direction :设置主轴的方向
-
row: 默认值 从左到右
-
row-reverse:从右到左
-
column:从上到下
-
colum-reverse从下到上
-
-
justify-content:设置主轴上的子元素排列方式 (注意:使用这个属性之前 一定要先确定好主轴是哪个)
-
flex-star 默认值 从头部开始 如果主轴是x轴,则从左到右
-
flex-end 从尾部开始排列
-
center 在主轴居中对齐
-
space-around 平分剩余空间
-
space-between 先两边贴边 在平分剩余空间(重要)
-
-
align-items :设置侧轴上的子元素排列方式(限于单行元素使用)
-
flex-start:从上到下
-
flex-end:从下到上
-
center:挤在一起居中
-
stretch:;拉伸 默认值
-
flex-flow:复合元素,相当于同时设置了 flex-direction 和 flex-wrap。 flex-flow:column wrap;
-
-
align-content:设置侧轴上的子元素的排列方式(只能在子元素出现换行的时候使用 在单行下使用没有效果)
-
flex-star 默认值 在侧轴的头部开始排列
-
flex-end 从侧轴尾部开始排列
-
center 在侧轴居中对齐
-
space-around 子项在侧轴平分剩余空间
-
space-between 子项在侧轴先两边贴边 在平分剩余空间(重要)
-
stretch 设置子项元素高度平分父元素高度
-
-
flex-wrap:设置子元素是否换行 nowrap(默认 不换行) | warp(换行)
-
定位(position)
-
static:静态定位 ,相当于标准流的摆放模式
-
relative:相对定位,元素移动是相对于自身原本的位置,移动后原本位置还继续占有。
-
absolute:绝对定位
-
没有祖先元素或者祖先元素没有定位时,则以浏览器为准定位
-
祖先有定位时(无论是相对、绝对、固定定位),则以最近一级有定位祖先元素为参照点移动位置
-
绝对定位不在占有原来位置(脱标)
-
-
fixed :固定定位,固定定位一定要有宽度。
-
以浏览器可视窗口为参照物移动元素
-
固定元素不占有原来位置(脱标,可看作特殊的绝对定位)
-
-
sticky:粘性定位,被认为相对定位和固定定位的混合。
-
以可视窗口为参照点移动元素(固定定位特点)
-
粘性定位占有原来位置。(相对定位特点)
-
必须添加四个方位中的其中一个才有效
-
link与@import的区别
-
link属于 XHTML 标签;@import属于 css 提供的一种方法,有兼容问题,仅支持IE5以上
-
页面加载的时候,link会同时被加载,而@import则会等页面加载完成之后在进行加载
-
link 权重大于 @import
-
link 支持使用 JS 去控制 DOM来修改样式;@import 不支持。
-
@import 只能加载 css文件;link除了可以加载 css 外,还可以定义 ref连接属性等
CSS可继承与不可继承属性
可继承属性:
-
元素可见性(visibility)
-
字体系列属性
-
font-size:字体大小
-
font-weight:字体粗细
-
font-style:定义字体的风格
-
font-family:字体系列
-
-
文本系列属性
-
text-indent:文本缩进
-
text-align:文本水平对齐
-
line-height:行高
-
word-spacing:单词之间的间距
-
letter-spacing:字符之间的间距
-
direction:规定文本的书写方向
-
color:⽂本颜⾊
-
-
光标属性:cursor(光标形态)
不可继承属性:
-
display
-
文本属性
-
vertical-align:垂直文本对齐
-
text-direction:文本装饰
-
text-shadow: 文本阴影
-
white-space:空白符的处理
-
unicode-bidi:设置文本方向
-
-
盒子模型的属性:width、height、margin、padding、border
-
背景属性: background、background-color、background-image、background-repeat、 background-position等
-
定位属性::float、clear、position、top、right、bottom、left、overflow、clip、z-index等
-
⽣成内容属性:content、counter-reset、counter-increment
精灵图/雪碧图
将一些小图片合并到一张大图片中,然后利用 background-position 来获取到所需要的小图片。(一般只有小图片才会做成精灵图)
优点:
-
减少网页的 http 请求,加快网页加载速度,提高用户的体验
-
能够减少图片的字节数
缺点:
-
在宽屏、高分辨率的屏幕下的自适应页面,如果图片不够宽很容易出现背景断裂
-
开发时需要利用 ps 或其他工具测量图片的准确的位置
-
维护比较麻烦,一旦背景有少许改动就需要该这张精灵图
inline-block 显示有空隙
-
如果有空格的时候,删除空格
-
如果使用margin的时候,让margin负值即可
-
使用font-size的时候,可通过设置font-size:0 、letter-spacing 、word-spacing 解 决;
css权重
!important > 行内样式(1000)> id选择器(100) >类选择器、伪类选择器(10)> 元素选择器(1)>继承 *(0)
隐藏元素
-
display:none : 最常使用的元素隐藏方法。隐藏后不会在页面占据位置
-
visibility:hidden : 隐藏后元素还在页面中占据位置
-
opacity: 0 : 将元素透明度设置为0,以此来达到隐藏元素的目的。此元素还在页面占据位置且可能会触发事 件。
-
position:absolute; left: -999px : 将元素设为相对定位,然后通过top、left、right、bottom的大额负值来 移出可视化区域,以此实现元素隐藏。
-
transform:scale(0) | translate(-999px,0) : 通过元素缩放为 0 或者 平移出可视化区域来实现元素隐藏。
-
设宽、高属性为 0 : 将盒子模型的所有属性设置为 0,如果盒子内还有子元素或者内容的话,还需要设置其 overflow:hidden 来隐藏其子元素。
display:none 与 visibility:hidden 的区别
-
前者会让元素在页面中完全消失,不在页面中占据空间。后者只是内容不可见,依然在页面中占据空间。
-
前者是非继承属性,子节点是完全消失的,修改子节点属性也不会在显示。后者是继承属性,子元素消失是由于继承了 hidden,子元素可以通过设置 visibility:visible 来显示出来。
-
修改前者的时候,一般都会造成文档的重排。修改后者的时候,只会造成重绘。
-
使用读屏器的时候,前者内容不会被读取到,后者内容可以被读取到。
px/em/rem/vh/vw 的区别
-
px : 表示像素,为绝对单位。
-
em : 为相对长度单位。相对于为父节点字体的大小,如果自身定义了
font-size
按自身来计算。 -
rem:也是为相对长度单位。相对于 HTML 根元素 font-size 的值。
-
vh : 根据可视化窗口的高度,分成100 等份。100vh就相当于是满高。
-
vw :根据可视化窗口的宽度,分成100 等份。100vh就相当于是满宽。
BFC
BFC(Block Formatting Context):块级格式化上下文,是页面中的一块渲染区域,拥有自己的一套渲染规则。
通常用于定位、清除浮动。
规则:
-
内部的盒子在垂直方向上一个接一个放置
-
在同一BFC中,相邻的两个盒子的margin会发生重叠
-
BFC区域不会和float的元素区域重叠(用于自适应布局)
-
计算BFC区域高度的时候,float子元素也参与计算
-
每个元素的左外边距与包含块的左外边界相接触,浮动元素也是如此
-
BFC 就是页面上的一个隔离的容器。容器内的子元素不会影响到外面的元素,反之亦然。
形成条件:
-
浮动元素:浮动元素的值不为 none
-
定位: position : absolute | fixed
-
display: inline-block、table-cell、table-caption、table
、
table-row、
table-row-group、
table-header-group、
table-footer-group -
overflow : hidden、auto、scroll
应用场景:
-
防止相邻设有margin的两个盒子发生 margin 重叠(塌陷,以值较大的margin为准)。让两个盒子处于不同的BFC区域就行。
-
清除内部浮动:让外部大盒子形成 BFC 区域
-
自适应多栏布局(两栏布局,三栏布局.....)
水平垂直居中
-
position:absolute + margin:auto
-
position:absolute + margin:(-50%,-50%)
-
position:absolute + transform:translate(-50%,-50%)
-
父元素设置 display:table-cell、vertical-align: middle、text-align:center, 子元素设置 display:inline-block
-
flex布局: 给父盒子设置 display:flex、justify-content: center、align-items:center;
-
grid网格布局:给父盒子设置 display:grid、justify-content: center、align-items:center;
常用的CSS预处理语言
CSS预处理语言为 CSS 增加了一些编程的特性,可以让你在 CSS 中使用变量、简单的逻辑程序、函数等等还可以让你的 CSS嵌套编写,看起来更加舒适。常用的CSS预处理语言有 Sass 、 Less 、 Stylus。
响应式布局设计
指的是仅用一套代码就能实现在不同屏幕下有不用的显示结果。(会根据场景进行调整)
实现方式
-
媒体查询
@media screen (min-width: 375px) and (max-width: 600px) {
body {
font-size: 18px;
}
}
@media screen (min-width: 600px) and (max-width: 900px) {
body {
font-size: 20px;
}
}
-
百分比(%)需要设置每个元素才能实现响应式布局,较为复杂,不建议使用。
-
子元素宽高依赖于父元素的宽高。
-
子元素的margin、padding设置百分比,无论水平、垂直,都是相对于父元素的 width。
-
border-radius设为百分比,则是相对于自身来说的。
-
-
rem: 先利用媒体查询更改不同分辨率下的 根元素的 font-size 值,然后将 rem 设置为 width 的十分之一。
-
vw/vh:表示视图的宽度/高度。一般都是使用vw。
回流(重排)、重绘
回流:布局的时候,计算每个盒子在页面的大小和位置
重绘:计算完盒子大小与位置后,会根据盒子自身的特性进行绘制
回流一定会触发重绘,重绘不会触发回流。
回流的触发:
-
添加或删除DOM元素
-
元素位置发生变化
-
盒子模型属性发生变化
-
元素内容发生变化
-
可视化窗口变化
-
页面渲染
重绘的触发:
-
改变文字颜色
-
改变文本方向
如何减少:
-
减少DOM的增删
-
对于一些复杂的动画,尽量使它脱离文档流(position:fixed| absolute),减少对其他元素的影响
-
避免设置多项内联样式
-
避免使用 table 布局,table内的每个元素及内容改动,都会导致整个 table 重新计算
-
避免使用 CSS 的
JavaScript
表达式
css提高性能的方法
-
尽量将样式写在单独的 css 文件中,然后再引用。
-
不要使用 @import。会影响浏览器的并行下载,增加页面加载的延迟事件。
-
避免使用多层选择器,会增加匹配时间。
-
使用 webpack、rollup 等 模块化工具对 css 代码进行压缩。
-
减少使用高性能属性: float、定位。
-
使用精灵图,减少http请求
-
将小图片转化为 base64编码
-
减少重排、重绘操作
-
增加继承操作,减少属性编写
像素
-
设备像素/物理像素(dp): 设备能控制显示的最小物理单位,单位为 pt 。
-
设备独立像素/逻辑像素(dip):设备独立像素是与设备无关的逻辑像素,代表可以通过程序控制使用的虚拟像素,是一个总体概念,包括了CSS像素。一个设备独立像素里可能包含1个或者多个物理像素点,包含的越多则屏幕看起来越清晰。
-
设备像素比(dpr):代表设备独立像素到设备像素的转换关系,设备像素比(dpr) = 设备像素 /设备独立像素
-
像素密度(ppi):在一定尺寸的物理屏幕上显示像素的数量,单位一般为dip
让Chrome支持小于12px 的文字方式有哪些?区别?
-
zoom:可以改变页面上元素的真实尺寸。zoom:50%或zoom:0.5,均表示缩小到原来的一半。
-
text-size-adjust:none :这样设置之后会有一个问题,就是当你放大网页时,一般情况下字体也会随着变大,而设置了以上代码后,字体只会显示你当前设置的字体大小,不会随着网页放大而变大了,不建议全局应用该属性,而是单独对某一属性使用。
-
‐webkit‐transform:scale() :使用该属性进行缩放。但是该属性只对定义了宽高的元素生效。
区别 :
-
zoom是非标准属性,有兼容问题,缩放会改变了元素占据的空间大小,触发重排
-
text-size-adjust:none 对谷歌浏览器有版本要求,在27之后,就取消了该属性的支持,并且只对英文、数字生效
-
‐webkit‐transform:scale()大部分现代浏览器支持,并且对英文、数字、中文也能够生效,缩放不会改变了元素占据的空间大小,页面布局不会发生变化
场景应用
三角形
元素宽高设为 0 ,若三角形角朝上,则设置 右、下、左边框。然后将左右边框设为透明。
div{
width: 0;
height: 0;
border-right: 50px solid transparent;
border-bottom: 50px solid skyblue;
border-left: 50px solid transparent;
}
扇形
元素宽高设为 0,设置透明外边框,然后设置百分百的 border-radius。在将四边任意一边的边框设为有颜色的即可(每一边对应不同指向的扇形)
div{
width: 0;
height: 0;
border: 100px solid transparent;
border-radius: 100%;
border-top-color: pink;
}
圆形
div{
width: 100px;
height: 100px;
border-radius: 100px;
}
半圆
div{
width: 100px;
height: 50px;
border-radius: 0 0 100px 100px;
}
直角梯形
div{
height: 0;
width: 100px;
border-bottom: 100px solid skyblue;
border-right: 5 0px solid transparent;
}
等腰梯形
div{
width: 100px;
height: 0;
border-bottom: 50px solid skyblue;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析