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的距离。
下一篇 :清除浮动
被师傅提问为什么中间出现缝隙?