【学习打卡】第十三天 前端工程师2022版 HTML与CSS面试课程

课程名称： 前端工程师2022版

课程章节： HTML与CSS面试课程

主讲老师：未知

课程内容：

今天学习的内容包括：

HTML

一、如何理解 HTML 语义化？

1.让人更易读懂（增加代码可读性）

2.让搜索引擎更容易读懂（SEO）

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

1.块级元素：独占一行：display;block/table     div   h1   h2   table   ul    ol   p 等

2.内联元素：紧跟其他元素：display；inline/inline-block    span   img   input    button 等

CSS

一、盒模型宽度计算

offsetWidth = (内容宽度 + 内边距 + 边框)，无外边框

100+20+2=122px

如果让offsetWidth等于100px,该如何做？

二、margin 纵向重叠问题

相邻元素的 margin-top 和 margin-bottom 会重叠

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

最后结果是AAA的bottom:15px

三、margin 负值的问题

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

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

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

四、BFC的理解和应用

1.什么是BFC？如何应用？

Block format context，块级格式化上下文

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

2.形成BFC的常见条件

float 不是 none

position 是 absolute 或 fixed

overflow 不是 visible

display 是 flex inline-block 等

BFC的常见应用: 清除浮动

五、float 布局

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

圣杯布局和双飞翼布局的目的

①三栏布局，中间一栏最先加载和渲染（内容最重要）

②两侧内容固定，中间内容随着宽度自适应

③一般用于PC网页

圣杯布局和双飞翼布局的技术总结

①使用float布局

②两侧使用margin 负值，以便和中间内容横向重叠

③防止中间内容被两侧覆盖，一个用padding，一个用margin

圣杯布局：

双飞翼布局：

2.手写clearfix

.clearfix:after {
            content:'';
            display:table;
            clear:both;
        }
.clearfix {
    *zoom:1;/*兼容IE低版本*/
}

六、flex 布局

1.常用语法回顾

flex-direction 主轴方向

justify-content 主轴对齐方式

align-items 交叉轴对齐方式

flex-wrap 换行

align-self 子元素在交叉轴对齐方式

七、absolute和relative定位

relative依据自身定位

absolute依据最近一层定位元素定位

八、居中对齐的方式

水平居中

• inline元素：text-align:center

• block元素：margin：auto

• absolute元素：left:50% + margin-left 负值

垂直居中

• inline元素：line-height 的值等于 height

• absolute元素：top50% + margin-top 负值

• absolute元素：transform（-50%，-50%）

• absolute元素：top,left,bottom,right = 0 + margin:auto

九、line-height 如何继承

• 写具体数值，如30px,则继承该值（比较好理解）

• 写比例，如2/1.5，则继承该比例（比较好理解)

• 写百分比，如200%，则继承计算出来的值（考点）

十、rem 是什么

rem是一个长度单位

• px,绝对长度单位，最常用

• em,相对长度单位，相对于父元素，不常用

• rem,相对长度单位，相对于根元素，常用于响应式布局

  
  

十一、响应式布局的常用方案

◆media-query,根据不同的屏幕宽度设置根元素font-size

◆rem,基于根元素的相对单位

今日收获：刚学完移动布局就复习这些样式，自我感觉掌握得不错，但是易忘，还需要不断地记忆才行

写成文章也有好处，遇到不会的可以随时来找，如果慕课网的手记能像有道笔记一样，可以直接看到标题就更好了，今日除了复习面试课，剩下的时间都在调接口写路由了，还有很大的问题……