前端根本口试题·第二篇——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. 单行文本溢出：

1.     white-space：nowrap; /* 文本禁止换行 */
2.     overflow: hidden; /* 文本溢出隐藏 */
3.     text-overflow: ellipsis; /* 文本溢出部分显示符号 */

复制代码

2. 多行文本溢出:

1.     display： -webkit-box; /* 作为弹性伸缩盒子模型显示 */
2.     -webkit-box-orient: vertical; /* 设置文字溢出排列方向 从上到下排列 */
3.     -webkit-line-clamp: 3; /* 设置行数 */
4.     overflow: hidden; /* 文本溢出隐藏 */

复制代码

6.client, offset,scroll

1.client:
重要与可视地区有关，指元素内容及其边距所占空间巨细

1.     element.clientWidth // 元素可视区域的宽度
2.     element.clientHeight // 元素可视区域的高度
3.     element.clientLeft // 元素左边框宽度
4.     element.clientTop // 元素顶部边框宽度
5.     // 鼠标移入事件
6.     e.clientX, e.clientY // 鼠标据可视区域左侧和顶部距离

复制代码

2.offset:
重要与元素位置和巨细有关，指元素边框外侧与视窗（viewport）的间隔

1.     element.offsetWidth === content.width + padding + border
2.     element.offsetHeight === content.height + padding + border
3.     element.offsetLeft // 元素左边框外侧与视窗（距离最近的定位元素）的距离
4.     element.offsetTop // 元素顶部边框外侧与视窗（距离最近的定位元素）的距离

复制代码

3.scroll:
重要与滚动位置有关，指元素内容超出其可视地区部门所占空间巨细

1.     element.scrollWidth // 元素内容宽度
2.     element.scrollHeight // 元素内容高度
3.     element.scrollLeft // 元素内容左侧与视窗（距离最近的定位元素) 距离
4.     element.scrollTop // 元素内容顶部与视窗（距离最近的定位元素）的距离
5.     // 将元素的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.容器属性
父元素：

1. display: flex; // 定义为弹性布局
2. flex-direction: [
3.     row /* 横向-默认*/
4.     row-reverse /* 横向-反向 */
5.     column /* 纵向-默认 */
6.     column-reverse;/* 纵向-反向 */
7. ]; // 定义主轴方向
8. flex-wrap: [
9.     nowrap /* 不换行-默认 */
10.     wrap /* 换行 */
11.     wrap-reverse /* 反向换行 */
12. ] // 定义是否换行
13. flex-flow: row nowrap// 定义主轴方向和是否换行(是flex-direction与flex-wrap简写)
15. justify-content: [
16.     flex-start /* 主轴起点对齐-默认 */
17.     flex-end /* 主轴终点对齐 */
18.     center /* 主轴居中对齐 */
19.     space-between /* 主轴两端对齐 */
20.     space-around /* 主轴两端对齐，项目之间的间隔相等 */
21. ]
22. // 定义项目在主轴上的对齐方式
24. align-items: [
25.     flex-start /* 交叉轴起点对齐-默认 */
26.     flex-end /* 交叉轴终点对齐 */
27.     center /* 交叉轴居中对齐 */
28.     baseline /* 项目的第一行文字的基线对齐 */
29.     stretch /* 交叉轴的起点和终点对齐，项目的高度平分父元素的高度 */
31. ] // 定义项目在交叉轴上的对齐方式
33. align-content: [
35.     flex-start /* 交叉轴起点对齐-默认 */
36.     flex-end /* 交叉轴终点对齐 */
37.     center /* 交叉轴居中对齐 */
38.     space-between /* 交叉轴两端对齐 */
39.     space-around /* 交叉轴两端对齐，项目之间的间隔相等 */
40.     stretch /* 交叉轴的起点和终点对齐，项目的高度平分父元素的高度 */
42. ] // 定义多根轴线的对齐方式

复制代码

子元素：

1. order: 1; // 定义项目的排列顺序，数值越小，排列越靠前，默认为0
2. flex-grow: 1; // 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
3. flex-shrink: 1; // 定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
4. flex-basis: auto; // 定义在分配多余空间之前，项目占据的主轴空间（main size）
5. flex: none //前三者简写
6.     /* default: 0 1 auto */
8. align-self: [
9.     flex-start /* 交叉轴起点对齐-默认 */
10.     flex-end /* 交叉轴终点对齐 */   
11.     center /* 交叉轴居中对齐 */
12.     baseline /* 项目的第一行文字的基线对齐 */
13.     stretch /* 交叉轴的起点和终点对齐，项目的高度平分父元素的高度 */
14. ]

复制代码

9.网格结构(gird)

1.界说：
一种二维的结构方式，将容器分别成“行”和“列”，产生单位格，然后指定“项目地点”的单位格，可以看作的二维的flex结构。
2.根本属性

1.     display: grid; // 定义为网格布局
2.     grid-template-columns: 100px 100px 100px; // 定义三列，每列宽度为100px
3.     grid-template-rows: 100px 100px 100px; // 定义三行，每行高度为100px
4.     以上两个属性还可以使用fr作为单位，表示比例关系。
5.     grid-template-columns: 1fr 1fr 1fr; // 定义三列，每列宽度比例为1:1:1
6.     grid-template-rows: 1fr 1fr 1fr; // 定义三行，每行高度比例为1:1:1
7.     还可以使用repeat()函数简化重复的值。
8.     grid-template-columns: repeat(3, 33.33%); // 定义三列，每列宽度比例为33.33%:33.33%:33.33%
9.     grid-template-rows: repeat(3, 33.33%); // 定义三行，每行高度比例为33.33%:33.33%:33.33%
10.     grid-column: 1 / 3; // 指定项目的位置，从第一根水平线到第三根水平线
11.     grid-row: 1 / 3; // 指定项目的位置，从第一根垂直线到第三根垂直线
12.     grid-area: <row-start> / <column-start> / <row-end> / <column-end>; // 指定项目的位置，从某一行开始到某一行结束，从某一列开始到某一列结束
13.     grid-area: header; // 指定项目的位置，从某一行开始到某一行结束，从某一列开始到某一列结束
14.     grid-area: 1 / 1 / 3 / 3; // 指定项目的位置，从某一行开始到某一行结束，从某一列开始到某一列结束
15.     grid-auto-flow: row | column | row dense | column dense; // 指定项目的排列顺序。
16.     grid-gap: <grid-row-gap> <grid-column-gap>; // 指定网格线之间的间隔，一行一行地添加间隔。
17.     justify-items: start | end | center | stretch; // 设置单元格内容的水平位置（左中右），跟justify-content属性值一样。
18.     align-items: start | end | center | stretch; // 设置单元格内容的垂直位置（上中下），跟align-content属性值一样。
19.     justify-content: start | end | center | stretch | space-around | space-between | space-evenly; // 设置整个内容区域的水平位置（左中右），跟justify-items属性值一样。
20.     align-content: start | end | center | stretch | space-around | space-between | space-evenly; // 设置整个内容区域的垂直位置（上中下），跟align-items属性值一样。

复制代码

10.垂直居中

1. 1. 绝对定位 + 负margin
2.     .div {
3.         position: absolute;
4.         top: 50%;
5.         margin-top: -100px; /* 高度的一半 */
6.         left: 50%;
7.         margin-left: -100px; /* 宽度的一半 */
8.     }
10. 2. 绝对定位 + transform
11.     .div {
12.         position: absolute;
13.         top: 50%;
14.         left: 50%;
15.         transform: translateY(-50% -50%);
16.     }
17. 3. flex布局
18.     .parent {
19.         display: flex;
20.         justify-content: center;
21.         align-items: center;
22.     }
23. 4. grid布局
24.     .parent {
25.         display: grid；
26.         place-items: center；
27.     }
28. 5. table-cell布局
29.     .parent {
30.         display: table-cell;
31.         vertical-align: middle;
32.         text-align: center;           
33.                                           
34.     }

复制代码

11.使chrome欣赏器支持小于12px的字体

由于谷歌欣赏器内部默认最小字体为12px，小于12px的字体默认以12px表现，但可以设置为0；
办理方案：
1.zoom变焦：

1.     body {
2.         font-size: 10px;
3.         zoom: 0.5; // 0.5倍
4.     }

复制代码

2.利用transform缩放

1.     body {
2.         font-size: 10px;
3.         transform: scale(0.5);
4.     }

复制代码

32.sass

1.界说：
一种CSS预处理处罚器，可以方便地复用css代码。
2.特性

• 嵌套：
  

1.     body{
2.         background-color: $baseColor;
3.         $color2: yellow;
4.         div{
5.         background-color:$color2;
6.         color: $color1;
7.         }
8.         div2{
9.         background-color:$color2;
10.         color: $color1;
11.         }
12.     }

复制代码

• 变量：
  

1.     $color: red;
2.     $width: 100px;
3.     div{
4.         background-color: $color;
5.         width: $width;
6.     }

复制代码

• 肴杂：
  

1.     @mixin border-radius($radius) {
2.         -webkit-border-radius: $radius;
3.         -moz-border-radius: $radius;
4.         border-radius: $radius;
5.     }
6.     div {
7.         @include border-radius(10px);
8.     }

复制代码

• 继承：
  

1.     .button {
2.         border: none;
3.         padding: 10px 20px;
4.         cursor: pointer;
5.     }
6.     .button-primary {
7.         @extend .button;
8.         background-color: blue;
9.         color: white;
10.     }
11.     .button-secondary {
12.         @extend .button;
13.         background-color: gray;
14.         color: white;
15.     }

复制代码

• 导入：
  

1.     @import 'styles.css';

复制代码

• 条件判定：
  

1.     @if $type == danger {
2.         background-color: red;
3.     } @else if $type == warning {
4.         background-color: yellow;
5.     } @else {
6.         background-color: white;
7.     }

复制代码

• 循环：
  

1.     @for $i from 1 through 3 {
2.         .item-#{$i} { width: 2em * $i; }
3.     }

复制代码