二、$CSS部分

向右看齐 2021-12-12 01:13 295阅读 0赞

### 1、css sprite是什么,有什么优缺点 ###

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

### 2、`display: none;`与`visibility: hidden;`的区别 ###

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

### 3、`link`与`@import`的区别 ###

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

### 4、什么是FOUC?如何避免 ###

*  `Flash Of Unstyled Content`：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再从新显示文档，造成页面闪烁。
 *  解决方法：把样式表放到文档的`head`

### 5、如何创建块级格式化上下文(block formatting context),BFC有什么用 ###

*  创建规则：
    
     *  根元素
     *  浮动元素（`float`不是`none`）
     *  绝对定位元素（`position`取值为`absolute`或`fixed`）
     *  `display`取值为`inline-block`,`table-cell`, `table-caption`,`flex`, `inline-flex`之一的元素
     *  `overflow`不是`visible`的元素

*  作用：
    
     *  可以包含浮动元素
     *  不被浮动元素覆盖
     *  阻止父子元素的`margin`折叠

### 6、display,float,position的关系 ###

*  如果`display`为`none`，那么`position`和`float`都不起作用，这种情况下元素不产生框
 *  否则，如果`position`值为`absolute`或者`fixed`，框就是绝对定位的，`float`的计算值为`none`，`display`根据下面的表格进行调整。
 *  否则，如果`float`不是`none`，框是浮动的，`display`根据下表进行调整
 *  否则，如果元素是根元素，`display`根据下表进行调整
 *  其他情况下`display`的值为指定值
 *  总结起来：**绝对定位、浮动、根元素都需要调整`display`**

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

*  父级`div`定义`height`
 *  结尾处加空`div`标签`clear:both`
 *  父级`div`定义伪类`:after`和`zoom`
 *  父级`div`定义`overflow:hidden`
 *  父级`div`也浮动，需要定义宽度
 *  结尾处加`br`标签`clear:both`
 *  比较好的是第3种方式，好多网站都这么用

### 8、为什么要初始化CSS样式? ###

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

### 9、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` 单选框或复选框被选中

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

*  `block` 象块类型元素一样显示。
 *  `none` 缺省值。象行内元素类型一样显示。
 *  `inline-block` 象行内元素一样显示，但其内容象块类型元素一样显示。
 *  `list-item` 象块类型元素一样显示，并添加样式列表标记。
 *  `table` 此元素会作为块级表格来显示
 *  `inherit` 规定应该从父元素继承 `display`属性的值

### 11、介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？ ###

*  有两种， `IE`盒子模型、`W3C`盒子模型；
 *  盒模型： 内容(content)、填充(`padding`)、边界(`margin`)、 边框(`border`)；
 *  区 别： `IE`的c`ontent`部分把`border` 和 `padding`计算了进去;

### 12、CSS优先级算法如何计算？ ###

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

### 13、对BFC规范的理解？ ###

*  它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用

### 14、谈谈浮动和清除浮动 ###

*  浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上

### 15、position的值， relative和absolute定位原点是 ###

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

### 16、display:inline-block 什么时候不会显示间隙？(携程) ###

*  移除空格
 *  使用`margin`负值
 *  使用`font-size:0`
 *  `letter-spacing`
 *  `word-spacing`

### 17、PNG,GIF,JPG的区别及如何选 ###

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

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

*  浮动后，行内元素不会成为块状元素，但是可以设置宽高。行内元素要想变成块状元素，占一行，直接设置`display:block`;。但如果元素设置了浮动后再设置`display:block`;那就不会占一行。

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

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

### 20、::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用 ###

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

### 21、如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里） ###

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

### 22、CSS合并方法 ###

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

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

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

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

*  `position`、`display`、`float`、`width`、`heigh`t、`margin`、`padding`、`top`、`left`、`right`、\`

### 25、CSS在性能优化方面的实践 ###

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

### 26、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`

### 27、base64的原理及优缺点 ###

*  优点可以加密，减少了`http`请求
 *  缺点是需要消耗`CPU`进行编解码

### 28、几种常见的CSS布局 ###

#### 流体布局 ####

.left {
                   
            float: left;
            width: 100px;
            height: 200px;
            background: red;
        }
        .right {
                   
            float: right;
            width: 200px;
            height: 200px;
            background: blue;
        }
        .main {
                   
            margin-left: 120px;
            margin-right: 220px;
            height: 200px;
            background: green;
        }

#### 圣杯布局 ####

.container {
                   
                margin-left: 120px;
                margin-right: 220px;
            }
            .main {
                   
                float: left;
                width: 100%;
                height:300px;
                background: green;
            }
            .left {
                   
                position: relative;
                left: -120px;
                float: left;
                height: 300px;
                width: 100px;
                margin-left: -100%;
                background: red;
            }
            .right {
                   
                position: relative;
                right: -220px;
                float: right;
                height: 300px;
                width: 200px;
                margin-left: -200px;
                background: blue;
            }

#### 双飞翼布局 ####

.content {
                   
                float: left;
                width: 100%;
            }
            .main {
                   
                height: 200px;
                margin-left: 110px;
                margin-right: 220px;
                background: green;
            }
            .main::after {
                   
                content: '';
                display: block;
                font-size:0;
                height: 0;
                zoom: 1;
                clear: both;
            }
            .left {
                   
                float:left;
                height: 200px;
                width: 100px;
                margin-left: -100%;
                background: red;
            }
            .right {
                   
                float: right;
                height: 200px;
                width: 200px;
                margin-left: -200px;
                background: blue;
            }

### 29、stylus/sass/less区别 ###

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

### 30、postcss的作用 ###

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

转载于:https://www.cnblogs.com/Strugglinggirl/p/11043961.html