前端知识重新梳理-1

基础复习-1

block、inline和inline-block

先上定义：

	display:block 块级元素
 	1，每个块级元素会独占一行
 	2，默认会自动填满父级宽度
 	3，块级元素可以设置padding和margin

	display:inline 内联元素
	1，内联元素不会独占一行，多个相邻的内联元素会排列在同一行里，
	   直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
	2，内联元素设置width和height无效
	3，内联元素水平方向的padding、margin有效，垂直方向的padding、margin无效

	display:inline-block 内联块级元素（自己起的名233）
	1，元素有inline的特性，且可以设置width、height以及垂直方向的padding、margin

inline-block元素之间的空白问题

元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。

解决办法：

• 将父元素的font-size设置为0，再另外设置inline-block元素的字体大小（推荐）
• html代码不要用回车
• 将margin-left设置为负

inline以及inline-block的垂直对齐问题

当多个inline-block字体大小不同、某些元素没有文字、有图片或input、textarea等替换元素时，会出现垂直不对齐的问题。

	替换元素
	所谓替换元素就是根据元素内相关属性的不同,浏览器会有不同的解析展现。 
	比如input元素、img元素或者iframe元素等。 

	基线
	各种字体、图片、行内html元素等可展示的内容都有各自的基线，
	文本的基线在小写字母"x"的最下方
	图片、空文本元素、textarea的基线在元素最下方
	input的基线在输入的文本"x"的最下方（也就是稍微比输入框最下方高一些）

可见，各种行内元素的基线在不同位置，排列在一排自然会显得高高低低，因此需要改变
元素的垂直对齐方式

	vertical-align 设置行级元素的垂直对齐方式，默认值: baseline
	设置vertical-align为top、middle、bottom等来修改垂直对齐方式

inline-block和float对比

当我们需要并排显示块级元素时，可能会需要选择使用inline-block或float，二者有什么异同呢？

相同点:
都可以做到让元素成一排排列
都可以根据父元素的宽度自动换行到下一列
都可以自由设置元素的宽高。

区别：
	float ：会产生浮动效果，元素脱离当前文档流，如果父元素不清除浮动将不被撑开。
如果浮动元素高度不一致，那么下一行的第一个元素将会出现在上一行高度最大的元素的右边。
	inline-block ：不会脱离文档流，会以当前行最高的元素作为行高，下一行从头排列。
	float 布局要比 inline-block 消耗性能

当需要横向排列元素时可能还可以选择使用flex布局，flex又有什么有缺点呢？为什么脱离文档流会更消耗性能呢，下一回见~