❤️ 谢谢支持
喜欢的话别忘了 关注、点赞哦~。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
order: 2
- C3计算属性?
- 说一下选择器权重?
- 定位都有哪些属性?说一下fixed和sticky?
阴影常常把前两个值设为0
(x偏移量和y偏移量),第三个值为模糊半径(可选参数,一般不写
),第四个值为阴影大小
,第五个为颜色,第六个值(可选参数)设为inset就是内部阴影。
box-shadow: 0px 0px (2px) 2px red (inset);
渐变分为线性渐变和径向渐变
线性:background-image: linear-gradient(to right,blue,skyblue);
径向:background-image: radial-gradient(blue,skyblue);
🧡属于同一个BFC的两个盒子外边距会产生重叠问题。所以可以根据这个特性,在一个盒子外层包裹一层解决。
🧡计算BFC的高度时,浮动元素也参与计算。所以把一个盒子变成BFC,可以解决浮动问题。
其他特性:垂直排列,内外元素互不影响
使用CSS
全局变量
/设置/
:root{–theme-color:pink}
/使用/
color:var(–theme-color:pink)
/最后动态修改/
document.documentElement.style.setProperty(‘–theme-color:pink’,‘blue’)
伪元素有些可以单冒号也可以双冒号,::before/after
用来清除浮动或者前面加图标等功能。
伪类选择器只能单冒号,用于向某些选择器添加特殊选择效果,让我们可以在元素上少写点类。:hover
等还可以做些效果。
/C3新增伪元素有/只能双冒号的两个
::selection ::placeholder
/C3新增伪类选择器/
:nth-child(n) :checked
媒体查询,判断屏幕尺寸设置不同样式,是UI组件库栅格系统的底层原理@media screen and (min-width:1200px){}
/视口/
作用:理想视口,移动端不会因为像素问题看不清等。
视口就是浏览器显示页面内容的屏幕区域
视口分为布局视口(980px
、所以pc网页在手机上呈现看上去很小),视觉视口和理想视口
移动端布局想要的是理想视口:就是手机屏幕有多宽,我们的布局视口就有多宽
优点是减少http
请求,使用background-position
拿到图片位置,缺点是需要UI整理,实现相对较麻烦
object-fit
属性:
-
fill
:压缩图片到和盒子一样大 -
contain
:维持比例,留白 -
cover
:最好,位置比例,显示中间 -
none
:没用 -
scale-down
:按尺寸
硬件加速:transform:translateZ(0)
容器的属性
-
flex-direction
-
row
(默认值):主轴为水平方向,起点在左端。 -
row-reverse
:主轴为水平方向,起点在右端。 -
column
:主轴为垂直方向,起点在上沿。 -
column-reverse
:主轴为垂直方向,起点在下沿。 -
flex-wrap
-
nowrap
(默认):不换行。 -
wrap
:换行,第一行在上方。 -
wrap-reverse
:换行,第一行在下方。 -
flex-flow
-
flex-flow
属性是flex-direction
属性和flex-wrap
属性的简写形式,默认值为row nowrap
。 -
justify-content、
justify-content
属性定义了项目在主轴上的对齐方式。 -
flex-start
(默认值):左对齐 -
flex-end
:右对齐 -
center
: 居中 -
space-between
:两端对齐,项目之间的间隔都相等。 -
space-around
:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。 -
align-items、
align-items
属性定义项目在交叉轴上如何对齐。 -
flex-start
:交叉轴的起点对齐。 -
flex-end
:交叉轴的终点对齐。 -
center
:交叉轴的中点对齐。 -
baseline
: 项目的第一行文字的基线对齐。 -
stretch
(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。 -
align-content、
align-content
属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。 -
flex-start
:与交叉轴的起点对齐。 -
flex-end
:与交叉轴的终点对齐。 -
center
:与交叉轴的中点对齐。 -
space-between
:与交叉轴两端对齐,轴线之间的间隔平均分布。 -
space-around
:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。 -
stretch
(默认值):轴线占满整个交叉轴。
项目的属性
order
order
属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
.item {
order: ;
}
flex-grow
flex-grow
属性定义项目的放大比例,默认为0
,即如果存在剩余空间,也不放大。
.item {
flex-grow: ; /* default 0 */
}
如果所有项目的flex-grow
属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow
属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
-
flex-shrink
属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。 -
``flex-basis
属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为
auto`,即项目的本来大小。 -
🧡🧡🧡
flex
属性是flex-grow
,flex-shrink
和flex-basis
的简写,默认值为0 1 auto
。后两个属性可选。 -
align-self
属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items
属性。默认值为auto
,表示继承父元素的align-items
属性,如果没有父元素,则等同于stretch
。
单行:
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;/让文字在一行显示/
多行:
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:3;
overflow: hidden;
识别换行符\n
:
white-space: pre-wrap;
单词换行:
word-break: break-all;/一般不用//默认是keep-all/
❤️ 谢谢支持
喜欢的话别忘了 关注、点赞哦~。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
lay: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:3;
overflow: hidden;
识别换行符\n
:
white-space: pre-wrap;
单词换行:
word-break: break-all;/一般不用//默认是keep-all/
❤️ 谢谢支持
喜欢的话别忘了 关注、点赞哦~。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-73viB3br-1715696061911)]