CSS 基本面试题

好记性不如烂笔头
318 阅读8分钟

标准盒模型

标准 w3c 盒子模型的width、height范围只包括 content 部分。

外盒尺寸计算（元素空间尺寸）

element空间高度＝内容高度＋内距＋边框＋外距

element空间宽度＝内容宽度＋内距＋边框＋外距

内盒尺寸计算（元素大小）

element高度＝内容高度＋内距＋边框（height为内容高度）

element宽度＝内容宽度＋内距＋边框（width为内容宽度）

IE盒模型

IE 盒子模型的width、height范围包括 border、padding、content

外盒尺寸计算（元素空间尺寸）

element空间高度＝内容高度＋外距（height包含了元素内容宽度、边框、内距）

element宽间宽度＝内容宽度＋外距（width包含了元素内容宽度、边框、内距）

内盒尺寸计算（元素大小）

element高度＝内容高度（height包含了元素内容宽度、边框、内距）

element宽度＝内容宽度（width包含了元素内容宽度、边框、内距）

标准盒模型盒IE盒模型不同点

选择标准盒模型方法：在HTML模板中加!doctype声明 

box-sizing:content-box // 标准盒模型
box-sizing:border-box  // IE盒模型

box-sizing的作用就是告诉浏览器，使用的盒模型是W3C盒模型还是IE盒模型

margin与padding的区别

  • margin是用来隔开元素与元素的间距

  • padding是用来隔开元素与内容的间隔

padding，margin为百分比计算时的参照对象

padding-top,padding-bottom,margin-top,margin-bottom是百分比时是按照当前元素的父级元素的宽度来计算的.

css中存在Collapsing margins(折叠的margins)的现象？？

概念：当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。

简述：当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加

折叠结果遵循下列计算规则：

  • 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
  • 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
  • 两个外边距一正一负时，折叠结果是两者的相加的和。

解决方案：

  • 外层元素 padding代替

  • 内层元素透明边框 border:1px solid transparent;

  • 内层元素绝对定位 postion:absolute:

  • 外层DIV overflow:hidden;

  • 内层DIV　加float:left;或者display:inline;

  • 外层DIV有时会用到zoom:1;

z-index

z-index属性设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 其元素可拥有负的z-index属性值，z-index仅能在定位元素上生效

display:none 与 visibility:hidden 的区别是什么？

  • display : none 隐藏对应的元素，在文档布局中不再分配空间（回流+重绘）

  • visibility:hidden 隐藏对应的元素，在文档布局中仍保留原来的空间（重绘）

px rem em 的区别

  • px相对于显示器屏幕分辨率
  • em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
  • rem是CSS3新增的一个相对单位（root em，根em），这个单位与em区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

CSS引入的方式有哪些？

答：内联，内嵌，外链，导入

  • 内联
<div style="width:100px;height:100px"></div>
  • 内嵌
<style>
.class {
    width:100px;
    height:120px
}
</style>
  • 外链
<link href="xxx.css">
  • 导入
<style>
@import url(xxx.csss)
</style>

CSS 使用Link和@import有什么区别

  • link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义RSS，定义 rel 连接属性等作用，无兼容性，支持使用javascript改变样式；而@import是CSS提供的，只能用于加载CSS，不支持使用 javascript 改变样式；

  • 页面被加载时，link 会被同时加载，而@import引用的CSS会等到页面加载完再加载；

  • import是CSS2.1 提出的，CSS2.1以下浏览器不支持，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。

css 链接

链接的特殊性在于能够根据它们所处的状态来设置它们的样式。

CSS链接的四种状态：

  • a:link - 普通的、未被访问的链接

  • a:visited - 用户已访问的链接

  • a:hover - 鼠标指针位于链接的上方

  • a:active - 链接被点击的时刻

/* 未被访问的链接 */
a:link {
    color:#FF0000;
}		
/* 已被访问的链接 */
a:visited {
    color:#00FF00;
}	
/* 鼠标指针移动到链接上 */
a:hover {
    color:#FF00FF;
}	
/* 正在被点击的链接 */
a:active {
    color:#0000FF;
}

当为链接的不同状态设置样式时，请按照以下次序规则：

a:hover 必须位于 a:link 和 a:visited 之后

a:active 必须位于 a:hover 之后

超链接访问过后hover样式就不出现了，因为被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A :

清除浮动

为啥会出现浮动现象？？

浮动最初的定义及使用场景：实现文本环绕图片的效果。通过浮动可以实现元素脱离标准文档流。CSS三种基本的定位机制：普通流、浮动和绝对定位

浮动带来的问题

  • 父元素的高度无法被撑开，影响与父元素同级的元素

  • 与浮动元素同级的非浮动元素（内联元素）会跟随其后

  • 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及width、height属性，同样的代码在各种浏览器中显示的效果也会不同。

解决方案
  • 父级div定义height(只在高度固定的布局中使用)

原理：父级div手动定义height,这样父级div就可以获取到高度

  • 结尾处加空div标签 clear:both

原理：添加一个空的div,利用css提高的clear:both清除浮动，让父级div自动获取到高度

<style>
.clearfloat {
    clear:both
    
}
</style>
<div>
    <div class="left">1</div>
    <div class="right">2</div>
    <div class="clearfloat"></div>
</div>
  • 父级div定义伪类:after和zoom

原理：同2 类似，zoom:1可以解决ie6,ie7浮动问题

<style>
.clearfloat:after { 
    display:block; 
    clear:both;
    content:"";
    visibility:hidden;
    height:0
    
}
.clearfloat{
   zoom:1
    
}
</style>
<div class="clearfloat">
    <div class="left">1</div>
    <div class="right">2</div>
</div>
  • 父级div定义overflow:hidden

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度,不能和position配合使用，超出的部分会被隐藏

<style>
.div1 {
    width:98%;
    overflow:hidden
   }
</style>
<div class="div1">
</div>
  • 父级div定义overflow:auto

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度,但当内部宽高超过父级div时，会出现滚动条

<style>
.div1  {  
        width:98%;
        overflow:auto
}
</style>
<div class="div1">
</div>

display属性

定义：display 属性规定元素应该生成的框的类型，建立布局时元素生成的显示框类型。

常用的值

display:none 此元素不会被显示。

display:block 此元素将显示为块级元素，此元素前后会带有换行符。

display:inline-block 行内块元素。

css中的overflow属性定义溢出元素内容区的内容会如何处理

  • 参数是scroll时候，必会出现滚动条。
  • 参数是auto时候，子元素内容大于父元素时出现滚动条。
  • 参数是visible时候，溢出的内容出现在父元素之外。
  • 参数是hidden时候，溢出隐藏。

CSS性能优化

  • 内联首屏关键CSS

性能优化中有一个重要的指标——首次有效绘制（First Meaningful Paint，简称FMP）即指页面的首要内容（primary content）出现在屏幕上的时间。这一指标影响用户看到页面前所需等待的时间，而内联首屏关键CSS（即CriticalCSS，可以称之为首屏关键CSS能减少这一时间，只将渲染首屏内容所需的关键CSS内联到HTML中，并将文件的大小控制在14K内

  • 异步加载CSS

第一种方式是使用JavaScript动态创建样式表link元素，并插入到DOM中

  • 文件压缩
  • 去除无用CSS
  • 优化重排与重绘

使用css预处理的优缺点

优点：

  • 提高 CSS 可维护性。
  • 易于编写嵌套选择器。
  • 引入变量，增添主题功能。可以在不同的项目中共享主题文件。
  • 通过混合（Mixins）生成重复的 CSS。 缺点：
  • 需要预处理工具。
  • 重新编译的时间可能会很慢。

为什么在移动端开发时需要用到@3x,@2x图片

  • 如果实际测量收集的物理像素，例如实际为1242*2688 的手机，当赋予一个DIV元素宽度为414px时，就会产生逻辑像素为1242/414=3个物理像素。也就是说这个屏幕的像素密度为3，就是常说的3倍屏。为保证不失真，一个图片像素至少要对应一个物理像素
avatar
文章
阅读
粉丝