CSS（上）

CSS文章/教程1年前 (2023)发布勤奋小助

0 0

css sprite是什么,有什么优缺点

概念：将多个小图片拼接到⼀个图⽚中。通过 background-position 和元素尺寸调节需要显示的背景图案。
优点：
- 减少 HTTP 请求数，极⼤地提高页面加载速度
- 增加图片信息重复度，提高压缩比，减少图片大小
- 更换风格方便，只需在⼀张或几张图片上修改颜色或样式即可实现
缺点：
- 图片合并麻烦
- 维护麻烦，修改⼀个图片可能需要从新布局整个图片，样式

display: none; 与 visibility: hidden; 的区别

联系：它们都能让元素不可见
区别：
- display:none ; 会让元素完全从渲染树中消失，渲染的时候不占据任何空间。
- visibility: hidden ; 不会让元素从渲染树消失，渲染时元素继续占据空间，只是内容不可见。
- display: none ; 是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。
- visibility: hidden; 是继承属性，子孙节点消失由于继承了 hidden ，通过设置 visibility: visible; 可以让子孙节点显式。
- 修改常规流中元素的 display 通常会造成文档重排。修改 visibility 属性只会造成本元素的重绘。
- 读屏器不会读取 display: none ; 元素内容；会读取 visibility: hidden; 元素内容

link 与 @import 的区别

link 是 HTML 方式， @import 是 CSS 方式
link 最大限度支持并行下载， @import 过多嵌套导致串行下载，出现 FOUC (文档样式短暂失效)
link 可以通过 rel=”alternate stylesheet” 指定候选样式
浏览器对 link 支持早于 @import ，可以使用 @import 对老浏览器隐藏样式
@import 必须在样式规则之前，可以在 css 文件中引用其他文件
总体来说： link 优于 @import

什么是FOUC? 如何产生的？如何避免？

Flash Of Unstyled Content ：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再从新显示文档，造成页面的闪烁，又简称：文档样式短暂失效。
原因：
- 使用 import 方法导入样式表；
- 将样式表放在页面底部；
- 有几个样式表，放在 html 结构的不同位置。
解决方法：把样式表放到文档的 <head> 中

清除浮动的几种方式，各自的优缺点

父级 div 定义 hight
- 原理：父级 div 手动定义 height，就解决了父级 div 无法自动获取到高度的问题。
- 优点：简单、代码少、容易掌握。
- 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级 div 不一样时，会产生问题。
结尾处加空 div 标签 clear:both
- 原理：添加一个空 div，利用 css 提高的 clear:both 清除浮动，让父级 div 能自动获取到高度。
- 优点：简单、代码少、浏览器支持好、不容易出现怪问题
- 缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空 div，让人感觉很不好。
父级 div 定义伪对象 :after 和 zoom
- 原理：IE8以上和非IE浏览器才支持 :after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6，ie7浮动问题。
- 优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）。
- 缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。
父级 div 定义 overflow:hidden;
- 原理：必须定义 width 或 zoom:1，同时不能定义 height，使用 overflow:hidden 时，浏览器会自动检查浮动区域的高度
- 优点：简单、代码少、浏览器支持好。
- 缺点：不能和 position 配合使用，因为超出的尺寸的会被隐藏。
父级 div 也一起浮动
- 原理：所有代码一起浮动，就变成了一个整体。
- 优点：没有优点。
- 缺点：会产生新的浮动问题
父级 div 定义 display:table;
- 原理：将 div 属性变成表格。
- 优点：没有优点。
- 缺点：会产生新的未知问题。

为什么要初始化CSS样式?

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。
当然，初始化样式会对 SEO 有⼀定的影响，但⻥和熊掌不可兼得，但力求影响最小的情况下初始化。

css3有哪些新特性？

新增各种 css 选择器
圆角 border-radius
多列布局
阴影和反射
文字特效 text-shadow
线性渐变
旋转 transform

CSS3新增伪类有那些？

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯⼀的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:after 在元素之前添加内容,也可以⽤来做清除浮动。
:before 在元素之后添加内容。
:enabled 已启用的表单元素。
:disabled 已禁用的表单元素。
:checked 单选框或复选框被选中。

display有哪些值？说明他们的作用

block 转换成块元素。
inline 转换成行内元素。
none 设置元素不可见。
inline-block 像行内元素⼀样显示，但其内容象块类型元素⼀样显示。
list-item 像块类型元素⼀样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示
inherit 规定应该从⽗元素继承 display 属性的值

谈谈你对CSS盒模型的理解

CSS盒模型定义了盒的每个部分包含 margin, border, padding, content 。根据盒子大小的计算方式不同盒模型分成了两种，标准盒模型和怪异盒模型。
标准模型，给盒设置 width 和 height，实际设置的是 content box。padding 和 border 再加上设置的宽高一起决定整个盒子的大小。
怪异盒模型，给盒设置 width 和 height，包含了 padding 和 border，设置的 width 和 height 就是盒子实际的大小。
默认情况下，盒模型都是标准盒模型设置标准盒模型：box-sizing:content-box；设置怪异盒模型：box-sizing:border-box；

CSS优先级算法如何计算？

优先级就近原则，同权重情况下样式定义最近者为准
载⼊样式以最后载入的定位为准
优先级为: !important > id > class > tag ; !important 比内联优先级高

CSS不同选择器的权重(CSS层叠的规则)

！important 规则最重要，大于其它规则
行内样式规则，加 1000
对于选择器中给定的各个 id 属性值，加 100
对于选择器中给定的各个类属性、属性选择器或者伪类选择器，加 10
对于选择其中给定的各个元素标签选择器，加1
如果权值⼀样，则按照样式规则的先后顺序来应⽤，顺序靠后的覆盖靠前的规则

position的属性有哪些？ relative和absolute定位原点是？

relative ：生成相对定位的元素，相对于其正常位置进行定位

absolute ：生成绝对定位的元素，相对于 static 定位以外的第⼀个父元素进行定位
fixed ：生成绝对定位的元素，相对于浏览器窗口进行定位
static：默认值。没有定位，元素出现在正常的流中
inherit ：规定从父元素继承 position 属性的值

PNG\GIF\JPEG的区别及如何选？

GIF
- 8 位像素， 256 色
- 无损压缩
- 支持简单动画
- 支持 boolean 透明
- 适合简单动画
JPEG
- 颜色限于 256
- 有损压缩
- 可控制压缩质量
- 不支持透明
- 适合照片
PNG
- 有 PNG8 和 truecolor PNG
- PNG8 类似 GIF 颜色上限为 256 ，文件小，支持 alpha 透明度，无动画
- 适合图标、背景、按钮

行内元素 float:left 后是否变为块级元素？

行内元素设置成浮动之后变得更加像是 inline-block（行内块级元素，设置成这个属性的元素会同时拥有行内和块级的特性，最明显的不同是它的默认宽度不是 100% ），这时候给行内元素设置 padding-top 和 padding-bottom 或者 width 、 height 都是有效果的。

在网页中的应该使用奇数还是偶数的字体？为什么呢？

偶数字体
偶数字号相对更容易和 web 设计的其他部分构成比例关系

::before 和 :after中双冒号和单冒号有什么区别？解释⼀下这2个冒号的作用

单冒号( : )⽤于 CSS3 伪类，双冒号( :: )用于 CSS3 伪元素
用于区分伪类和伪元素

伪类和伪元素的区别

伪类表状态
伪元素是真的有元素
前者单冒号，后者双冒号

如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是 60Hz ，即 1 秒刷新 60 次，所以理论上最⼩间隔为 1/60*1000ms ＝ 16.7ms

CSS合并方法

避免使用 @import 引入多个 css 文件，可以使用 CSS 工具将 CSS 合并为⼀个 CSS ⽂件，例如使用 Sass\Compass 等

列出你所知道可以改变页面布局的属性

position 、 display 、 float 、 width 、 height 、 margin 、 padding 、top 、 left 、 right 等

CSS在性能优化方面的实践

css 压缩与合并、 Gzip 压缩
css 文件放在 head 里、不要用 @import
尽量用缩写、避免用滤镜、合理使用选择器

CSS3动画（简单动画的实现，如旋转等）

依靠 CSS3 中提出的三个属性： transition 、 transform 、 animation
transition ：定义了元素在变化过程中是怎么样的，包含 transition-property 、transition-duration 、 transition-timing-function 、 transition-delay 。
transform ：定义元素的变化结果，包含 rotate 、 scale 、 skew 、 translate 。
animation ：动画定义了动作的每⼀帧（ @keyframes ）有什么效果，包括 animation-name ， animation-duration 、 animation-timing-function 、 animation-delay 、 animation-iteration-count 、 animation-direction

base64的原理及优缺点

优点可以加密，减少了 HTTTP 请求，适用于小的图片
缺点是需要消耗 CPU 进行编解码

stylus/sass/less区别

均具有 “变量”、“混合”、“嵌套”、“继承”、“颜色混合” 五大基本特性
sass 和 less 语法较为严谨，less 要求⼀定要使用大括号 “ {} ”， sass 和 stylus 可以通过缩进表示层次与嵌套关系
scss 无全局变量的概念， less 和 stylus 有类似于其它语言的作用域概念
sass 是基于 Ruby 语言的，而 less 和 stylus 可以基于 NodeJS NPM 下载相应库后进行编译；

Sass、LESS是什么？大家为什么要使用他们？

他们是 CSS 预处理器，是 CSS 上的⼀种抽象层，是⼀种特殊的语法/语言编译成CSS 。
例如Less是⼀种动态样式语言，将CSS赋予了动态语言的特性，如变量，继承，运算，函数。
LESS 既可以在客户端上运⾏ (⽀持 IE 6+ , Webkit , Firefox )，也可以在服务端运行 (借助 Node.js )
为什么要使用它们？
- 结构清晰，便于扩展。
- 可以方便地屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
- 可以轻松实现多重继承。
- 完全兼容 CSS 代码，可以⽅便地应用到老项目中。

postcss的作用

可以直观的理解为：它就是⼀个平台。为什么说它是⼀个平台呢？因为我们直接用它，感觉不能干什么事情，但是如果让⼀些插件在它上面跑，那么将会很强大
PostCSS 提供了⼀个解析器，它能够将 CSS 解析成抽象语法树
通过在 PostCSS 这个平台上，我们能够开发⼀些插件，来处理我们的 CSS ，比如热门的： autoprefixer
postcss 可以对 sass 处理过后的 css 再处理，最常见的就是 autoprefixer

如何美化CheckBox？

<label> 属性 for 和 id
隐藏原生的 <input>
:checked + <label>

自适应布局

思路：
- 左侧浮动或者绝对定位，然后右侧 margin 撑开
- 使⽤ <div> 包含，然后靠负 margin 形成 bfc
- 使⽤ flex

什么是外边距重叠？重叠的结果是什么？

外边距重叠就是 margin-collapse

在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成⼀个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
折叠结果遵循下列计算规则：
- 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
- 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
- 两个外边距⼀正⼀负时，折叠结果是两者的相加的和。

rgba() 和 opacity 的透明效果有什么不同？

rgba() 和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度。
而 rgba() 只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）

css中可以让文字在垂直和水平方向上重叠的两个属性是什么？

垂直方向： line-height
水平方向： letter-spacing

如何垂直居中⼀个浮动元素？

方法一：

CSS（上）

方法二：

CSS（上）

如何垂直居中⼀个 <img> ?（用更简便的方法。）

水平居中的方法

元素为行内元素，设置父元素 text-align:center
如果元素宽度固定，可以设置左右 margin 为 auto ;
如果元素为绝对定位，设置父元素 position 为 relative ，元素设 left: 0 ; right: 0 ; margin: auto ;
使用 flex-box 布局，指定 justify-content 属性为 center
display 设置为 tabel-cell

垂直居中的方法

将显示方式设置为表格， display:table-cell ,同时设置 vertial-align：middle
使用 flex 布局，设置为 align-item：center

绝对定位中设置 bottom:0,top:0 ,并设置 margin:auto
绝对定位中固定高度时设置 top:50%，margin-top 值为高度⼀半的负值
文本垂直居中设置 line-height 为 height 值

px和em的区别

px 和 em 都是长度单位。
px 的值是固定的，指定是多少就是多少，计算比较容易。 em 的值不是固定的，并且 em 会继承父级元素的字体大小。
浏览器的默认字体高都是 16px 。所以未经调整的浏览器都符合: 1em=16px 。那么 12px=0.75em , 10px=0.625em 。

知道css有个content属性吗？有什么作用？有什么应用？

css的 content 属性专门应用在 before/after 伪元素上，用于来插入生成内容。最常见的应用是利用伪类清除浮动。

/**⼀种常⻅利⽤伪类清除浮动的代码**/
.clearfix:after {
   content:"."; //这⾥利⽤到了content属性
   display:block;
   height:0;
   visibility:hidden;
   clear:both; 
}
.clearfix {
   *zoom:1; 
}

如何使用CSS实现硬件加速？

硬件加速是指通过创建独立的复合图层，让GPU来渲染这个图层，从而提高性能。

⼀般触发硬件加速的 CSS 属性有 transform 、 opacity 、 filter ，为了避免2D动画在开始和结束的时候的 repaint 操作，⼀般使用 tranform:translateZ(0) ；

重绘和回流（重排）是什么，如何避免？

重绘：元素样式的改变（但宽高、大小、位置等不变）
回流：元素的大小或者位置发生改变（当页面布局和几何信息发生改变的时候），触发了重新布局导致渲染树重新计算布局和渲染
注意：回流一定会触发重绘，而重绘不一定会回流

如何避免：
- 不在布局信息改变时做 DOM 查询
- 使用 cssText 或者 className ⼀次性改变属性
- 使用 fragment
- 对于多次重排的元素，如动画，使用绝对定位脱离⽂档流，让他的改变不影响到其他元素

说⼀说css3的 animation

css3 的 animation 是 css3 新增的动画属性，这个 css3 动画的每⼀帧是通过 @keyframes 来声明的， keyframes 声明了动画的名称，通过 from 、 to 或者是百分比来定义。
每⼀帧动画元素的状态，通过 animation-name 来引用这个动画，同时 css3 动画也可以定义动画运行的时长、动画开始时间、动画播放方向、动画循环次数、动画播放的方式。
这些相关的动画子属性有：
- animation-name 定义动画名
- animation-duration 定义动画播放的时长
- animation-delay 定义动画延迟播放的时间
- animation-direction 定义动画的播放方向
- animation-iteration-count 定义播放次数
- animation-fill-mode 定义动画播放之后的状态
- animation-play-state 定义播放状态，如暂停运行等
- animation-timing-function 定义播放的方式，如恒速播放、艰涩播放等