跳到主要内容

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 {
 width: 100px;
 padding: 10px;
 border: 1px solid #ccc;
 margin: 10px;

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

.box {
  box-sizing: border-box; /* 边框盒模式 */
  width: 200px; /* 整个盒子的宽度为 200px，包括内容、内边距和边框 */
  /* 总宽度（200px） = 内容宽度（140px） + 左右内边距（20px * 2） + 左右边框（10px * 2） */
  padding: 20px;
  border: 10px solid black;
}

box-sizing​

margin纵向重叠问题​

  • 相邻元素margin-top 和 margin-bottom会发生重叠
  • 空白内容的\

    \

    也会发生重叠

margin负值的问题​

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

BFC理解与应用​

理解​

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

形成BFC的常见条件​

  • 浮动元素: float不是none
  • 定位元素: position是absolute或fixed
  • 弹性元素、行内元素：display是flex inline-block等
  • overflow不是visible(hidden scroll auto)

常见应用​

  • 清除浮动

    • 为什么要清除浮动

      • 元素浮动后，脱离文档流，导致高度塌陷，清除浮动可以撑起父元素

      • 其他的清除浮动方式

        .clearFloatDiv {
          clear: both; /* 1. */
          overflow: hidden; /* 2. */
          /* 3. 触发 BFC （块级格式化上下文 Block Fomatting Context) eg: 
          float: left;
           or position: fixed; 
           or overflow: hidden;
           or   */
          float: left;
        }

        .clearFloatDiv::after {
          content: '';
          display: block; /* 参与布局*/
          clear: both;
        }

    • 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

  • absolute元素：top: 50% + transform: translateY(-50%)

    <div class='container'>
      <div class='container2'>
        <div class='container2'>
          <div class='container2'>
            <div class='container2'>
              <div class='container3'>
                test
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <style>
      .container {
        height: 100px;
        background-color: #f0f;
        position: relative;
      }

      .container3 {
        position: absolute;
        top: 50%; // 基于包含元素 .container 的高度计算
        transform: translateY(-50%); // 基于自身高度 .container3 的高度计算
        background-color: #fff;
      }
    </style>

    效果图

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)

CSS 變量​

  • 属性名需要以两个减号（--）开始
  • 定义在根伪类 :root 下，这样就可以在HTML文档的任何地方访问到它了

实现不同语言显示不同变量

设置语言，在 html 标签插入 lang 属性

document.documentElement.setAttribute('lang', I18nLangStr);// 無障礙語言

效果

<html lang="en_us">
...
<html>
:root {
  /* 语言为 cn zh_hans */
  :lang(cn),
  :lang(zh_hans) {
    --letter-spacing-size: 2px; 
  }

  /* 语言为 en_us pt_pt */
  :lang(en_us),
  :lang(pt_pt) {
    --letter-spacing-size: 0px;
  }
}
.common-bg(@bg: @white) {
  letter-spacing: var(--letter-spacing-size);// 读取变量
}