关于javascript:css面试题

7次阅读

共计 4445 个字符，预计需要花费 12 分钟才能阅读完成。

盒模型

常见的盒模型有 w3c 盒模型（又名规范盒模型）box-sizing:content-box 和 IE 盒模型（又名怪异盒模型）box-sizing:border-box。
规范盒子模型：宽度 = 内容的宽度（content）+ border + padding + margin
低版本 IE 盒子模型：宽度 = 内容宽度（content+border+padding）+ margin

css3 新个性

常问：

  1. word-wrap 文字换行
  2. text-overflow 超过指定容器的边界时如何显示
  3. text-decoration 文字渲染
  4. text-shadow 文字暗影
  5. gradient 突变成果
  6. transition 过渡成果 transition-duration：过渡的持续时间
  7. transform 拉伸，压缩，旋转，偏移等变换
  8. animation 动画
  9. audio 音频
  10. vadio 视频
  11. RGBA 和透明度

css3 边框

border-radius 圆角
box-shadow 盒子暗影
border-image 边框图片

css3 背景

background-image 背景图片
background-size 背景大小
background-origin 背景图像的地位区域
background-clip 背景剪裁属性是从指定地位开始绘制

css 选择器及优先级

!important
内联款式
ID 选择器
类选择器 属性选择器 伪类选择器
元素选择器 关系选择器 伪元素选择器
通配选择器
1，class 选择符：10，id 选择符：100，内联款式权值最大，为 1000

  1. !important 申明的款式优先级最高，如果抵触再进行计算。
  2. 如果优先级雷同，则抉择最初呈现的款式。

  3. 继承失去的款式的优先级最低。

    CSS 选择器有哪些？哪些属性能够继承？

  • id 选择器(#myid)、
  • 类选择器(.myclassname)、
  • 标签选择器(div, h1, p)、
  • 相邻选择器(h1 + p)
  • 子选择器（ul > li）、
  • 后辈选择器（li a）、
  • 通配符选择器（*）、
  • 属性选择器（a[rel=”external”]）、
  • 伪类选择器（a:hover, li:nth-child）

可继承的属性：

font-size,
font-family,
color

不可继承的款式：

border,
padding,
margin,
width,
height

BFC

BFC 是块级格式化上下文。

  • 计算 BFC 高度时，浮动元素也会参加计算、
  • 在 BFC 这个元素垂直方向的边距会产生重叠
  • BFC 的区域不会与浮动元素的 box 重叠
  • BFC 在页面上是一个独立的容器，其里外的元素不会相互影响
    BFC 利用:
    避免 margin 重叠
    革除外部浮动
    自适应两栏布局
    避免字体盘绕

BFC 的生成条件：

根元素
float 值不为 none
overflow 的值不为 visible
display 的值为 inline-block,table-cell,table-caption
position 的值为 absolute，fixed

弹性盒

display:flex;
align-items:center;
justify-conter:center;

图片整合技术的劣势

  1. 缩小对服务器的申请次数

  2. 缩小图片体积，进步加载速度

    元素垂直程度居中

    不须要晓得宽和高

position：absolute；top:0；left:0；right:0；bottom:0;margin:auto;

须要晓得宽和高

position:absolute;top:50%;left:50%;margin-top:+/-50%(本身高度的 50%)；margin-left:+/-50%;

元素程度居中

margin:0 auto;

css 定位形式

position：static;// 默认定位
position：relative;// 绝对定位（参照物是本身, 不脱离文档流）position:absolute;// 相对定位（参照物是父元素，遵循就近准则，寻找父元素及其爷爷元素中设置 position:relative 属性进行定位，脱离文档流；如果都不设置定位属性，就以根元素 <html> 进行定位。）position:fixed;// 固定定位（参照物是可视区窗口，脱离文档流）绝对于浏览器窗口进行定位。position:sticky;//

display：none 和 visibility：hidden 区别？

display：none 指的是元素齐全不排列进去，不占据空间，波及到了 DOM 构造，故产生重排和重绘
visibility：hidden 指的是元素不可见但存在，保留空间，不影响构造，故只产生重绘，但不可触发绑定事件

rem 和 em 的区别

总而言之，就是浏览器把谁转化成“px”
rem 根据的是 html 的 font-size 值。1rem=16px
em 根据的是父元素的 font-size 值。

革除浮动

办法一:clear:both

clear:both;

办法二: 万能革除浮动

    .clean{
        content:'.';
        height:0;
        display:block;
        clear:both;
        overflow:hiddden;
        visibility:hidden;
    }

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

inline 默认。此元素会被显示为内联元素，元素前后没有换行符。

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

none 此元素不会被显示（暗藏）。

inline-block 行内块元素。（CSS2.1 新增的值）

list-item 此元素会作为列表显示。

table 此元素会作为块级表格来显示（相似 table），表格前后带有换行符

为什么要初始化 CSS 款式

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

浏览器内核

  • Trident IE 浏览器
  • Gecko Firefox 浏览器
  • Webkit Chrome Safari
  • Blink Chrome Opera

挪动端 1 像素问题

一般来说，在 pc 端浏览器中，设施像素比 dpr 等于 1,1 个 css 像素就等于 1 个物理像素；然而在 retina 屏幕中，dpr 广泛是 2 或者 3，1 个 css 像素不在等于一个物理像素，因而在理论设计稿中粗不少。

  1. 伪元素 +scale
.box{
    width:100%;
    height:1px;
    margin:20px 0;
    position:relative;
}
.box::after{
    content:'';
    position:absolute;
    bottom:0;
    width:100%;
    height:1px;
    transform:scaleY(0.5);
    transform-origin:0 0;
    background:red;
}

<div class="box"><div>
  1. border-image
div{
    border-width:1px 0px;
    -webkit-border-image:url(xxx.png) 2 0 stretch;
    border-image:url(xxx.png) 2 0 stretch;
}

做挪动端开发有没有遇到不兼容的问题? 如何解决？(https://yq.aliyun.com/articles/587092)

1. 应用背景图来代替 img 标签

   background:url(../images/icon/all.png) no-repeat center center;
   -webkit-background-size:50px 50px;
   background-size: 50px 50px;
   display:inline-block; 
   width:100%; 
   height:50px

  1. 避免手机中网页放大和放大
    设置 meta 标签中的 viewport;

     <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

  2. 浮动子元素撑开父元素盒子高度

    解决办法如下：

    1. 父元素设置为 overflow: hidden;

    2. 父元素设置为 display: inline-block; 等

    如何解决挪动端滚动条卡顿问题？

    安卓或者 ios
    -webkit-overflow-scrolling: auto; / 当手指从触摸屏上移开，滚动会立刻进行 */
    -webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会放弃一段时间的滚动，持续滚动的速度和继续的工夫和滚动手势的强烈水平成正比。同时也会创立一个新的堆栈上下文。

link 与 @import 的区别

a. 从属关系区别
@import 是 CSS 提供的语法规定，只有导入样式表的作用；link 是 HTML 提供的标签，不仅能够加载 CSS 文件，还能够定义 RSS、rel 连贯属性等
b. 加载程序区别
加载页面时，link 标签引入的 CSS 被同时加载；@import 引入的 CSS 将在页面加载结束后被加载。
c. 兼容性区别
@import 是 CSS2.1 才有的语法，故只可在 IE5+ 能力辨认；link 标签作为 HTML 元素，不存在兼容性问题。
d.DOM 可控性区别
能够通过 JS 操作 DOM，插入 link 标签来扭转款式；因为 DOM 办法是基于文档的，无奈应用 @import 的形式插入款式。

常见的布局形式

  1. 圣杯布局

    body{min-width: 550px;}
#container{
padding-left: 200px;
padding-right: 150px;
}
#container .column{float: left;}
#center{width: 100%;}
#left{
width: 200px;
margin-left: -100%;
position: relative;
right: 200px;
}
#right{
width: 150px;
margin-right: -150px;
}
<div id="container">
    <div id="center" class="column">center</div>
    <div id="left" class="column">left</div>
    <div id="right" class="column">right</div>
</div>

  1. 双飞翼布局
body {min-width: 500px;}
#container {width: 100%;}
.column {float: left;}
#center {
    margin-left: 200px;
    margin-right: 150px; 
}
#left {
    width: 200px;
    margin-left: -100%;
}
#right {
    width: 150px;
    margin-left: -150px;
}
<div id="container" class="column">
    <div id="center">center</div>
</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>

正文完
javascript
发表至： javascript
2023-06-20
 0
React-328道最全面试题持续更新
提升90加载速度vuecli下的首屏性能优化
使用hexo和github搭建静态博客网站三
9JavaScript-面向对象高级对象创建模式