前端面试 css篇
目录
CSS3新增特性
盒模型
CSS选择器和优先级
CSS可继承属性和不可继承属性
dislpay的属性和作用
隐藏元素的方式
单行、多行文本溢出
有了使用过Sass、Less 吗？他们的区别是什么？
link和@import的区别
常见的CSS单位
px、em、rem的区别
两栏布局
三栏布局
水平垂直居中
flex布局理解
flex: 1和flex：auto表示什么
grid布局
对BFC的理解，如何创建BFC
什么是margin重叠，如何解决
position 常用属性 默认值是什么
实现一个三角形
画一条0.5px的线
如何解决1px
CSS3新增特性
- 新增CSS选择器、伪类
- 特效：text-shadow、box-shadow
- 线性渐变: gradient
- 旋转过渡：transform、transtion
- 动画: animation
- 圆角: border-radius
1、 transition 是用于定义元素属性变化时的过渡效果。它需要触发某个事件（如鼠标悬 停、点击等）来启动。简单来说， transition 只能在两个状态之间转换，并且需要一个触发 条件。
2、 animation 提供了更多的控制选项，它允许我们定义关键帧（keyframes），并且可以在 复数个状态之间进行变化。 animation 可以在页面加载时自动开始运行，不需要特定的触发 事件。
盒模型
盒模型都是由四个部分组成的，分别是margin、border、padding和content。
标准盒模型和IE盒模型的区别在于设置width和height时，对应的范围不同。
- 标准盒模型的width、height只包含了content
- IE盒模型的的width、height除了content本身，还包含了border、padding
通过修改元素的box-sizing属性来改变元素的盒模型
- box-sizeing: content-box表示标准盒模型（默认值）
- box-sizeing: border-box表示IE盒模型（IE盒模型)
CSS选择器和优先级
选择器
| 选择器 |
权重 |
| id选择器 #id |
100 |
| 类选择器 .classname |
10 |
| 属性选择器 div[class="foo"] |
10 |
| 伪类选择器 div::last-child |
10 |
| 标签选择器 div |
1 |
| 伪元素选择器 div:after |
1 |
| 兄弟选择器 div+span |
0 |
| 子选择器 ui>li |
0 |
| 后代选择器 div span |
0 |
| 通配符选择器 |
0 |
优先级
- !important
- 内联样式 1000
- ID选择器 100
- 类选择器/伪类选择器/属性选择器 10
- 标签选择器/伪元素选择器 1
- 关系选择器/通配符选择器 1
比较优先级
采用相加的原则，如果分数一样，更加css的覆盖原则采用后者
CSS可继承属性和不可继承属性
可继承
- font-weight
- color
- font-size
- line-height
- cursor
- ...
不可继承
- margin、padding、border
- display
- background
- overflow
- width、height
- position
- ...
dislpay的属性和作用
| 属性 |
作用 |
| block |
块类型。默认宽度为父元素宽度，可设置宽高，换行显示。 |
| inline |
行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。 |
| inline-block |
行内块级元素，默认宽度为内容宽度，可以设置宽高，同行显示 |
| table |
块级表格 |
| flex |
flex容器布局 |
| none |
隐藏元素 |
| inherit |
从父类继承display属性 |
隐藏元素的方式
- display：none：元素在文档中不存在，不会占据位置。
- visibility： hidden：元素在文档中的位置还保留，仍然占据空间。
- opacity：0：将透明度设置为0。
- z-index：负值：直接将元素放置在最下层，利用其他元素来遮盖。
- position：absolute：将元素定位到可视区域以外。
单行、多行文本溢出
单行
css
复制代码overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
whtie-space: nowrap; //规定段落中的文本不进行换行多行
CSS
复制代码overflow:hidden
text-overflow: ellipsis; // 溢出用省略号显示
display:-webkit-box; // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3; // 显示的行数有了使用过Sass、Less 吗？他们的区别是什么？
他们都是 CSS 预处理器，是 CSS上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。 增加了 CSS代码的复用性，层级，mixin， 变量，循环， 函数等对编写以及开发UI组件都极为方便。 区别
- 编译环境不一样
-
- Sass是在服务端处理的，以前是Ruby，现在是Dart-Sass或Node-Sass
- 而Less是需要引入less.js来处理Less代码输出CSS到浏览器，也可以在开发服务器将Less语法编译成css文件，输出CSS文件到生产包目录
- 变量符不一样，Less是@，而Scss是$。
- Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持
link和@import的区别
- link是HTML提供的标签，不仅可以加载CSS文件，还可以定义RSS、rel连接属性等
- @import是CSS提供等语法规则，只有导入样式表带作用。
- link标签引入的CSS被同时加载，而@import引入的CSS将在页面加载完毕后被加载
- @import是CSS2.1才有的语法，存在兼容性，而link作为HTML标签不存在兼容性问题
常见的CSS单位
- px像素
-
- CSS像素
- 物理像素
- 百分比%，作用于父元素， 当浏览器的宽度或者高度发生变化时，当前元素依据比例发生变化。
- em和rem，相对长度单位，它们之间的区别：em相对于父元素，rem相对于根元素。
- vw/vh是与视图窗口有关的单位，代表视图窗口的宽高。
px、em、rem的区别
- px 固定像素单位，不能随其它元素的变化而变化
- em是相对于父元素的单位，会随着父元素变化而变化
- rem是相对于根元素html，它会随着html元素变化而变化
两栏布局
- 利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。
CSS
复制代码.outer {
height: 100px;
}
.left {
float: left;
width: 200px;
background: tomato;
}
.right {
margin-left: 200px;
width: auto;
background: gold;
}- 利用浮动，左侧元素设置固定大小，并左浮动，右侧元素设置overflow: hidden; 这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。
CSS
复制代码.left{
width: 100px;
height: 200px;
background: red;
float: left;
}
.right{
height: 300px;
background: blue;
overflow: hidden;
}- 利用flex布局，将左边元素设置为固定宽度200px，将右边的元素设置为flex:1。
CSS
复制代码.outer {
display: flex;
height: 100px;
}
.left {
width: 200px;
background: tomato;
}
.right {
flex: 1;
background: gold;
}- 利用绝对定位，将父级元素设置为相对定位。左边元素设置为absolute定位，并且宽度设置为200px。将右边元素的margin-left的值设置为200px。
CSS
复制代码.outer {
position: relative;
height: 100px;
}
.left {
position: absolute;
width: 200px;
height: 100px;
background: tomato;
}
.right {
margin-left: 200px;
background: gold;
}三栏布局
- 利用绝对定位，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。
- 利用flex布局，左右两栏设置固定大小，中间一栏设置为flex:1。
- 利用浮动，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式，中间一栏必须放到最后：
- 圣杯布局，利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边。
- 双飞翼布局，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的 margin 值来实现的，而不是通过父元素的 padding 来实现的。本质上来说，也是通过浮动和外边距负值来实现的。
水平垂直居中
- 利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。该方法需要考虑浏览器兼容问题。
CSS
复制代码.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}- 利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况：
CSS
复制代码.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}- 利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况。
CSS
复制代码.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; /* 自身 height 的一半 */
margin-left: -50px; /* 自身 width 的一半 */
}- 使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。该方法要考虑兼容的问题，该方法在移动端用的较多：
CSS
复制代码.parent {
display: flex;
justify-content:center;
align-items:center;
}flex布局理解
flex布局是CSS3新增的一种布局方式，能够根据不同屏幕尺寸的变化来自适应大小。
常用的属性：
- flex-direction属性决定主轴的方向（即项目的排列方向）。
- justify-content属性定义了项目在主轴上的对齐方式。
- align-items属性定义项目在交叉轴上如何对齐。
- flex-wrap属性定义，如果一条轴线排不下，如何换行。
- flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
- align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
flex: 1和flex：auto表示什么
flex: 1是flex-grow、flex-shrink、flex-basis的缩写，默认值是0 1 auto。
- flex:auto（1 1 auto）可以放大，可以缩小，按宽度
- flex:none（0 0 auto）不可以放大，不可以缩小，按宽度
- flex:1（1 1 0%）可以放大，可以缩小，按内容
- flex:0（0 1 0%）不可以放大，不可以缩小，按内容
- flex-grow定义项目发大比例，默认为0，即存在剩余空间，也不放大。数值的大小代表分配的份数
- flex-shrink定义项目收缩比例，默认为1，即空间不足，也会进行缩小。数值的大小代表分配的份数
- flex-basis定义项目给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小，如果为0则按照盒子内容实际占用宽度设置剩余空间。
grid布局
Document
Document
header
sider
main
对BFC的理解，如何创建BFC
BFC是块级格式上下文（Block Formatting Context，BFC），是CSS布局的一个概念，在BFC布局里面的元素不受外面元素影响。
创建BFC条件
- 设置浮动：float有值并不为空
- 设置绝对定位： position（absolute、fixed）
- overfilow值为：hidden、auto、`scroll
- display值为：inline-block、table-cell、table-caption、flex等
BFC作用：
- 解决margin重叠问题：由于BFC是一个独立的区域，内部元素和外部元素互不影响，将两个元素变为BFC，就解决了margin重叠问题
- 创建自适应两栏布局：可以用来创建自适应两栏布局，左边宽高固定，右边宽度自适应。
- 解决高度塌陷问题：在子元素设置浮动后，父元素会发生高度的塌陷，也就是父元素的高度为0解决这个问题，只需要将父元素变成一个BFC。
什么是margin重叠，如何解决
两个块级元素分别设置上下margin时可能会导致边距合并为一个边距，合并到边距取最大的那个值。需要注意的是，浮动的元素和绝对定位这种脱离文档流的元素的外边距不会折叠。重叠只会出现在垂直方向。
计算规则
- 都是正数，取最大的。20px 40px ---> 40px
- 一正一负，用正数减去负数后。20px -50px ---> -30px
- 都是负数，用0减去两个中绝对值大的那个。-30px -10px ---> -20px
解决方案 对于重叠的情况，主要有两种：兄弟之间重叠（margin合并） 和 父子之间重叠（margin塌陷）
- 兄弟之间重叠
-
- 底部元素变为行内盒子：display: inline-block
- 底部元素设置浮动：float
- 底部元素的position的值为absolute/fixed
- 父子之间重叠
-
- 父元素加入：overflow: hidden
- 父元素添加透明边框：border:1px solid transparent
- 子元素变为行内盒子：display: inline-block
- 子元素加入浮动属性或定位
position 常用属性 默认值是什么
- static 默认值，没有定位，元素正常在文档流中显示
- relative 相对定位，相对于原来的位置进行定位
- absolute 绝对定位，相对于static定位意外以外的一个父元素进行定位。
- fixed 绝对定位，相对于浏览器窗口
- sticky 粘性定位，基于用户滚动位置
实现一个三角形
通过设置不同方向边框来实现
CSS
复制代码div {
width: 0;
height: 0;
border-top: 50px solid red;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}
画一条0.5px的线
- 使用transform: scale()的方式，该方法用来定义元素的2D 缩放转换：
CSS
复制代码transform: scale(0.5,0.5);- 采用meta viewport的方式，这样就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px。viewport只针对于移动端，只在移动端上才能看到效果。
如何解决1px
1px 问题指的是：在一些 Retina屏幕 的机型上，移动端页面的 1px 会变得很粗，呈现出不止 1px 的效果。原因很简单——CSS 中的 1px 并不能和移动设备上的 1px 划等号。
- 直接写0.5px
- 利用伪元素，先放大再缩小
- 使用viewport缩放来解决