这是我参与[第四届青训营]笔记创作活动的第一天。
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会发生重叠，空白内 容的标签也会重叠。
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）写多个不同页面宽度下的预期样式，然后使用媒体查询进行切 换。
