前端知识重新梳理-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又有什么有缺点呢?为什么脱离文档流会更消耗性能呢,下一回见~

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页