前端复习总结（1）

最新推荐文章于 2022-12-14 20:18:48 发布

写bug的小气球

最新推荐文章于 2022-12-14 20:18:48 发布

阅读量175

点赞数

分类专栏：自学前端自学 web前端文章标签： html css

本文链接：https://blog.csdn.net/weixin_46013619/article/details/104262402

版权

自学前端同时被 3 个专栏收录

42 篇文章 1 订阅

订阅专栏

web前端

36 篇文章 0 订阅

订阅专栏

自学

25 篇文章 0 订阅

订阅专栏

火狐写好好地，浏览器炸了，吓死了，差点白写了，还好截图了，还是chrome靠谱。。。
在这里插入图片描述

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		html,body{
			height: 100%;
		}
		body{
			display: flex;
			flex-direction: column;
		}
		ul li{
			list-style: none;
		}
		.header{
			height: 100px;
			background: #666666;
		}
		.footer{
			height: 100px;
			background: #666666;
		}
		.main{
			background: #eee;
			flex: 1;
			display: flex;
		}
		.main .left{
			width: 100px;
			background: #f00;
		}
		.main .center{
			flex-grow: 1;
			background: #000;
		}
		.main .right{
			width: 100px;
			background: #00f;
		}
		</style>
	<body>
		<div class="header">header</div>
		<div class="main">
			<div class="left">footer</div>
			<div class="center">footer</div>
			<div class="right">footer</div>
		</div>
		<div class="footer">footer</div>
	</body>
</html>

在这里插入图片描述

css单位

在这里插入图片描述

css选择器

学习的行内标签和块级元素分别有哪些?
行内标签:span, strong, a, img, input, textarea
块级元素:div, h1-h6, p, hr, pre, ul, ol, dd, dt, th. tr, td

两者的区别与特性；
1).块级元素独占一行空间，行内元素只占据自身宽度的空间;
2).块级元素是可以包含块级元素和行内元素; 行内元素只能包含文本信息和行内元素;
3). 块级元素可以设置宽和高，行内元素设置的宽和高失效；

标签选择器：针对一类标签
ID选择器：针对某一个特定的标签使用
类选择器：针对你想要的所有标签使用
通用选择器（通配符）：针对所有的标签都适用（不建议使用）
后代选择器: 定义的时候用空格隔开
交集选择器
并集选择器：定义的时候用逗号隔开
伪类选择器 hover这种
序选择器 :first-child这种

BFC是什么

直译是块级格式化上下文，它是一个独立的区域，只有块级元素参与，规定了块级元素内部如何布局，并且与这个区域外部毫不相干

BFC布局规则:
1.独占一行
2.BFC区域不会与开启浮动的的box重叠（如何开启BFC，overflow不为visible）这里可以想到两列布局，给一个left开启浮动，然后overflow第二个right盒子，
3.内部的Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠（解决办法，比较好的就是包一层div ，overflow：hidden来开启一个BFC，以后遇到margin重叠，无论父子，兄弟，就是这一条导致的）
4.计算BFC高度时，浮动元素也参与计算（清除浮动）

BFC什么时候出现
1.根元素
2.float属性不为none
3.position为absolute或fixed
4.overflow不为visible
5.display为inline-block，flex，table-cell，table-caption，inline-flex

清除浮动

让浮动的元素可以撑开父级的高度，也就是高度塌陷问题
1.暴力点，直接给父级加高度
2.给父元素开启BFC，overflow：hidden，遵循上面第4条，（移动端用这个）
3.父元素position：absolute或者float：left 这两个特点：宽高由内容撑开
4.通过br

<div class="box">
	<div class="box2">	
	</div>
	<br clear='all'/>
</div>

5.空标签清除浮动

<div class="box">
	<div class="box2">	
	</div>
	<div style='clear:both'></div>
</div>

6.伪元素（pc端用这个，因为要考虑IE6 7）

.clearfix{
		*zoom:1;
	}
.clearfix:after{
		content:"";
		display:block;
		clear:both;
	}
	
<div class="box clearfix" >
<div class="box2"></div>
</div>