WEB（一）——行内元素、块级元素、行内块级元素

WEB任务

个人简介

• 本人目前为一名普通一本的大三学生狗，在接触了N多语言项目比赛之后还是觉得前端更能带给我视觉的享受，如果之后有机会可以细致的谈谈我大学的经历，目前在考研或就业路上徘徊，其实不管就业还是工作都感觉自己很菜鸡，特别是和一已经进公司从事前端的朋友聊了天之后，感觉自己什么都答不上，所以决定在做自己的一个微信小程序的项目的同时，把前端抓起来，到年底看情况再决定考研或是就业吧。

• 周末9-21点，21点之后写博客，周一到周五上课的同时加班做小程序及完成对应的任务，其实早就想写博客了，就用博客记录我的最后的大学生涯蜕变我觉得是很ok的。

• 先注明一下虽然会打游戏酒吧蹦迪摇骰子副业是潮单微商，但大学本人绝不是混过来的，物联网工程的但对硬件确实不感冒，当过部长进过实验室去过三下乡，搞过python（跟着小甲鱼学的），c++（学校开课，挺喜欢），java（基本了解但不感冒），MySQL（瞎搞）,算法（洛谷刷题明年参加蓝桥杯），HCJ（前端那三个基本的嘛），jQuery，Bootsrap，Vue（这三个才接触不久），微信小程序（算是比较久了搞了大半年了），GitHub（存代码用毕竟开源的多） 目前在做项目准备参赛更多的是拿到学校让大家使用吧，拿奖的话拿过校二，省三，国三院级校级奖学金都拿过，所以还算OK吧，平时没课都待在自习室瞎捣鼓，觉得自己垃圾是因为三分钟热度和没有系统的学习。

• 目标：不考研的话争取明年暑假去实习，大四冲击大厂。

10.21-10.25之 WEB任务（一）

1、一周复习hcj,HTML一般用的也就那些东西，了解一下行内元素、块级元素、行内块元素。
2、清除浮动（好像是五种还是六种方式）
3、BFC（概念、触发、作用、应用）
4、居中问题（水平垂直居中方法，大概有十来种，你自己总结一下）
5、圣杯布局（flex、float、position要会，尤其前两种，gird和table了解就行）
6、轮播图:js原生做弄清楚原理有箭头，实现了写导航点自动播放然后无缝

注:就是不是让你全背下来，但是常用的要会，不能写什么都要翻文档，菜鸟或者w3c都可以 。

所以现在就让我这只菜鸡开始我独具个人魅力的blog写作生涯吧！！！

一、行内元素，块级元素、行内块级元素

html中可以把元素分为行内元素、块级元素、行内块级元素，三者可以相互转换。（以前还真没注意过，位置都强行暴力拼接的haha）

（1）转换为行内元素：display:inline

常用：
,修饰字体,以及_,作出平方效果。

特征：

• 设置宽高无效。
• 对margin左右有效，上下无效，对padding上下左右都有效，但会撑大空间。
• 不会自动换行。

（2）转换为块级元素：display:block

常用：

特征：

• 能识别宽高
• 对margin、padding上下左右都有效。
• 可自动换行
• 多个块状元素写在一起默认排序从上到下（独成一行）

（3）转换为行内块级元素 display:inline-block

特征：

• 不自动换行
• 能识别宽高
• 默认排列从左到右。

例子：
HTML:

		

			行内元素1
			行内元素2
			
			
行内块状元素1
			
行内块状元素2
			
			
块状元素1
			
块状元素2
		

CSS:

			.container{
				width: 600px;
				height: 800px;
				border: 1px solid black;
				color: #000000;
			
			}
			
			span,.block,.inline-block{
				/* 此时span为inline; */
				width: 200px;
				height:100px;
				border: 1px solid red;
			}
			
			.block{
				/* div本身就是block */
			}
			
			.inline-block{
				display: inline-block;
			}
			
			

效果：可以发现行内元素宽度高度设置无效，行内和行内块元素都不会自动换行

对比一下：把container的width改成700px，span单独设置display:inline-block

那我们再来测试一下margin的效果：

			.container{
				width: 600px;
				height: 800px;
				border: 1px solid black;
				color: #000000;
			
			}
			
			span{
				margin: 20px 20px;//看图你会发现上下设置的px无用
				border: 1px solid red;
			}
			
			.block{
				/* div本身就是block */
				width: 200px;
				height:100px;
				border: 1px solid red;
				margin: 50px 50px;//上下左右都有用但上下两个块状div之间存在垂直外边距重叠
			}
			
			.inline-block{
				display: inline-block;
				width: 200px;
				height:100px;
				border: 1px solid red;
			}
			

再解释一下撑大空间，就用inline-block为例给他的css增添一个margin ：50px 50px就会看到行内元素也跟随行内块元素距离上方有了50px的距离。

下一篇 ：清除浮动

被师傅提问为什么中间出现缝隙？