第一天基础html和css的复习总结（6）

最新推荐文章于 2021-12-20 18:17:56 发布

写bug的小气球

最新推荐文章于 2021-12-20 18:17:56 发布

阅读量141

点赞数

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

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

版权

自学前端专栏收录该内容

42 篇文章 1 订阅

订阅专栏

1.实现让不一样大小的图片居中
关于图片垂直居中，有一个办法是添加一个空白的伪类元素，改变他的dispaly为inline-blcok;然后让他的高度等于父容器的高度，同时设置要居中图片和伪类元素属性vertical-align:middle;
另一种就是在图片后面增加了一个span空标签，下面是依次代码展示
vertical-align这个是设置元素的垂直排列的.
用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐.按我的理解就是需要找一个平级的参照物才能设置，第二种就是找了平级的span做参照物

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		dl{
			width: 199px;
			height: 236px;
			border-right: 1px solid #f00;
			border-bottom:1px solid #f00 ;
			float: left;
		}
		dl dt{
			width: 199px;
			height: 180px;
			border-bottom: 1px solid #f00;
			text-align: center;
		}
		dl dt img{
			vertical-align: middle;
		}
		dl dt:before{
			content: "";
			width: 0%;
			height: 100%;
			background: #000000;
			display: inline-block;/* 既有内联元素特点又有块状元素特点,内联元素就是想span之类的 */
			/* 行内块状元素特征：(1)不自动换行(2)能够识别宽高(3)默认排列方式为从左到右 */
			vertical-align: middle;
		}
	</style>
	<body>
		<dl>
			<dt><img src="c.png"></dt>
			<dd>跑步机</dd>
			<dd>￥888</dd>
		</dl>
		<dl>
			<dt><img src="d.png"></dt>
			<dd>跑步机</dd>
			<dd>￥888</dd>
		</dl>
	</body>
</html>


```html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		dl{
			width: 199px;
			height: 236px;
			border-right: 1px solid #f00;
			border-bottom:1px solid #f00 ;
			float: left;
		}
		dl dt{
			width: 199px;
			height: 180px;
			border-bottom: 1px solid #f00;
			text-align: center;
		}
		dl dt img{
			vertical-align: middle;
		}
		dl dt span{
			width: 0%;
			height: 100%;
			background: #000000;
			display: inline-block;/* 既有内联元素特点又有块状元素特点,内联元素就是想span之类的 */
			/* 行内块状元素特征：(1)不自动换行(2)能够识别宽高(3)默认排列方式为从左到右 */
			vertical-align: middle;
		}
	</style>
	<body>
		<dl>
			<dt><img src="c.png"><span></span></dt>
			<dd>跑步机</dd>
			<dd>￥888</dd>
		</dl>
		<dl>
			<dt><img src="d.png"><span></span></dt>
			<dd>跑步机</dd>
			<dd>￥888</dd>
		</dl>
	</body>
</html>

2.边框的颜色可以单独设置，就像风琴效果的箭头一样
border: 10px solid blueviolet;
border-top-color:royalblue;
border-left-color:royalblue ;

3.像这样不写right，就不会显示右侧，
border-left: 30px black solid;
border-top: 52px solid black;
border-bottom: 52px solid black;
在这里插入图片描述
加上right后变成，
不是当少了右面就少了三角，其实是都没了

4.骰子布局，这里全部利用弹性盒
flex-wrap: wrap;/ 当子元素溢出父容器换行 /
剩下的在总结6有
想要变成弹性盒，必须的给父元素，display：flex
还有一点可以思考下，弹性盒应该只能下面控制它的下一级，下下级控制不到了，因为刚设置nav时，span不像前3个一样听话了，竖排显示了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div{
			width: 200px;
			height: 200px;
			border: 1px solid #000;
			float: left;
			background: #FF0;
			display: flex;
			justify-content: center;/* 水平 */
			align-items: center;/* 垂直 */
			box-sizing: border-box;/* 只和设置的宽度高度有关,不算padding和边框 */
		}
		span{
			width: 50px;
			height: 50px;
			display: block;
			background: #f00;
			border-radius: 50%;
		}
		div:nth-child(2){
			justify-content: space-around;
		}
		div:nth-child(3){
			justify-content: space-between;
			padding: 10px;
			/* 这里设置完会多出去一块,所以用怪异盒模型box-sizing: border-box;,让它从边框开始算起 */
		}
		div:nth-child(3) span:nth-child(1){
			align-self: flex-start;/* 让它从第一个开始显示 */
			
		}
		div:nth-child(3) span:nth-child(3){
			align-self: flex-end;
		}
		div:nth-child(4){
			flex-wrap: wrap;/* 当子元素溢出父元素时换行显示 */
		}
		nav{
			width: 100%;
			height: 50px;
			display: flex;
			/* background: #0000FF; */
			justify-content: space-around;
		}
		div:nth-child(5){
			flex-wrap: wrap;
		}
		div:nth-child(6){
			flex-wrap: wrap;
		}
	</style>
	<body>
		<div><span></span></div>
		<div><span></span><span></span></div>
		<div>
			<span></span>
			<span></span>
			<span></span>
			
		</div>
		<div>
			<nav>
				<span></span>
				<span></span>
			</nav>
			<nav>
				<span></span>
				<span></span>
			</nav>
		</div>
		<div>
			<nav>
				<span></span>
				<span></span>
			</nav>
			<nav>
				<span></span>
			</nav>
			<nav>
				<span></span>
				<span></span>
			</nav>
		</div>
		<div>
			<nav>
				<span></span>
				<span></span>
			</nav>
			<nav>
				<span></span>
				<span></span>
			</nav>
			<nav>
				<span></span>
				<span></span>
			</nav>
		</div>
	</body>
</html>

好的，至此html简单的学习与复习就到这了，还剩下JS，JQ，下星期继续，弹性盒子还是不是很系统学习，有些也记不住，但是大概复习重温还是不错的，有了点底，今天7点完成任务，不错！

写bug的小气球

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第一天基础html和css的复习总结（6）

1.实现让不一样大小的图片居中关于图片垂直居中，有一个办法是添加一个空白的伪类元素，改变他的dispaly为inline-blcok;然后让他的高度等于父容器的高度，同时设置要居中图片和伪类元素属性vertical-align:middle;另一种就是在图片后面增加了一个span空标签，下面是依次代码展示vertical-align这个是设置元素的垂直排列的.用来定义行内元素的基线相对于该...
复制链接

扫一扫

专栏目录