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
常用：
<span></span>,修饰字体<b>,<i>以及<sub>,<sup>作出平方效果。
特征：
- 设置宽高无效。
- 对margin左右有效，上下无效，对padding上下左右都有效，但会撑大空间。
- 不会自动换行。
（2）转换为块级元素：display:block
常用：<div></div>
特征：
- 能识别宽高
- 对margin、padding上下左右都有效。
- 可自动换行
- 多个块状元素写在一起默认排序从上到下（独成一行）
（3）转换为行内块级元素 display:inline-block
特征：
- 不自动换行
- 能识别宽高
- 默认排列从左到右。
例子：
HTML:
<body>
<div class="container">
<span>行内元素1</span>
<span>行内元素2</span>
<div class="inline-block">行内块状元素1</div>
<div class="inline-block">行内块状元素2</div>
<div class="block">块状元素1</div>
<div class="block">块状元素2</div>
</div>
</body>
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的距离。
下一篇 ：清除浮动
被师傅提问为什么中间出现缝隙？
