前端知识点总结（#1 HTML/CSS）

爱编程的小鱼
144 阅读3分钟

一、HTML相关

  1. 如何理解HTML语义化？
    优点：让人更容易读懂、让搜索引擎更容易读懂

  2. 默认情况下，哪些HTML标签是块级元素（独占一行），哪些是内联元素（在一行内，往后排）？

    display: block/table；有div h1 h2 table ul ol p等

    dispaly: inline/inline-block; 有span img input button等

二、CSS相关

1. 布局

  1. 盒模型的宽度如何计算？
  • offsetWidth = （内容宽度width+内边距padding+边框border*2），无外边距
  • 如果让offsetWidth=内容宽度，需要加上属性box-sizing: border-box
  1. margin纵向重叠问题
  • 相邻元素的margin-top和margin-bottom会发生重叠
  • 空白内容的也会重叠（可能忽略）
  1. margin负值问题
  • margin-top和margin-left设置负值，元素向上、向左移动
  • margin-right负值，右侧元素左移，自身不受影响
  • margin-bottom负值，下方元素上移，自身不受影响
  1. BFC理解和应用
  • Block format context，块级格式化上下文
  • 一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
  • 形成BFC的常见条件：float不是none；position是absolute或fixed；（关键）overflow不是visible；display是flex,inline-block等。
  • 可用于清除浮动
  1. 如何实现圣杯布局和双飞翼布局？（float布局问题）
  • 圣杯布局：三栏布局，中间一栏最先加载和渲染，内容也最重要
  • 双飞翼布局：两侧内容固定，中间内容随宽度自适应
  • 共同点：使用float布局；两侧使用margin负值，以便和中间内容横向重叠；防止中间内容被两侧覆盖
  • 区别：1. 在防止中间内容被两侧覆盖时，圣杯布局调整padding达成，双飞翼布局调整margin达成； 2. 双飞翼布局更简单
  1. 手写clearfix（float布局问题）
.clearfix: after {
    content: '';
    display: table;
    clear: both;
}
  1. flex画一个三点的色子(flex布局问题)
flex-direction // 主轴方向
justify-content // 主轴对齐方式
align-items // 交叉轴对齐方式
flex-wrap // 换行
align-self // 子元素在交叉轴的对齐方式

.box {
    display: flex;
    justify-content: space-between // 两端对齐
    width: 200px;
    height: 200px;
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 20px;
}

.item {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #666;
}

.item: nth-child(2) { // 第二个元素（点）
    align-self: center // 居中对齐
}

.item: nth-child(3) { // 第三个元素（点）
    align-self: flex-end // 尾对齐
}

2. 定位

  1. absolute和relative分别依据什么定位？
  • relative依据自身定位
  • absolute依据最近一层的定位元素定位（父元素的父元素的……）
  1. 居中对齐有哪些实现方式？

2.1. 水平居中

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

2.2 垂直居中

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

3. 图文样式

  1. line-height如何继承？
  • 如果line-height写具体数值，如30px，则继承该值
  • 如果line-height写比例，如2或1.5，则继承该比例（本身值*比例）
  • 如果line-height写百分比，如200%，则继承计算出来的值（父组件的原值*百分比）

4. 响应式

  1. rem是什么？
  • rem是一个相对长度单位，相对于根元素（不变），常用于响应式布局
  • px是一个绝对长度单位，最常用
  • em是一个相对长度单位，相对于父元素（变化），不常用
  1. 如何实现响应式？（响应式布局的常用方案）
  • media-query，根据不同的屏幕宽度设置根元素font-size
  • rem，基于根元素的相对单位
  1. rem的弊端？
  • “阶梯”性
  1. 网页视口尺寸
  • window.screen.height // 屏幕高度
  • window.innerHeight // 网页视口高度（如果是浏览器，除去头、尾部）
  • document.body.clientHeight // body高度
  1. vw / vh
  • vh: 网页视口高度的1/100
  • vw: 网页视口宽度的1/100
  • vmax取两者最大值
  • vmin取两者最小值
avatar
文章
阅读
粉丝