面试题 html和css的小问题

PitayaDog

已于 2024-04-28 17:19:58 修改

阅读量331

点赞数 9

文章标签： html css 前端

于 2024-04-28 15:22:54 首次发布

本文链接：https://blog.csdn.net/zyz13883658166/article/details/138279836

版权

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

Chrome默认字体大小是：16px,

Chrome最小支持字体大小是：12px,

每个浏览器默认字体大小可能都不一样

我们使用CSS3方法让文本缩小: -webkit-transform,比例1：10，1.6=16px

  <style>
      div span{
        display: inline-block;
        -webkit-transform: scale(0.8);
      }
  </style>
  </head>
  <body>
    <div>
      <span>一路走好</span>
    </div>
  </body>

二 png，jpg，gif这些图片格式解释一下？

png：无损压缩，清晰度很好，尺寸体积要比jpg/jpeg大，适合做小图标

jpg：采用压缩算法，有一点失真，比png体积小，适合做中大图片

gif：一般是做动图

webp：同时支持有损无损压缩，相同质量的图片，webp有更小的体积，兼容性不是很好

三区分title与h1，i与em和b与strong

title与h1
title一般写在head里面，显示在网页标题上，概括了网站信息，可以告诉搜索引擎或者用户关于这个网站的内容主题是什么，

h1一般写在body里面，显示在网页内容上，文章主题内容，

title比h1更加重要

场景：网站的logo都是用h1标签包裹

i与em
形态上都是斜体显示

i实体标签，无意义，em逻辑标签，用于强调

b与strong
形态上都是加粗显示

b实体标签，无意义，strong逻辑标签，用于强调

为了复合css3规范，用strong和em

四 ==与===的区别

==：比较的是值

string == number || boolean || number都会隐式转换，通过valueOf转换，通过js在后台自动调用，并不显出现在代码中

===：除了比较值，还比较类型

console.log(1 == '1') // true
console.log(true == '1') // true
console.log(null == undefined) // true
console.log([1, 2] == '1,2') // true

“==”比较时候各种类型的值会进行隐式转换

string和number相比时候，string转换成number，

boolean和number比较的时候，boolean转成number，

object和基本类型比较的时候，object会转换成为基本类型

五 null和undefined的区别

null和undefined都是表示“无”的值

主要是历史原因：

1995年javascript诞生的时候，最初像Java一样只设置了null作为表示无的值。根据C语言的传统，null被设计成可以隐式转换为0。

console.log(Number(null)) // 0
console.log(Number(undefined)) // NaN

1.作者在设计js的时候借鉴Java语言设计了null为基本类型

2.null会被隐式转换为0，很不容易发现错误

3.后来又设计了undefined

六用css画一个三角形

   <style>
      div{
        width: 0;
        height: 0;
        border-bottom: 100px solid black;
        border-right: 100px solid transparent;
        border-left: 100px solid transparent;
        border-top: 100px solid transparent;
      }
    </style>
  <body>
    <div></div>
  </body>

七区分height和line-height

line-height：是每一行文字的高，如果文字换行则整个盒子高度会增大（行数*行高）

height：指盒子的高度

八页面导入样式时，link和@import有什么区别？

1.link属于html标签，@import属于css导入样式的一个内容

2.兼容性link比@import好，@import只有在ie5以上才可以被识别，link为标签则不存在浏览器兼容问题。

3.加载顺序差别，在页面加载的时候，link会同时被加载，而@import引用的CSS会在页面加载完成后才会加载引用的CSS

4.Link引入样式的权重大于@import的引用

九常见的css布局

1.圣杯布局（双飞翼布局）

一般用于PC端网页布局

目的

1.两次内容宽度固定，中间内容宽度自适应

2.三栏布局，中间一栏最先加载，渲染出来（主要内容）

实现方法 float + margin

2.盒子布局

3.flex布局

4.grid布局

5.table布局

十浏览器的内核有哪些？什么区别？

浏览器内核(渲染引擎)：负责将我们书写的代码渲染为给用户查看的网页

十一 rem和em的区别？

rem和em都是移动端布局的字体大小单位

em：针对于父元素的font-size的倍数

rem：针对于根元素（html）的font-size的倍数

    <style>
      *{margin: 0; padding: 0;}
      html{font-size: 16px;}
      .div{font-size: 10px;}
      .span1{font-size: 2em;} //20px
      .span2{font-size: 2rem;} //32px
    </style>
  </head>
  <body>
    <div class="div">
      <span class="span1">span1</span>
      <span class="span2">span2</span>
    </div>
  </body>

十二 css rgba和opacity的区别

共同性：实现透明效果

1.opacity：取值范围0~1，0表示透明，1表示不透明

2.rgba：rgb表示三原色，红绿蓝，取值为0-255之间的整数和0%-100%的百分比，a表示透明度alpha，取值范围0~1

具体区别

opacity会继承父元素的opacity属性，而rgba的文本元素不会继承父级元素的rgb值，内嵌的子元素会继承rgb属性

    <style>
      .opacity{
        opacity: 0.5;
        background-color: red;
      }
      .rgba{
        background-color:rgba(255,0,0,0.8);
      }
    </style>
  </head>
  <body>
      <div class="opacity"">opacity
        <div>opacity</div>
      </div>
      <div style="height: 50px; width: 100%;"></div>
      <div class="rgba">rgba
        <div>rgba</div>
      </div>
  </body>