这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天

HTML和CSS

HTML

1.如何理解HTML语义化

比如：header表示页面头部

main表示页面主题

footer表示页面底部

**优点：**让人更容易读懂，让机器更容易读懂，使页面在没有css的情况下，也能够呈现出很好的内容结构。 对于团队，方便团队的开发和维护； 对于爬虫，有利于SEO。

CSS篇

一.布局

1.盒模型的宽度如何计算？

clientWidth:可视内容宽度；

scollWidth:实际内容宽度；=width+padding(没有设置box-sizing:border-box下)

offsetWidth:控件元素的实际宽度；=width+padding+border(没有设置box-sizing:border-box下)

设置box-sizing:border-box时，计算如下 offsetWidth = width; clientWidth = width-border;

2.margin纵向重叠问题

相邻元素的margin-top和margin-bottom会发生重叠，空白内容的标签也会重叠。

上下间隔15px;

3.margin赋值问题

margin：0 auto;代表上下0px，左右自适应，显示为横向居中

4.BFC的理解和应用

1.什么是BFC

一个块格式上下文是Web页面的可视化css渲染出来的一部分，他是块级盒布局出现的区域，也是浮动层元素进行交互的区域。

2.触发BFC的条件

1).浮动元素（元素的float不是none）

2)绝对定位元素（元素具有position:absolute或者fixed）

3)内联块（元素具有display:inline-block）

4)表格单元格（元素具有display:table-cell，HTML表格单元格默认属性）

5）表格标题（元素具有display:table-caption,HTML表格标题默认属性）

6）具有overFlow且值不是visible的块元素

7）display:flow-root(推荐使用)

3.BFC的特性

1）内部的Box会垂直方向上一个接一个放置；

2）垂直方向上的距离由margin决定；

3）bfc的区域不会与float的元素区域重叠

4）计算bfc的高度时，浮动元素也参与计算

5）bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

4.为什么要使用触发BFC？

1）BFC可以解决子元素浮动导致父元素高度塌陷问题；

2）BFC可以解决2个兄弟盒子之间垂直距离是由他们的外边距所决定的，但不是他们1两个外边距之和1，而是以较大的为准，即margin重叠问题；

3）不被浮动元素覆盖；

4）防止文字环绕。

5.float布局的问题、以及clearfix

二.定位

1.absolute和relative分别依据什么定位？

absolute是相对于最近的且不是static定位的父元素来定位；

relative：相对定位，是相对于原本的位置来定位的。

2.居中对齐有哪些实现方式？

1）text-align:center;

line-height等于height值

2）margin： 0 auto;

3)absolute(3种）

left:50%;margin-left:-width/2;

top:50%;margin-top:-height/2;

left：50%；top：50%；transform：translate（-50%，-50%）；

Top、left、bottom、right 都等于0；margin：auto；

三。图文样式

line-height的继承问题？ 1）父级元素line-height=30px的情况，子元素line-height是多少？（继承父元素的line-height:30px）

2)父级1line-height=11.5倍，子元素的line-height是多少？（子元素的font-size1.5）

3）父级line-height=200%的情况，子元素line-height是多少？（ 父元素的font-size200%）

四。响应式

rem是什么？

是css的一种单位，是指相对于根元素的字体大小的单位，而em是指相对于1父元素的字体大小的单位。

如何实现响应式？

1）不要将width写为固定值px，而是转而使用百分比的方式；

2）使用max-width和min-width等这些最大最小高度、宽度的属性设置，需要时配合margin:0 auto；

3）使用媒体查询

4）写多个不同页面宽度下的预期样式，然后使用媒体查询进行切换。