【学习打卡】第4天 前端面试第四讲

2022/8/19 4:22:55

本文主要是介绍【学习打卡】第4天 前端面试第四讲,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

课程名称:一天时间迅速准备前端面试 快速构建初级前端知识体系

课程章节:CSS 面试题

主讲老师:双越老师


课程内容:

今天学习内容包括:

HTML —— 语义化、块状和内联元素

  1. 理解 HTML 语义化

  2. 块状元素和内联元素

CSS —— 布局

  1. 盒模型宽度计算

  2. margin 纵向重叠问题

  3. margin 负值问题

  4. BFC 的理解与应用

  5. flex 布局

课程收获:

HTML 语义化的好处:

  1. 可以增强代码的可读性

  2. 让搜索引擎更容易读懂(SEO)

块状元素和内联元素:

  1. 块状元素:div、h1-h5、table、ul、ol、p 等

  2. 内联元素:span、img、input、button 等

盒模型宽度计算:

  1. offsetWidth:(内容宽度 + 内边距 + 边框),无外边距

  2. 示例:offsetWidth:100 + 10 + 10 + 1 + 1 = 122px

#div {	  
    width: 100px;	
    padding: 10px;	    
    margin: 10px;	    
    border: 1px solid #ccc;	
}	
<div id="div"></div>


margin 纵向重叠问题:

  1. 相邻元素 的 margin-top 和 margin-bottom 会发生重叠

  2. 空白内容的 <p></p> 也会重叠

  3. 取较大的值

margin 负值问题:

  1. margin-top 和 margin-left 负值,元素向上、向左移动

  2. margin-right 负值,右侧元素左移,自身不受影响

  3. magin-bottom 负值,下方元素上移,自身不受影响

BFC 的理解与应用:

  1. Block format context,块级格式化上下文

  2. 一块独立渲染区域,内部元素的渲染不会影响边界以外的元素

flex 布局:

  1. flex-direction:设置主轴的方向

  2. justify-content:设置主轴上的子元素排列方式

  3. align-items:设置侧轴上的子元素排列方式(单行)

  4. flex-wrap:设置子元素是否换行

  5. align-self:控制子项自己在侧轴上的排列方式

课程学习截图:


https://img4.sycdn.imooc.com/62ea700b00019d2f19200942.jpg


https://img1.sycdn.imooc.com/62ea702c000144b510440781.jpg


https://img2.sycdn.imooc.com/62ea704a0001bc3d09640417.jpg






这篇关于【学习打卡】第4天 前端面试第四讲的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程