前端基础面试题·第二篇——CSS（其二）
1.CSS选择器的优先性：
- ！important - 强制生效样式 - 有即生效
- 行内样式 - 有即生效 权重： 1000
- id选择器 权重：100
- 类选择器，伪类，属性选择器 权重： 10
- 元素选择器，伪元素选择器，权重： 1
- 通配符，兄弟，后代，子代 ，权重： 0
2.CSS继承性
1.继承属性：
1 .字体系列属性
font, font-family, font-weight, font-size, font-style, font-variant等
2 .文本系列属性：
text-indent, text-align, line-height, word-spacing, letter-spacing, text-transform, direction等
3 .可见性属性：
visibility
4 .表格布局属性:
border-collapse, border-spacing, caption-side, empty-cells, table-layout等
5. 列表布局属性：
list-style, list-style-type, list-style-image, list-style-position等
6. 光标属性：
cursor
7. 页面样式属性：
page, page-break-inside, page-break-after, page-break-before等
8. 声音样式属性：
speak, speak-header, speak-numeral, speak-punctuation等
2.非继承属性：
1.display
2.文本属性：
vertical-align, white-space, text-decoration, text-shadow, unicode-bidi等
3.盒子模型的属性:
width, height, margin, border, padding, background等
4.背景和定位属性：
background, background-color, background-image, background-repeat, background-attachment, background-position等
5.轮廓属性：
outline, outline-color, outline-style, outline-width等
6.页面样式属性：
size, max-width, min-width等
7.生成内容属性：
content, counter-reset, counter-increment等
3.css影藏元素方式
- display: none
- visibility: hidden;
- opacity: 0;
- position: absolute;
- z-index: -100;
- transform: translate(-9999px, -9999px)
- clip-path：circle(0)
4.display: none 与visibility: hidden属性的区别
1.display： none,这个属性会在渲染树中去除元素，因此元素在渲染时不会占据任何空间,不可继承，修改回引发重排
2.visibility: hidden,这是个属性只会导致元素在页面上不可见，但其占据空间其实还在，只是内容不可见，可继承，修改会引发重绘
5.文本溢出隐藏
1. 单行文本溢出：
white-space：nowrap; /* 文本禁止换行 */
overflow: hidden; /* 文本溢出隐藏 */
text-overflow: ellipsis; /* 文本溢出部分显示符号 */
2. 多行文本溢出:
display： -webkit-box; /* 作为弹性伸缩盒子模型显示 */
-webkit-box-orient: vertical; /* 设置文字溢出排列方向 从上到下排列 */
-webkit-line-clamp: 3; /* 设置行数 */
overflow: hidden; /* 文本溢出隐藏 */
6.client, offset,scroll
1.client:
主要与可视区域有关，指元素内容及其边距所占空间大小
element.clientWidth // 元素可视区域的宽度
element.clientHeight // 元素可视区域的高度
element.clientLeft // 元素左边框宽度
element.clientTop // 元素顶部边框宽度
// 鼠标移入事件
e.clientX, e.clientY // 鼠标据可视区域左侧和顶部距离
2.offset:
主要与元素位置和大小有关，指元素边框外侧与视窗（viewport）的距离
element.offsetWidth === content.width + padding + border
element.offsetHeight === content.height + padding + border
element.offsetLeft // 元素左边框外侧与视窗（距离最近的定位元素）的距离
element.offsetTop // 元素顶部边框外侧与视窗（距离最近的定位元素）的距离
3.scroll:
主要与滚动位置有关，指元素内容超出其可视区域部分所占空间大小
element.scrollWidth // 元素内容宽度
element.scrollHeight // 元素内容高度
element.scrollLeft // 元素内容左侧与视窗（距离最近的定位元素) 距离
element.scrollTop // 元素内容顶部与视窗（距离最近的定位元素）的距离
// 将元素的scrollTop设置为0可以实现滚动到顶部
三者都是返回数值，不带单位，同时均是只读属性，不可复制更改
7.CSS3新属性
1.新增选择器
- p:nth-child(n)
2.新增布局模式 - 弹性布局： flex;
- 网格布局： grid
3.新增渐变效果 - linear-gradient(direction, color-stop1, color-stop2, …);
- radial-gradient(shape size at position, start-color, …, last-color);
4.新增边框属性 - border-radius: 10px; // 圆角
- box-shadow: 10px 10px 5px #888888; // 阴影
- border-image: url(border.png) 30 30 round; // 边框图片
5.阴影属性 - text-shadow: 5px 5px 5px #FF0000; // 文字阴影
- box-shadow: 10px 10px 5px #888888; // 阴影
6.新增背景属性 - background-size: 100px 100px; // 背景图片大小
- background-origin: padding-box | border-box | content-box; // 背景图片的定位区域
- background-clip: padding-box | border-box | content-box; // 背景图片的绘制区域
7.新增文本属性 - word-wrap: break-word; // 文本换行
- word-break: keep-all | break-all; // 文本换行
- text-overflow: ellipsis; // 文本溢出
8.转换属性 - transform: rotate(30deg); // 旋转
- transform: scale(2, 2); // 缩放
- transform: skew(30deg, 30deg); // 倾斜
- transform: translate(50px, 50px); // 平移
9.过渡属性 - transition: property duration timing-function delay; // 过渡效果
10.动画属性 - @keyframes 动画名称 { // 定义动画}
- animation: 动画名称 动画时间 动画速度曲线 延迟时间 播放次数 是否反向播放 动画结束状态; // 调用动画
- animation-name: 动画名称;
- animation-duration: 动画时间;
- animation-timing-function: 动画速度曲线;
- animation-delay: 延迟时间;
- animation-iteration-count: 播放次数;
- animation-direction: 是否反向播放;
- animation-paly-state: 动画结束状态;
- animation-fill-mode: 动画填充模式
11.新增用户界面属性 - resize: both; // 是否允许用户调整元素大小
- box-sizing: border-box; // 盒模型
- outline: 2px solid red; // 轮廓
- outline-offset: 10px; // 轮廓偏移
- scroll-behavior: smooth; // 滚动行为
- cursor: pointer; // 鼠标样式
- user-select: none; // 用户选择
- appearance: none; // 外观
12.多列布局
- column-count: 3; // 列数
- column-gap: 20px; // 列间距
- column-rule: 2px solid red; // 列边框
- column-width: 200px; // 列宽
- column-rule-color: red; // 列边框颜色
- column-rule-style: solid; // 列边框样式
13.媒体查询
- @media 媒体类型 and (媒体特性) { // 定义媒体查询}
- @media screen and (max-width: 768px) { // 移动端适配}
- @media print { // 打印机适配}
- @media screen and (min-width: 769px) { // 桌面端适配}
- @media screen and (min-width: 769px) and (max-width: 1200px) { // 平板端适配}
- @media screen and (min-width: 1201px) and (max-width: 1920px) { // 笔记本端适配}
8.弹性布局(flex)
1.定义
一种可以简便完整，响应式实现的灵活性布局解决方案
2.容器属性
父元素：
display: flex; // 定义为弹性布局
flex-direction: [
row /* 横向-默认*/
row-reverse /* 横向-反向 */
column /* 纵向-默认 */
column-reverse;/* 纵向-反向 */
]; // 定义主轴方向
flex-wrap: [
nowrap /* 不换行-默认 */
wrap /* 换行 */
wrap-reverse /* 反向换行 */
] // 定义是否换行
flex-flow: row nowrap// 定义主轴方向和是否换行(是flex-direction与flex-wrap简写)
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: 1; // 定义项目的排列顺序，数值越小，排列越靠前，默认为0
flex-grow: 1; // 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink: 1; // 定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-basis: auto; // 定义在分配多余空间之前，项目占据的主轴空间（main size）
flex: none //前三者简写
/* default: 0 1 auto */
align-self: [
flex-start /* 交叉轴起点对齐-默认 */
flex-end /* 交叉轴终点对齐 */
center /* 交叉轴居中对齐 */
baseline /* 项目的第一行文字的基线对齐 */
stretch /* 交叉轴的起点和终点对齐，项目的高度平分父元素的高度 */
]
9.网格布局(gird)
1.定义：
一种二维的布局方式，将容器划分成“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作的二维的flex布局。
2.基本属性
display: grid; // 定义为网格布局
grid-template-columns: 100px 100px 100px; // 定义三列，每列宽度为100px
grid-template-rows: 100px 100px 100px; // 定义三行，每行高度为100px
以上两个属性还可以使用fr作为单位，表示比例关系。
grid-template-columns: 1fr 1fr 1fr; // 定义三列，每列宽度比例为1:1:1
grid-template-rows: 1fr 1fr 1fr; // 定义三行，每行高度比例为1:1:1
还可以使用repeat()函数简化重复的值。
grid-template-columns: repeat(3, 33.33%); // 定义三列，每列宽度比例为33.33%:33.33%:33.33%
grid-template-rows: repeat(3, 33.33%); // 定义三行，每行高度比例为33.33%:33.33%:33.33%
grid-column: 1 / 3; // 指定项目的位置，从第一根水平线到第三根水平线
grid-row: 1 / 3; // 指定项目的位置，从第一根垂直线到第三根垂直线
grid-area: / / / ; // 指定项目的位置，从某一行开始到某一行结束，从某一列开始到某一列结束
grid-area: header; // 指定项目的位置，从某一行开始到某一行结束，从某一列开始到某一列结束
grid-area: 1 / 1 / 3 / 3; // 指定项目的位置，从某一行开始到某一行结束，从某一列开始到某一列结束
grid-auto-flow: row | column | row dense | column dense; // 指定项目的排列顺序。
grid-gap: ; // 指定网格线之间的间隔，一行一行地添加间隔。
justify-items: start | end | center | stretch; // 设置单元格内容的水平位置（左中右），跟justify-content属性值一样。
align-items: start | end | center | stretch; // 设置单元格内容的垂直位置（上中下），跟align-content属性值一样。
justify-content: start | end | center | stretch | space-around | space-between | space-evenly; // 设置整个内容区域的水平位置（左中右），跟justify-items属性值一样。
align-content: start | end | center | stretch | space-around | space-between | space-evenly; // 设置整个内容区域的垂直位置（上中下），跟align-items属性值一样。
10.垂直居中
1. 绝对定位 + 负margin
.div {
position: absolute;
top: 50%;
margin-top: -100px; /* 高度的一半 */
left: 50%;
margin-left: -100px; /* 宽度的一半 */
}
2. 绝对定位 + transform
.div {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50% -50%);
}
3. flex布局
.parent {
display: flex;
justify-content: center;
align-items: center;
}
4. grid布局
.parent {
display: grid；
place-items: center；
}
5. table-cell布局
.parent {
display: table-cell;
vertical-align: middle;
text-align: center;
}
11.使chrome浏览器支持小于12px的字体
由于谷歌浏览器内部默认最小字体为12px，小于12px的字体默认以12px显示，但可以设置为0；
解决方案：
1.zoom变焦：
body {
font-size: 10px;
zoom: 0.5; // 0.5倍
}
2.使用transform缩放
body {
font-size: 10px;
transform: scale(0.5);
}
32.sass
1.定义：
一种CSS预处理器，可以方便地复用css代码。
2.特性
- 嵌套：
body{
background-color: $baseColor;
$color2: yellow;
div{
background-color:$color2;
color: $color1;
}
div2{
background-color:$color2;
color: $color1;
}
}
- 变量：
$color: red;
$width: 100px;
div{
background-color: $color;
width: $width;
}
- 混合：
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
div {
@include border-radius(10px);
}
- 继承：
.button {
border: none;
padding: 10px 20px;
cursor: pointer;
}
.button-primary {
@extend .button;
background-color: blue;
color: white;
}
.button-secondary {
@extend .button;
background-color: gray;
color: white;
}
- 导入：
@import 'styles.css';
- 条件判断：
@if $type == danger {
background-color: red;
} @else if $type == warning {
background-color: yellow;
} @else {
background-color: white;
}
- 循环：
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}