Loading...
墨滴

Aki2021

2021/07/25  阅读:49  主题:默认主题

CSS面试题

HTML面试题

如何理解HTML语义化

非语义化

<div>
  <div>header</div>
  <div>content</div>
  <div>footer</div>
</div>
<main>
  <h1>标题</h1>
  <header>header</header>
  <section>section</section>
  <footer>footer</footer>
</main>

总结: 语义化的优点:

  • 提高代码可读性
  • 让搜索引擎更容易读懂(SEO)

参考代码

默认情况下,哪些HTML标签是块级元素、哪些是内联元素?

HTML标签

  • 块级元素,display: block/table:div table td tr p h1-h6 dl dt ul li br 等
  • 内联元素,display: inline/inline-block:span img a input button等

CSS面试题

分析知识模块: 布局 定位 图文样式 响应式 CSS3

CSS布局

盒子模型的宽度如何计算?

#div1 {
 width100px;
 padding10px;
 border1px solid #ccc;
 margin10px;

 background-color#f0f;
 box-sizing: border-box;
 /*
 offsetWidth = width + padding + border(没有margin)
 没加box-sizing: border-box; offsetWidth = 122px
 加了box-sizing:border-box; offsetWidth = 100px
 */

}

margin纵向重叠问题

  • 相邻元素margin-top 和 margin-bottom会发生重叠
  • 空白内容的<p></p>也会发生重叠

margin负值的问题

  • margin-top为负值 自身向上移动
  • margin-left为负值 自身向左移动
  • margin-right为负值 右侧元素左移,自身位置不变
  • margin-bottom为负值 下方元素上移,自身位置不变

BFC理解与应用

理解

  • Block Format Context 块级上下文
  • 一块独立渲染的区域,内部元素不会影响到边界以外的元素

形成BFC的常见条件

  • float不是none
  • positionabsolutefixed
  • displayflex inline-block
  • overflow不是visible(hidden scroll auto)

常见应用

  • 清除浮动
    • BFC清除浮动原理?BFC会渲染 独立区域,因此不会让内部元素跑到外头作乱。

float布局问题,以及clearfix

常用语法

  • flex-dirction
  • justify-content 主轴对齐
  • align-items 与主轴垂直的轴对齐
  • flex-wrap
    • 默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
    • flex-wrap: nowrap | wrap | wrap-reverse;
  • align-self 自己特立独行
    • align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性

如何实现圣杯布局和双飞翼布局

目的

  • 三栏布局,中间一栏最先加载和渲染(内容最重要)
  • 两侧内容固定,中间内容随着宽度自适应
  • 虽然现在都用flex,但是有些旧系统还是用到这些布局,要知道原理才会维护

技术总结

  • 都是用了float布局
  • 两侧使用了margin负值
  • 防止中间内容被覆盖,双飞翼布局使用padding,圣杯布局使用margin

手写清除浮动

.clearfix:after {
  clear: both;
  content' ';
  display: table;
}

flex画色子

CSS-定位

absolute和relative分别依据什么定位

  • relative依据自身定位
  • absolute依据最近一层的定位元素定位

定位元素

  • absolute relative fixed
  • body

居中对齐有哪些实现方式

水平居中

  • inline元素:text-align: center
  • block元素:margin: auto
  • absoulte元素:left: 50% + margin-left: 负值 元素的宽度的一半

垂直居中

  • inline元素:height等于line-height
  • block元素:margin: auto
  • absolute元素:top: 50% + margin-top: 负值 元素的高度的一半
  • absolute元素:top,left,bottom,right = 0 + margin: auto

CSS-图文样式

line-height如何继承

  • 写具体数值,则继承该值
  • 写比例,如2/1.5,则继承该比例
  • 写百分比,200%,则继承计算出来的值(考点)
body {
  font-size: 20px;
  line-height: 1.5;
}

p {
  font-size: 16px;
  /* 继承的line-height: 1.5; 
  结果是16px * 1.5 = 24px;
  */
}
body {
  font-size: 20px;
  line-height: 200%;
}

p {
  font-size: 16px;
  /* 继承的line-height: 40px; 
  结果是20px * 200% = 40px;
  */
}

如何实现响应式

rem是什么

rem是一个长度单位

  • px 绝对长度单位 常用
  • em 相对长度单位 相对父元素 不常用
  • rem(root em) 相对长度单位 相对根元素 常用于响应式布局

根元素的字体大小

响应式的常用方案

  • media-query 根据不同的屏幕宽度设置根元素font-size
  • rem,基于根元素的相对单位

rem的弊端:“阶梯”性,vw和vh可以避免该弊端

网页视口尺寸

  • window.screen.height // 屏幕高度
  • window.innerHeight // 网页视口高度 砍掉header
  • document.body.clientHeight // body 高度
  • vh 网页视口高度(window.innerHeight)的1/100
  • vw 网页视口宽度(window.innerWidth)的1/100
  • vmax取两者(vh、vw)最大值 vmin取两者最小值

CSS-CSS3

关于CSS3动画

变形(transform)、转换(transition)和动画(animation)

  • transition允许css的属性值在一定的时间区间内平滑地过渡。
  • transform属性允许你旋转,缩放,倾斜或平移给定元素。
  • animation
  • 画一个宽度为0.5px的线
border: 1px solid #f0f;
transform: scaleY(0.5)

Aki2021

2021/07/25  阅读:49  主题:默认主题

作者介绍

Aki2021