前端基础面试题·第二篇——CSS（其二）

1.CSS选择器的优先性：

1. ！important - 强制生效样式 - 有即生效
2. 行内样式 - 有即生效 权重： 1000
3. id选择器 权重：100
4. 类选择器，伪类，属性选择器 权重： 10
5. 元素选择器，伪元素选择器，权重： 1
6. 通配符，兄弟，后代，子代 ，权重： 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影藏元素方式

1. display: none
2. visibility: hidden;
3. opacity: 0;
4. position: absolute;
5. z-index: -100;
6. transform: translate(-9999px, -9999px)
7. 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: <row-start> / <column-start> / <row-end> / <column-end>; // 指定项目的位置，从某一行开始到某一行结束，从某一列开始到某一列结束
    grid-area: header; // 指定项目的位置，从某一行开始到某一行结束，从某一列开始到某一列结束
    grid-area: 1 / 1 / 3 / 3; // 指定项目的位置，从某一行开始到某一行结束，从某一列开始到某一列结束
    grid-auto-flow: row | column | row dense | column dense; // 指定项目的排列顺序。
    grid-gap: <grid-row-gap> <grid-column-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; }
    }