为了账号安全,请及时绑定邮箱和手机立即绑定

【学习打卡】第1天 构建前端知识体系 第一讲

标签:
Html/CSS

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

课程章节: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


点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消