2021-04-17前端问题由浅入深整理(HTML,CSS)

本人简介:前端开发工作经验1年左右,个人经验总结

HTML

HTML我个人感觉没有必要深入去学习,目前我也没有找到关于HTML的优化之类的博客书籍之类,关于HTML我们只需要知道以下几点:

1. 他是内部是由很多<>(开始标签)和</>(结束标签)组成,比如:<div></div>,有的标签还没有结束标签,直接就是</>,比如:<img />,其中这些标签可以进行嵌套,标签内部可以自己随便定义名字(只要不是自带的都算你自己定义的里面随便写):比如 <test></test>,也可以用自带的标签:比如<div></div>;
2. 这些标签上面有属性(attr),这些属性也是可以自己定义(随便写),比如 <test data-test="test" class="my-class">; 给标签加属性就是 属性名="属性值"; 常用属性: id,class,style,title,src 等;
3. 在html文件内引入其他文件css,js等文件, 一般放在<title>Document</title>标签的下面,引入.css文件和.js文件,当然这个js文件中的代码不是在window.ready函数下面的话,引入js最好是放在</html>的后面,也就是这个文件的最后面
4. 如果引入文件开发的时候遇到了缓存问题,在后面加点东西< link rel="stylesheet" href="xxxxxxxx.css?v=001">; v=001,002随便换个数,或者右击chrome浏览器的顶部刷新按钮,选最底下那个清空缓存并硬性重新加载;
5. 注意点:HTML应当用最少的标签嵌套方式,别没事一顿标签嵌套,嵌套层级少一点dom渲染和查找dom的时候性能好一点(dom:标签经过浏览器渲染之后的玩意儿)

CSS部分我觉得现在我都没弄怎么明白,但是现在的日常开发已经够用了,CSS这个东西是给HTML标签加样式的,跟当代女生PS+美颜+滤镜差不多,具体原理请参照B站UP主:objtube的卢克儿2020-06-01视频:浏览器是如何运作的;

侵权删除:通知我

其中CSS中的常用属性:
width/height:定义这个DOM元素的宽度/高度;
margin:定义这个DOM元素距离其他元素的距离;
padding:当前DOM元素内部的东西距离当前DOM的边距,比如这个DOM宽高都是20px的,里面嵌套了一个宽高都是10px的东西;那么里面这个东西应该是紧贴这个大DOM的上面和左边的,如果给他个padding-top:1px;那么这个DOM高是21px;这个小DOM会跟上面有1px的距离;
top/right/bottom/left:定义这个DOM的距离上/右/下/左的距离;(一般和position:absolute搭配使用);
margin-top/margin-right/margin-bottom/margin-left:定义这个DOM的距离上/右/下/左的距离;(一般和position:relative搭配使用或者直接使用);
background/background-color:定义DOM的颜色或者背景图片/定义DOM的颜色;
color:定义文本的颜色;
line-height:定义DOM元素内文字的行高(一般与height的数值相同,可以实现文本上下居中的效果);
text-align:(left/center/right)默认left 定义DOM元素内文字的左右对齐;
test-indent:定义文字的缩进;
cursor:定义鼠标移入DOM内鼠标的样式,一般设置pointer(表示该DOM可以点击等);
text-decoration:让DOM内文本有下划线,下划线颜色与文本颜色相同,(表示改DOM可以点击等);
display:(none/block) 表示该DOM的显示或者隐藏;
display:inline-block:将行内元素变成块级元素但是不会换行(让行内元素span/nav等可以定义宽高)

CSS的组合应用:
1:文本的超出隐藏,并且转换为省略号

/*思路:
1:给该DOM定义宽度
2:超出DOM隐藏
3:文本超出变成省略号
4:换行设置为不换行
*/
.demo{
	width:300px;  
	overflow: hidden; 
	text-overflow:ellipsis; 
	white-space: nowrap; 
}

2: 设置文本显示三行,超出三行显示省略号

/*思路:
1:定义高度
2:定义宽度
3:超出隐藏
4:文本设置换行
5:文本超出变成省略号
6:将显示方式设置为 webkit-box
7:从顶部向底部垂直布置子元素
8:设置超出行数
*/
.demo{
	height:50px;
	width:50px;
	overflow:hidden;
	white-space:normal;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3;
}

3:float布局:

<style>
/*思路:
1:给出一个DOM容器,定义这个容器的宽高属性
2:使这个DOM内的元素向左浮动
3:定义DOM内元素距离右边和上边的距离
缺点:对于新手玩家不友好,因为涉及到清除浮动的操作
*/
.float-display-container{
	width:500px;
	height:300px;
	background-color:blue;
}
.float-display-item{
	width:50px;
	height:50px;
	background-color:green;
	float:left;
	margin-right:20px;
	margin-top:20px;
}
</style>
<div class="float-display-container">
	<div class="float-display-item"></div>
	<div class="float-display-item"></div>
	...
	<div class="float-display-item"></div>
</div>

4:flex布局:

<style>
/*思路:
1:给出一个DOM容器,定义这个容器的宽高属性
2:dispaly:flex:定义这个DOM容器的展示方式是flex
3:justfiy-content:定义内部子元素排列方式,内容多多,总有一款适合你
4:flex-wrap:wrap:定义换行还是不换行,默认不换行
5:flex:0 0 30%:定义每个子元素占父元素宽度的百分比 30%:占30%;
优点:简单易上手,而且还能兼容分辨率
缺点:暂时没发现
*/
.flex-display-container{
	width:500px;
	height:300px;
	background-color:blue;
	dispaly:flex;
	justfiy-content:space-around;
	flex-wrap:wrap;
}
.flex-display-item{
	width:50px;
	height:50px;
	flex:0 0 30%;
	background-color:green;
}
</style>
<div class="flex-display-container">
	<div class="flex-display-item"></div>
	<div class="flex-display-item"></div>
	...
	<div class="flex-display-item"></div>
</div>

5:grid布局

侵权删除,通知我

<style>
/*介绍:
首先该布局和flex布局类似,但是不同于flex布局,flex布局更偏向于一维布局,类似与对于一条线操作,grid布局类似于二维布局,是对一个面操作;懒得写原理了,具体请参考:
**阮一峰的工作日志**
http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
思路:
1:给出一个DOM容器,定义这个容器的宽高属性
2:display:grid:定义这个DOM容器的展示方式是grid
3:grid-template-columns:29% 30% 31%,定义每一列的宽度
注:这个属性写多少个属性值就会每一行有多少列,写三个就是三列,写10个就是10列
4:grid-template-rows: 30% 30% 30% 定义每一行的宽度
注:同上
*/
.grid-display-container{
	width:500px;
	height:300px;
	background-color:blue;
	
	display:grid;
	grid-template-columns:29% 30% 31%
	grid-template-rows: 30% 30% 30%
}
.grid-display-item{
	width:50px;
	height:50px;
	background-color:green;
}
</style>
<div class="grid-display-container">
	<div class="grid-display-item"></div>
	<div class="grid-display-item"></div>
	...
	<div class="grid-display-item"></div>
</div>

6:元素居中定位

<style>
/*思路:
1:给DOM容器定义宽高
2:给子元素定义定位为相对定位
3:设置top:让子元素的上边距距离父元素的上边距为50%;
4:设置transform:traslateY(-50%);让子元素向上移动自身的50%
优点:可以适应浏览器分辨率
*/
.position-center-container{
	width:500px;
	height:300px;
	background-color:blue;
}
.position-center-item,.position-center-item1{
	width:50px;
	height:50px;
	background-color:green;
	
	position:relative;
	top:50%;
}
.position-center-item{
	transform:traslateY(-50%);
}
.position-center-item1{
	left:50%;
	transform:traslate(-50%,50%);
}
</style>
<div class="position-center-container">
	<div class="position-center-item"></div>
	<div class="position-center-item1"></div>
</div>

7:绝对定位搭配相对定位

<style>
/*思路:
1:给DOM容器定义宽高
2:给DOM定义定位方式为相对定位	position:relative;
3:给子元素定义定位方式为绝对定位	position:absolute;
4:给子元素设置到上边和右边的距离为0 	top:0;right:0;
应用:一般为关闭按钮或者icon需要覆盖到dom上的情况下
*/
.position-relative-container{
	width:50px;
	height:50px;
	background-color:green;
	
	position:relative;
}
.position-absolute-item{
	width:10px;
	height:10px;
	background-color:blue;
	
	top:0;
	right:0;
	position:absolute;
}
</style>
<div class="position-relative-container">
	<div class="position-absolute-item"></div>
</div>