1. 盒子水平垂直居中?
- 父盒子开启flex,并设置主轴居中,侧轴居中
- 父盒子开启flex,子盒子设置margin:auto
- 子绝父相,子盒子设置top和left值为50%,利用transform基于自身回去-50%
- 子绝父项,子盒子设置上下左右均为0,在设置margin:auto也可以
2. 盒模型
- 四部分: 内容+内边距+外边距+边框
- 盒模型可以进行切换: box-sizing: border-box; ie盒模型/c3盒模型/怪异盒模型, 宽高定死,不受边框内间距撑开
- 默认是content-box: 标准盒模型, width+内间距+边框
3. flex:1
flex:1原理实际上是几个三个属性
- flex-grow: 1用户增大盒子
- flex-shrink: 1用来缩小盒子
- flex-basis: 0%覆盖width
4. c3新属性
- c3盒模型box-sizing
- flex布局
- transition过渡
- transform2D转换
- background-size背景缩放
- border-radius圆角
- 等等,不用都说说一些常用的就ok
5. bfc
概念: 块级格式化上下文,说白了,bfc是一种属性,拥有bfc会拥有独立的渲染区域,从而不会影响外界
触发bfc: position为absolute或fixed display为inline-block, table-cell, table-caption, flex, inline-flex overflow不为visible
bfc的应用:
外边距重叠: 触发bfc
浮动导致高度丢失: 触发bfc
清除浮动: 触发bfc
盒子重叠: 触发bfc
6. less/scss的特性
css预处理语言
- less/scss的异同或区别
- 变量声明:
- less: @
- scss: $
2. 混入:类似js的函数
- less: 定义混入通过点(.),使用混入也是通过点,如果没有参数可以省略小括号
- scss:定义通过@mixin,使用通过@include
3 .变量插值
less: @{},scss变量插值通过${}
4. 嵌套
5. 运算
6. 导入
7. 作用域
8. 颜色函数
- LESS 使用名为 spin() 的函数调整色相;
- SCSS 使用名为 adjust_hue() 的函数调整色相
9. 条件语句循环语句
- less: 不支持
- scss: 支持
后缀名为.sass的sass3.0之前,比较恶心, 不用花括号,固定的缩进格式3.0之后后缀scss,和less差不多
7. vw/vh/px/em/rem/vmin/vmax区别
- vw和vh: 相对于视口的大小,100vh等于视口的高度,100vw等于视口的宽度
- px: 固定大小
- em: 大小相对于父元素的font-size: 20px 1em = 20px
- rem: 大小相对于html的font-size
- vmin: 大小等于最小的视口: 100vmin等于最小的视口
- vmax: 大小等于最大的视口
8. 让Chrome支持小于12px 的文字方式有哪些?
pc端的浏览器,字体默认最小只能显示12px
- transform: scale(0.5)
- -webkit-text-size-adjust: none; 字体就可以按照font-size去显示
谷歌27版本之后就不能使用了
- 使用图片
9. 移动端适配方案
- rem
- 百分比
- vw/vh, vmin/vamx
- flex
- 栅格布局
10. 重绘/回流(重排)
- 重绘(repaint)
- 概念:即重新绘制
- 导致重绘:外观、风格发生变化即发生重绘,例如color、background、box-shadow、background-size
- 影响:重绘不一定回流
- 回流(重排):
- 概念:当渲染树中元素的尺寸大小、布局等属性改变时,浏览器的布局需要调整,则需要重新渲染DOM。这个过程就叫回流。回流也叫重排(对整个页面进行重新排版)。
- 影响:回流必然会重绘
- 导致重排:width、height、margin、padding、font-size、position等等
- 避免重绘和回流
- 多个样式修改不要一个一个更改,可以通过操作类名,一次统一修改
// js width
// js height
// js color
.active {
width: 100px;
height: 100px;
color: red;
}
- 先将元素display:none,修改后在显示
- top修改为translate(不会引起重排)
- 避免使用table用div替换
11.flex常用的容器属性
1. flex-direction: 设置容器中的主轴方向
2. flex-wrap: 项目在主轴方向上是否换行显示
3. justify-content: 设置容器中的项目在主轴上的对齐方式
4. align-items: 单行项目在侧轴上的排列方式
5. align-content: 多行项目侧轴上的对齐方式
6. flex-flow: 是flex-direction和flex-wrap的合写, 默认值为row nowrap
12.css选择器的优先级
!important>行内样式>id选择器>类/属性/伪类选择器>伪元素/标签选择器>通配符选择器*
13.css写一个三角形
div {
width: 0;
height: 0;
border: 20px solid transparent;
border-width: 40px 20px 0 0;
border-right-color: #f99;
}
14.px em rem的区别
px是固定单位,
em是相对单位,相当于当前文字的大小,如果没有就找父元素
rem也是相对单位,相对于html的fontsize的大小
css3和css的区别
CSS3(Cascading Style Sheets 3)是CSS的最新版本,相对于CSS2而言新增了很多新特性,可以更方便地实现更加丰富、复杂的页面效果。
下面列出CSS3和CSS之间的主要区别:
- 功能增强:CSS3比CSS2更强大,包含了更多的属性、选择器和伪类,如圆角、阴影、渐变、动画、媒体查询等,这些新特性让设计师可以更加方便地实现更加丰富、复杂的页面效果。
- 兼容性:由于CSS3是新的标准,一些老版本的浏览器不支持CSS3的新属性,而CSS2具有更好的兼容性。为了解决这个问题,可以使用CSS前缀来实现不同浏览器的兼容性。
具体属性
CSS3相对于CSS2,新增了很多新的属性、选择器和伪类。下面列出一些主要的新特性:
- 属性:
- 边框属性:border-radius(圆角)、box-shadow(阴影)、border-image(边框图像)等。
- 背景属性:background-size(背景尺寸)、background-origin(背景位置)、background-clip(背景剪裁)等。
- 文本属性:text-shadow(文字阴影)、text-overflow(文本溢出)、word-wrap(单词换行)等。
- 字体属性:@font-face(字体嵌入)、font-size-adjust(字体大小调整)等。
- 动画属性:animation(动画)、transition(过渡)等。
- 2D/3D转换属性:transform(转换)、perspective(透视)等。
- 选择器:
- 属性选择器:[attr=value]、[attr~=value]、[attr|=value]、[attr^=value]、[attr$=value]、[attr*=value]等。
- 伪类选择器::first-child、:last-child、:nth-child、:only-child、:first-of-type、:last-of-type、:nth-of-type、:only-of-type等。
- 相对选择器:+、>、~等。
- UI状态伪类选择器::hover、:active、:focus、:checked、:disabled等。
- 伪类:
- :nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type():用来选择元素的位置。
- :first-child、:last-child、:first-of-type、:last-of-type、:only-child、:only-of-type:用来选择元素的父级。
- :checked、:disabled、:enabled、:target:用来选择元素的状态。
- :before、:after:用来在元素前后插入内容。
以上是CSS3新增的一些主要特性,还有很多其他的新属性、选择器和伪类,可以更加方便地实现更加丰富、复杂的页面效果。