title与h1

title的权重高于H1,其适用性要比H1广。

b与strong、i与em

物理元素：b、i

逻辑元素：em、strong

物理元素是告诉浏览器我应该以何种格式显示文字，逻辑元素告诉浏览器这些文字有怎么样的重要性。

结论：对于搜索引擎来说逻辑元素比物理元素要重视的多。

mg的alt与title

Flexbox（弹性盒布局模型）

2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

参考资料：Flex 布局教程：语法篇

适用场景

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。–Flex 布局，可以简便、完整、响应式地实现各种页面布局。

vertical-align 属性设置元素的垂直对齐方式。
line-height 属性设置行间的距离（行高）。

参考资料：
CSS深入理解vertical-align和line-height的基友关系

为什么使用CSS绘制图形

在写网页的时候，会遇到需要装饰一些几何图形的情况，用css就可以实现很多特殊形状的绘制。它的特点是放大后图像不会失真，档案的占用空间较小，也可以减少http的请求。

CSS绘制图形

圆形/椭圆形

1
2
3
4
5
6
7
8
9
10
11

.circle{

width:10rem;

height:10rem;

border-radius:50%;

background:orange;

}

问题

苹果会对position: fixed的元素位置做调整

解决方案

尽量避免在移动端开发中使用position: fixed，而是更多使用更现代的布局方式和position: absolute来实现类似需求。

详细解析

使用fixed的时候，在手机上查看是否会有问题，怎么解决

背景介绍

HTML结构语义化，是最近几年才提出来的，以前的html结构，都是一堆的没有语义的冷冰冰的标签。最泛滥的就是div+css,以前的页面，一上来就是一堆的div+css,

为了改变这种这种状况，开发者们和官方提出了让HTML结构语义化的概念，并且官方w3c，也在HTML5给出了几个新的语义化的标签。

常用的表单元素

1. form: 定义供用户输入的表单。

2. fieldset: 定义域。即输入区加有文字的边框。

3. legend：定义域的标题，即边框上的文字。

4. label：定义一个控制的标签。如输入框前的文字，用以关联用户的选择。

5. input: 定义输入域，常用。可设置type属性，从而具有不同功能。

6. textarea: 定义文本域(一个多行的输入控件)，默认可通过鼠标拖动调整大小。

7. button: 定义一个按钮。

8. select: 定义一个选择列表，即下拉列表。

9. option: 定义下拉列表中的选项。

定位属性

top, right, bottom, left;
计算原则：基于父元素

盒模型属性

height, width, margin, padding;

height：基于包含它的块级对象的百分比高度
width：基于包含它的块级对象的百分比宽度
margin，padding：百分数是相对与父元素的width计算

relative

简介：生成相对定位的元素，相对于其正常位置进行定位。

生成相对定位的元素，相对于其正常位置进行定位。元素的位置通过left、right、top、button属性进行规定，可以通过z-index进行层次分级。 元素仍保持其未定位前的形状，原本所占的空间仍将保留。（如果没有定位偏移量，对元素本身没有任何影响。所以可以设置父元素的position属性为relative，使其成为子元素的包含块）

像素

像素即px，是画面中最小的点（单位色块）。像素的大小是没有固定长度值的，不同设备上1个单位像素色块的大小是不一样的。

px是一个相对单位，而且在特定设备上总是一个近似值（原则是尽量接近参考像素）。

分辨率

分辨率=画面水平方向的像素值 * 画面垂直方向的像素值。

分辨率可以分为两方面：屏幕分辨率和图像分辨率。