前端基础-CSS（2）

四月 6, 2020 CSS学习, 面试题本文总阅读量次

归纳总结CSS基础内容（2）

CSS3新特性

可参考博客
CSS3边框如border-radius（可做扇形），box-shadow,border-image：CSS3边框图片，可以使用图片来创建边框。
CSS3背景如background-size，background-origin规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。
CSS3文字效果：
- text-shadow：在 CSS3 中，text-shadow 可向文本应用阴影。text-shadow:5px 5px 5px #FFFFFF;
- word-wrap :单词太长的话就可能无法超出某个区域，允许对长单词进行拆分，并换行到下一行：p{word-wrap:break-word;}
CSS3 2D，3D转换如transform等；
CSS3动画如transition、animation等
布局方面新增了flex属性
选择器方面新增了例如:first-of-type,:nth-child等选择器
盒模型方面添加了box-sizing来改变盒模型
颜色方面添加opacity(透明)，rgba等
新增单位：vh、vw
最后还有@media查询针对不同的媒体类型/屏幕尺寸定义不同的样式

transition和animation的区别

transition过渡和animation动画大部分属性是相同的，他们都是随时间改变元素的属性值(过渡动画效果)
主要区别:
- transition是过渡，需要一个触发事件才能改变属性，而animation是动画，不需要触发任何事件的情况下会随时间改变属性值(transition例子/animation例子)
1. animation有from .... to来表达从一个状态变为另一个状态
工作场景：transition

用的最多的css属性是？

目前来说最多的是flex属性，方便排版、居中
transform属性和transition属性，前者单独用来协助子绝父相的居中；后者用来实现过渡动画效果（工作场景的例子）；两者搭配实现旋转类的动画效果
@media查询，响应式
background-size的以contain、cover及border-radius我也十分常用

CSS3中对溢出的处理

text-overflow属性，值为clip是修剪文本；ellipsis为显示省略符号来表被修剪的文本；string为使用给定的字符串来代表被修剪的文本

用 CSS 实现多行文本的省略号显示

可参考博客CSS 实现单/多行文本的省略号显示

CSS选择器，优先级

可参考百度前端技术学院第三天学习总结（CSS文本、选择器）（1）、百度前端技术学院第四天学习笔记（选择器的优先级、了解级联、!important）（4）
** id 选择器，class 选择器，标签选择器，属性选择器，伪元素选择器，伪类选择器**等
- 注意：
  - 属性选择器中特殊的筛选： ^=指定值开头、 $=指定值结尾、 *=包含指定值
    - 搭配querySelectorAll筛选出open_guard_开头_decode结尾且style中包含display: none的所有元素： document.querySelectorAll('[class^="open_guard_"][class$="_decode"][style*="display: none"]');
同一元素引用了多个样式时，排在后面的样式属性的优先级高；
样式选择器的类型不同时，优先级顺序为：内联样式 > id 选择器 > class 选择器/属性选择器或伪类 > 标签选择器/伪元素；
标签之间存在层级包含关系时，后代元素会继承祖先元素的样式。如果后代元素定义了与祖先元素相同的样式，则祖先元素的相同的样式属性会被覆盖。继承的样式的优先级比较低，至少比标签选择器的优先级低；
带有**!important 标记的样式属性的优先级最高**；
样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式

属性和伪类选择器的优先级

属性选择器和伪类选择器优先级相同

【看】CSS布局

六种布局方式总结：圣杯布局、双飞翼布局、Flex布局、绝对定位布局、表格布局、网格布局(圣杯布局和双飞翼布局)
圣杯布局是指布局从上到下分为header、container、footer，然后container部分定为三栏布局。圣杯布局的缺陷在于 center 是在 container 的padding中的，因此宽度小的时候会出现混乱。
双飞翼布局给center 部分内加了一个 center-inner 来通过设置margin主动地把页面撑开，这样宽度小的时候不会出现混乱
Flex布局是由CSS3提供的一种方便的布局方式
绝对定位布局/)是给container 设置position: relative和overflow: hidden，因为绝对定位的元素的参照物为第一个postion不为static的祖先元素。 left 向左浮动，right 向右浮动。center 使用绝对定位，通过设置left和right并把两边撑开。 center 设置top: 0和bottom: 0使其高度撑开
表格布局的好处是能使三栏的高度统一
网格布局可能是最强大的布局方式了，使用起来极其方便，但目前而言，兼容性并不好。二维布局，可以同时操作多行多列

两栏布局（左侧固定，右侧自适应）

参考《七种实现左侧固定，右侧自适应两栏布局的方法》，里面有代码可参考
常用的宽度自适应的方法：
- 利用block水平的元素宽度能随父容器调节的流动特性
- 利用CSS中的calc()方法来动态设定宽度
- 利用flex或grid
需知左盒子宽度（用于计算右侧宽度）+两盒子间距：
- 双inline-block+calc(100% - 左侧宽px)：由于使用了inline-block，所以需要注意父元素font-size:0来消除子元素之间的空格，子元素设置vertical-align: top;顶端对齐
- 双float+calc(100% - 左侧宽px)：父元素注意创建BFC清除浮动（display:flow-root）
- 左侧float+margin-left:(左侧盒子宽+间距)：父元素注意创建BFC清除浮动（display:flow-root）
- 左侧子绝父相+margin-left:(左侧盒子宽+间距)
  - 注意：绝对定位脱离文档流，所以若左侧盒子高于右侧盒子，就会超出父容器的高度，只能通过设置父容器的min-height来防止这种情况
  - 绝对定位的高度塌陷不能通过BFC解决，只能靠父元素高度撑起来

只需知道间距：

左侧float+右侧BFC：
- 设置左侧浮动，将自身高度塌陷，使得其它块级元素可以和它占据同一行的位置
- 右列为 div 块级元素，利用块元素的流特性占满整行（此时左右重叠）
- 右列设置overflow: hidden或auto形成 BFC，使右侧盒子与左列的浮动元素不重叠，不占满整行
- 可参考这里
【最简单】flex： 左边flex: 0 0 auto;即原始大小不缩放，右边flex: 1 1 auto;即按照比例缩放
- flex默认值是0 1 auto，所以右边设置flex: 1;也行
- 左边也可以设置flex为none然后给定width，一样是不伸缩
- 注意，flex容器的一个**默认属性值:align-items: stretch;**导致了列等高的效果，需要设置: align-items: flex-start;（用start也是一样的）

grid布局：新型的布局方式，可以满足需求，但这并不是它发挥用处的真正地方

grid布局还有一个值得注意的小地方和flex不同：在使用margin时，grid布局默认是box-sizing设置的盒宽度之间的位置。而flex则是使用两个div的border或者padding外侧之间的距离

在Grid布局中，默认情况下，margin 不会影响网格项之间的位置，而是被包含在网格项的盒模型中。这意味着网格项的大小不会受到 margin 的影响，margin 的空间会被计算在网格项内部。这与 box-sizing 属性的值有关，box-sizing 的默认值为 content-box，所以 margin 不会增加网格项的尺寸，而是包含在内（手动设置 border-box 则可改变，或者可以用 grid-gap 属性设置间距）

而在Flex布局中，默认情况下，margin 会影响弹性项之间的位置，而不会被包含在弹性项的盒模型中。这是因为Flex布局中 box-sizing 的默认值是 border-box，所以 margin 会被包含在弹性项的尺寸内

.wrapper-grid {
    display: grid;
    /* 设置列宽,fr单位:代表网格容器中可用空间的一等份 */
    grid-template-columns: 120px 1fr;
    /* grid布局也有列等高的默认效果,需要设置align-items */
    align-items: start;
}

.wrapper-grid .left,
.wrapper-grid .right {
    box-sizing: border-box;
}

.wrapper-grid .left {
    /* 将元素放置在第1列 */
    grid-column: 1;
}

.wrapper-grid .right {
    /* 将元素放置在第2列 */
    grid-column: 2;
}

父容器极限小的情况下不同方案的表现可看文章

calc属性

calc函数用于动态计算长度值。
任何长度值都可以使用calc()函数计算
注意：运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
当其为负数时，会使用最小值而不是消失

三栏布局

其实圣杯布局和双飞翼布局本质就是三栏布局
实现思路：先把最重要的身体部分放好，然后再将翅膀移动到适当的地方
三列布局又分为两种，两列定宽一列自适应，以及两侧定宽中间自适应，可参考CSS布局面试题、圣杯布局和双飞翼布局的例子
- 两列定宽一列自适应：
  1. 使用float+margin：
    - 左左右设置浮动/都设置成左浮动
  2. 使用float+overflow：
    - 给div设置float：left，再给right的div设置overflow:hidden。
    - 这样子两个盒子浮动，另一个盒子触发bfc达到自适应>
  3. 使用**position(子绝父相)**：
    - 父级div设置position：relative，三个子级div设置position：absolute
    - 这个要计算好盒子的宽度和间隔去设置位置，兼容性比较好。
  4. 使用table实现：
    - 父级div设置display：table，设置border-spacing：10px//设置相邻单元格的边框间的距离，取值随意。
    - 子级div设置display:table-cell
    - 这种方法兼容性好，适用于高度宽度未知的情况，但是margin失效，设计间隔比较麻烦
  5. flex实现：
    - parent的div设置display：flex；
    - left和center的div设置margin-right；然后right 的div设置flex：1；
    - 这样子right自适应，但是flex的兼容性不好
  6. grid实现：
    - parent的div设置display：grid，设置grid-template-columns属性，固定第一列第二列宽度，第三列auto
- 对于两侧定宽中间自适应的布局，对于这种布局需要把center放在前面，可以采用双飞翼布局、圣杯布局来实现，也可以使用上述方法中的grid，table，flex，position实现。

圣杯布局

点击查看圣杯布局代码+效果，重点就是 三栏浮动中间100%宽度+负边距同行+三栏父元素padding向中靠+左右两栏相对定位去左右

html代码中 middle部分首先要放在container的最前部分。然后是left,right
将三者都 float:left （因为middle部分满我们给了百分之百的宽度）
利用负边距布局：此时middle占满了，所以要把left拉到最左边，使用margin-left:-100%，让右边的盒子上去，也就是margin-left：-200px;（注意是负的自己的宽度，这里不是百分号！）
解决中间盒子里的内容被左右盒子覆盖的问题：这时left拉回来了，但会覆盖middle内容的左端，要把middle内容拉出来，所以在外围container加上 padding:0 200px
1. 先利用父级元素设置左右padding的值把父级的三个子盒子往中间挤
2. 再给左右两个盒子加相对定位+left/right

双飞翼布局

重点就是 三栏浮动中间100%宽度+负边距同行+三栏中间盒子main内增加一个内层div（main-inner）设置margin空出左右两栏位置

左翅 left 有200px,右翅 right 是200px，身体main自适应未知
html代码中，main要放最前边，再放left、right
将main left right 都float:left
将main占满 width:100%
此时main占满了，所以要把left拉到最左边，使用margin-left:-100% 同理 right使用margin-left:-200px（到这一步和圣杯布局都是一样的）
main内容被覆盖了，圣杯布局是给中间三栏的父元素设置padding将两侧位置空出放置left right。双飞翼布局则使用margin，给三栏的中间盒子main增加一个内层div（main-inner）设置margin, 然后margin:0 200px
main正确展示

注意：第6步一定是给中间盒子增加一个内盒子，如果直接在中间盒子上更改margin整个布局就乱了（如下，右边盒子在最外围看不见的地方，左边盒子右移）因为中间3个盒子都是浮动的，而float属性对兄弟元素的影响是会贴着旁边float元素，所以中间盒子向右边移动以后左边盒子也会跟着向右边移动，所以需要在中间盒子内部放置块元素来调整margin避免影响其他浮动元素

浮动布局时，三个div的生成顺序有没有影响

有，设置第1、3列为浮动，中间使用margin将空间留出来给普通元素。
为防止第三列浮动元素受到中间普通元素文本的影响，需要在HTML中将最左和最右两个浮动写在一起，中间的普通元素放在最后。
区别可参考CSS布局面试题

Flex布局

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。可参考我以前的博客百度前端技术学院第七天学习笔记（CSS flexbox）
- 父元素（flex容器）的属性中重点区分：
  - justify-content属性定义子项在主轴上的对齐方式（位置）。【单个子项为单位】
  - align-items属性定义子项在交叉轴上的对齐方式（位置）。【单个子项为单位】
  - 而align-content属性只适用多行的flex子项（也就是flex父容器中的子项不止一行时该属性才有效果）
    - 当flex父容器在交叉轴上有多余的空间时，且属性值为：flex-start、flex-end、center、stretch时，将所有子项作为一个整体单位沿交叉轴进行对齐
- 子元素容易忘记的属性：
  - align-self属性定制align-items

当flex父容器在交叉轴上有多余的空间时，且属性值为：space-between/space-around时，将单行子项作为一个单位沿交叉轴进行对齐。

Flex 布局教程：语法篇、Flex 布局教程：实例篇做骰子/网格布局/百分比布局/圣杯布局、Flexbox 布局的最简单表单
布局的传统解决方案，基于盒状模型，依赖display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
注意：如果你的项目需要支持非常旧的浏览器，可能还需要考虑一些兼容性策略。不过，对于大多数现代的项目，Flexbox 是一个强大且兼容性良好的布局方式，建议优先使用它来构建页面布局

瀑布流布局（flex布局/CSS3的column属性）

可参考博客

使用flex布局实现：
1. 最外层用flex并设置为行布局：flex-direction: row;
2. 内部使用flex并设置为列布局flex-direction: column;
3. 每一个列布局内放置若干flex子项
使用CSS3的column属性实现：可参考博客

grid布局

可参考掘金和菜鸟教程
容器属性和子项属性初始学习可优先参考这篇文章了解大概，作者给每个属性都做了图示和例子，赞！
- 部分简便用法菜鸟和MDN虽然有但是需要自己找，不过好处就是更加详细且可以动手尝试看效果，更适合后期查资料用
易忘知识点：
- 容器属性：
  - 简化定义网格模板的过程（可用于grid-template-columns/grid-template-rows/grid-template）:
    - repeat() & auto-fill 关键字 & fr 关键字 & minmax() & auto 关键字 & []定义网格线的名称
  - grid-template-areas定义网格布局的模板:
    - 通过菜鸟里多个例子会比较好理解，这个例子非常明显
    - 注意: grid-template-areas 属性并不涉及网格单元的宽度比例，它只是用于定义网格布局的模板，而网格单元的大小和宽度是由其他属性（如 grid-template-columns 和 grid-template-rows）来定义的
    - 子项的grid-area 属性: 对网格元素进行命名，命名的网格元素可以通过容器的 grid-template-areas 属性来引用，用于设置网格布局
  - 间距属性: grid-column-gap 和 grid-row-gap
  - align-items属性设置子元素在其网格区域内的块向轴(纵向)上的位置（上中下），默认stretch
  - justify-items属性:设置子元素在其网格区域内的行内轴(横向)上的位置（左中右）， 默认stretch
    - 和flex很是不同，出现了justify-items属性
    - 区分justify-content属性： 单元格在在容器里面的水平位置（左中右）；align-content 属性是整个内容区域（多行）在容器中的垂直位置（上中下）
    - 例子：这里图示很生动，四个属性区别可见codepen，MDN上有文字叙述同一属性在flex和grid中的表现
  - 简写：
    - place-items属性: align-items属性和justify-items属性
    - place-content属性: align-content属性和justify-content属性
    - grid-template属性: grid-template-columns、grid-template-rows和grid-template-areas
    - grid-gap属性:grid-row-gap 和 grid-column-gap
    - grid属性: CSS 所有网格容器的简写属性，包括grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow、grid-column-gap 和 grid-row-gap
- 子项属性： (网格元素即子项)
  - grid-area属性: 对网格元素进行命名 ，命名的网格元素可以通过容器的 grid-template-areas 属性来引用，用于设置网格布局
  - grid-column-start 属性定义了网格元素从哪一列开始
    - 注意：网格布局的列数是从1开始的，而不是从0开始
  - grid-column-end属性定义了网格元素跨越多少列，或者在哪一列结束
  - grid-row-start属性指定从哪一行开始显示网格元素
  - grid-row-end属性指定哪一行停止显示网格元素，或设置跨越多少行
  - justify-self属性设置子元素在其网格区域内的行内轴(横向)上的位置（上中下），默认stretch ，跟justify-items属性的用法完全一致，但只作用于单个项目
    - 这个也是新出现的属性，grid有但flex没得
  - align-self属性设置 子元素在其网格区域内的块向轴(纵向)上的位置（上中下），默认stretch ，跟align-items属性的用法完全一致，也是只作用于单个项目
  - 简写：
    - grid-column属性是grid-column-start和grid-column-end的合并简写形式
      - grid-column指定元素跨越的列的属性，属性值可以是具体的列号/范围。在“实现两列布局”中有用到grid-column: 1;表示将元素放置在第1列
    - grid-row属性是grid-row-start和grid-row-end的合并简写形式
    - place-self属性是align-self属性和justify-self属性的合并简写形式

flot、flex与grid如何选+区别

三选一应该如何选可参考这篇文章的图，里面也有几个小游戏可以练习各个属性，还有贴主的设计经验小tips和使用场景，非常赞
- float布局例子、flex布局属性练习小游戏、grid布局属性练习小游戏
  
  float：当需要兼容IE浏览器时使用float布局，当使用float布局时不需要考虑移动端，因为手机上没有人用IE浏览器，而这个布局是专门为IE准备的
  flex：当不需要兼容IE浏览器又不需要兼容最新浏览器时可以使用flex布局(必要时可以使用负margin来布局)
  grid：当只兼容最新浏览器时可以使用grid布局
flex与grid区别可参考这篇文章，图示很明确的展示出grid的“二维”如何体现
简单理解：flex是一维布局，只能同时操作一列/一行，适合做局部布局，比如导航栏组件；而Grid是二维布局，将容器划分成了“行”和“列”，产生了一个个的网格，可以同时操作多行多列 ，通常用于整个页面的布局规划

Grid 可以做Flexbox做不了的事，Flexbox 比 Grid 兼容性更好，他们可以共同工作。Grid item可以成为flexbox容器，flex item可以成为grid 容器
grid布局还有一个值得注意的小地方和flex不同：在使用margin时，grid布局默认是box-sizing设置的盒宽度之间的位置。而flex则是使用两个div的border或者padding外侧之间的距离
- 在Grid布局中，默认情况下，margin 不会影响网格项之间的位置，而是被包含在网格项的盒模型中。这意味着网格项的大小不会受到 margin 的影响，margin 的空间会被计算在网格项内部。这与 box-sizing 属性的值有关，box-sizing 的默认值为 content-box，所以 margin 不会增加网格项的尺寸，而是包含在内（手动设置 border-box 则可改变，或者可以用 grid-gap 属性设置间距）
- 而在Flex布局中，默认情况下，margin 会影响弹性项之间的位置，而不会被包含在弹性项的盒模型中。这是因为Flex布局中 box-sizing 的默认值是 border-box，所以 margin 会被包含在弹性项的尺寸内

改变DOM元素的字体颜色，不在它身上进行操作

可以更改父元素的color

line-height和height的区别

line-height一般是指布局里面一段文字上下行之间的高度，是针对字体来设置的
height一般是指容器的整体高度

设置元素的背景颜色，会填充哪些区域

background-color设置的背景颜色会填充元素的content、padding、border区域

重绘和重排，减少重绘和重排

可参考从输入url到页面显示都经历了什么
DOM的变化影响到了预算内宿的几何属性比如宽高，浏览器重新计算元素的几何属性，其他元素的几何属性也会受到影响，浏览器需要重新构造渲染这些几何属性，这个过程称之为重排（回流）
浏览器将受到影响的部分重新绘制在屏幕上 的过程称为重绘
重排一定导致重绘，重绘不一定导致重排
引起重排重绘的原因有：
- 添加或者删除可见的DOM元素
- 元素尺寸位置的改变
- 增加或移出样式表
- 操作class属性
- 浏览器页面初始化
- 浏览器窗口大小发生改变
减少重绘重排，即减少对render tree的操作，并减少对一些style信息的请求，合理利用浏览器优化策略，方法有：
- 对DOM查询做缓存
- 使用csstext,className 一次性改变属性，减少设置多项内联样式
- 使用DocumentFragment将频繁的DOM操作改为一次性操作
- 对于多次重排的元素，比如说动画。使用绝对定位脱离文档流，使其不影响其他元素，减少render 树的规模
- table布局的渲染与普通DOM节点的操作相比，性能消耗更大，如果可以，尽量减少table布局的使用
- 使用虚拟dom脚本库，例如react等

让文档脱离文档流有哪些方法

float：使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围
absolute：绝对定位，因为使用absolute脱离文档流后的元素，是相对于该元素的父类（及以上，如果直系父类元素不满足条件则继续向上查询）元素进行定位的，并且这个父类元素的position必须是非static定位的（static是默认定位方式）
fixed：完全脱离文档流，相对于浏览器窗口进行定位。（相对于浏览器窗口就是相对于html元素）

css预处理器有什么

less，sass等