css错误

Honsanity
177 阅读7分钟

1.css 垂直居中

如果是单行文本, line-height 设置成和 height 值

.vertical {
      height: 100px;
      line-height: 100px;
    }

使用 position: relative;绝对定位

  • （已知高度的块级子元素，采用绝对定位和负边距）
.content-vert {
        position: relative;
        width: 300px;
        height: 300px;
        background: brown;
        top: 50%;
        margin-top:-150px ; 
      }

使用 transform:translateY(-50%) ;

.content-vert {
        position: relative;
        width: 300px;
        height: 300px;
        background: brown;
        top: 50%;
        transform:translateY(-50%) ;
      }

使用 flex

 body {
      display: flex;
      align-items: center; /*定义body的元素垂直居中*/
      justify-content: center; /*定义body的里的元素水平居中*/
  }
  .content {
      width: 300px;
      height: 300px;
      background: orange;        
  }

2.用纯CSS创建一个三角形的原理是什么？

// 把上、左、右三条边隐藏掉（颜色设为 transparent）
#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

3.为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异

4.对BFC规范(块级格式化上下文：block formatting context)的理解？(待解决)

5.display:inline-block 什么时候会显示间隙？

移除空格、使用margin负值、父元素使用font-size:0、letter-spacing、word-spacing 最优解

.parent {
	display：table;
    word-spacing:-1em
}

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

  • 盒子模型构成：内容(content)、内填充(padding)、 边框(border)、外边距(margin)
  • IE8及其以下版本浏览器，未声明 DOCTYPE，内容宽高会包含内填充和边框，称为怪异盒模型(IE盒模型)
  • 标准(W3C)盒模型：元素宽度 = width + padding + border + margin
  • 怪异(IE)盒模型：元素宽度 = width + margin
  • 标准浏览器通过设置 css3 的 box-sizing: border-box 属性，触发“怪异模式”解析计算宽高

7.box-sizing 常用的属性有哪些？分别有什么作用

  • box-sizing: content-box; // 默认的标准(W3C)盒模型元素效果
  • box-sizing: border-box; // 触发怪异(IE)盒模型元素的效果
  • box-sizing: inherit; // 继承父元素 box-sizing 属性的值

8.请列举几种隐藏元素的方法

  • 文档不渲染 display: none;
  • 文档渲染但隐藏 visibility: hidden;
  • 完全透明 opacity: 0;
  • 缩小的看不见 transform: scale(0);
  • 是这个元素定位到可见范围 position: absolute; 设置一个很大的 left 负值定位，
  • height: 0; 将元素高度设为 0 ，并消除边框
  • filter: blur(0); CSS3属性，将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中

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

  • opacity 作用于元素以及元素内的所有内容（包括文字）的透明度
  • rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果

10.css 属性 content 有什么作用？

  • content 属性专门应用在 before/after 伪元素上，用于插入额外内容或样式

11. CSS3 的 Flexbox（弹性盒布局模型）以及适用场景？

  • Flexbox 用于不同尺寸屏幕中创建可自动扩展和收缩布局

12.li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

  • 原因：li排列受到中间空白(回车/空格)等的影响，因为空白也属于字符，会被应用样式占据空间，产生间隔
  • 解决办法：在父元素ul设置设置font-size=0,在子元素li上设置需要的文字大小

13.请写出多种等高布局（待解决）

14.圣杯布局

  <div class="content">
      <div class="center">主体</div>
      <div class="left">左边</div>
      <div class="right">右边</div>
  </div>

      /* 圣杯 */
      .content {
        padding-left: 150px;
        padding-right: 200px;
      }
      .center {
        width: 100%;
        float:left;
        background: green;
        height: 100px;

      }
      .left {
        background: burlywood;
        float:left;
        height: 100px;
        width: 150px;
        margin-left:-100%;
        position: relative;
        left: -150px;
      }
      .right {
        background: yellowgreen;
        float:left;
        height: 100px;
        width: 200px;
        margin-left:-200px;
        position: relative;
        right: -200px;
      }

15.什么是双飞翼布局

 <div class="content">
    <div class="content-into">
      主体
    </div>
  </div>
  <div class="left">左边</div>
  <div class="right">右边</div>

   /* 双飞翼 */
      .content {
        float: left;
        width: 100%;
        height: 100px;
        background: green;
      }
      .content-into {
        margin-left: 150px;
        margin-right: 200px;
      }
      .left {
        float: left;
        margin-left: -100%;
        background: burlywood;
        height: 100px;
        width: 150px;
      }
      .right {
        float: left;
        background: yellowgreen;
        margin-left: -200px;
        height: 100px;
        width: 200px;
      }

16.浮动

工作原理

  • 浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）
  • 浮动元素碰到包含它的边框或者其他浮动元素的边框停留
  • 非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。

浮动元素引起的问题？

  • 父元素的高度无法被撑开，影响与父元素同级的元素
  • 与浮动元素同级的非浮动元素会跟随其后

列举几种清除浮动的方式？

  • 添加额外标签，例如
  • 使用 br 标签和其自身的 clear 属性，例如
  • 父元素设置 overflow：hidden; 在IE6中还需要触发 hasLayout，例如zoom：1;
  • 父元素也设置浮动
  • 使用 :after 伪元素。由于IE6-7不支持 :after，使用 zoom:1 触发 hasLayou

清除浮动最佳实践

  • （after伪元素闭合浮动）：
.clearfix:after{
    content: "\200B";
    display: table; 
    height: 0;
    clear: both;
  }
  .clearfix{
    *zoom: 1;
  }

17.什么是 FOUC(Flash of Unstyled Content)？ 如何来避免 FOUC？

  • 当使用 @import 导入 CSS 时，会导致某些页面在 IE 出现奇怪的现象： 没有样式的页面内容显示瞬间闪烁，这种现象称为“文档样式短暂失效”，简称为FOUC
  • 产生原因：当样式表晚于结构性html加载时，加载到此样式表时，页面将停止之前的渲染。
  • 等待此样式表被下载和解析后，再重新渲染页面，期间导致短暂的花屏现象。
  • 解决方法：使用 link 标签将样式表放在文档 head

18.介绍使用过的 CSS 预处理器？

  • CSS 预处理器基本思想：为 CSS 增加了一些编程的特性（变量、逻辑判断、函数等）
  • 开发者使用这种语言进行进行 Web 页面样式设计，再编译成正常的 CSS 文件使用
  • 使用 CSS 预处理器，可以使 CSS 更加简洁、适应性更强、可读性更佳，无需考虑兼容性
  • 最常用的 CSS 预处理器语言包括：Sass（SCSS）和 LESS

19.CSS优化、提高性能的方法有哪些？

  • 多个css合并，尽量减少HTTP请求
  • 将css文件放在页面最上面
  • 移除空的css规则
  • 避免使用CSS表达式
  • 选择器优化嵌套，尽量避免层级过深
  • 充分利用css继承属性，减少代码量
  • 抽象提取公共样式，减少代码量
  • 属性值为0时，不加单位
  • 属性值为小于1的小数时，省略小数点前面的0
  • css雪碧图

20.抽离样式模块怎么写，说出思路？

  • CSS可以拆分成2部分：公共CSS 和 业务CSS：
  • 网站的配色，字体，交互提取出为公共CSS。这部分CSS命名不应涉及具体的业务
  • 对于业务CSS，需要有统一的命名，使用公用的前缀。可以参考面向对象的CSS

21.什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

  • 响应式设计就是网站能够兼容多个终端，而不是为每个终端做一个特定的版本
  • 基本原理是利用CSS3媒体查询，为不同尺寸的设备适配不同样式
  • 对于低版本的IE，可采用JS获取屏幕宽度，然后通过resize方法来实现兼容：
$(window).resize(function () {
  screenRespond();
});
screenRespond();
function screenRespond(){
var screenWidth = $(window).width();
if(screenWidth <= 1800){
  $("body").attr("class", "w1800");
}
if(screenWidth <= 1400){
  $("body").attr("class", "w1400");
}
if(screenWidth > 1800){
  $("body").attr("class", "");
}
}

22.伪元素和伪类的区别和作用？

23.你对 line-height 是如何理解的？

24.怎么让Chrome支持小于12px 的文字？

 .shrink{
    -webkit-transform:scale(0.8);
    -o-transform:scale(1);
    display:inline-block;
  }

25.display:inline-block 什么时候会显示间隙？

  • 相邻的 inline-block 元素之间有换行或空格分隔的情况下会产生间距
  • 非 inline-block 水平元素设置为 inline-block 也会有水平间距
  • 可以借助 vertical-align:top; 消除垂直间隙
  • 可以在父级加 font-size：0; 在子元素里设置需要的字体大小，消除垂直间隙
  • 把 li 标签写到同一行可以消除垂直间隙，但代码可读性差

26.什么是视差滚动效果，如何给每页做不同的动画？

27.a标签上四个伪类的执行顺序是怎么样的**？**

  • link > visited > hover > active
  • L-V-H-A love hate 用喜欢和讨厌两个词来方便记忆
avatar
文章
阅读
粉丝