h5 day7笔记 2021.08.24

元素类型分类：

1.块级元素：（div、p、h、ul、li、hr...）

--可直接设置宽高，以盒子形式在浏览器中显示；

--独占一行；

--默认从上到下排列；

作用：可嵌套其他元素或行内元素作为网页的布局容器。

2.行内元素：（a、span、i、em、b、strong、br....）

--无法直接设置宽高；

--默认宽高大小由自身内容决定；

--一行内逐个显示；

常见bug：设置margin-top/bottom是无法解析的（设置margin一定要有边框的接触）

3.可变元素：行内块元素（input/img）

--在一行内逐个显示（行内元素的特点）

--可以设置宽高（块元素的特点）

--所有的行内块元素都是以基线对齐（布局问题），解决方法：vertical-align:top、bottom、middle

拓展：

自带边框的标签：input、hr、textarea、select

置换元素（有初始的宽高大小，通过改变属性值会显示不同的样式）：img/input

非置换元素：div/p/a

元素类型的转换：

display：block（块级）/inline（行内）/inline-block（行内块）/list-item（列表项目，具有列表特点，也就是块级）/none（表示删除html结构，在浏览器中不显示）

--none可以和block组成一对，表示隐藏和显示；

--给元素添加浮动，相当于给元素转化为行内块元素，但依然具有浮动属性的特点；

属性值可为none的属性：

--清除列表样式 list-style

--清除下划线 text-decoration

--清除边框 border

-- 清除背景 background

-- 多行文本域禁止拖拽 resize

-- 清除点击输入框高亮的边框 outline

图片居中：

1.控制图片在水平方向上居中 text-align: center

2.根据行内块对齐的问题 需要在图片的后面添加一个任意标签(不要空格换行)

3.结合解决基线对齐的问题 将两者都转换为行内块元素

4.给两个标签设置vertical-align:middle

（比较麻烦，后面可使用弹性盒解决图片对齐）