常用的几个样式，布局的备忘笔记

最新推荐文章于 2021-10-22 18:15:57 发布

Sprities

最新推荐文章于 2021-10-22 18:15:57 发布

阅读量419

点赞数

文章标签：前端 css样式 div布局

本文链接：https://blog.csdn.net/Zhou07182423/article/details/84390282

版权

1.div插入背景图片，撑满整个屏幕

html,body{
	height:100%;
}

假设 div这个容器的id = ‘container’

#container{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url( image的相对路径 ) no-repeat;
	background-size:cover
}

2.针对div容器里面的内容放的超出当前屏幕的高度，要求自动显示滚动条，将剩下的内容滚动显示出来
给上面的 #container 设置（div 一定要有高度或者宽度的设置）

overflow:auto;

3.一个div容器里面的每一个item的布局（肯定都要高度和宽度都设置了呀！这里就不写了，只是为了记录布局！）
这里是要实现一个简单左右布局，在特定的大小容器里面

<div id='box'>
	<div id='left'>
		<div><div>
		<div><div>
	<div>
	<div id='right'><div>
</div>

#box{
	position：relative;
}
#left{
	position:absolute;
	float:left;
}
#right{
	position:absolute;
	float:right;
}

除了通过设置浮动之外，还可以通过 flex盒子弹性布局来实现以上简单的布局

#box{
	display:flex;
	justify-content:space-between;
	//默认是横向的（row）
}

差不多都是大同小异，只需要注意：哪些该设置在大的包裹容器上，哪些设置容器里面每个item ，一个套一个，都是这么个道理。

#left{
	display:flex;
	flex-direction:colum;
	justify-content:space-between;
}
//这是 left这个div作为一个容器里面的item布局，是列向的

4.还有一个经常用到的就是自定义的框框：

#box{
	width:446px;
	height:490px;
	border:1px solid #106823;
	box-shadow:0px 0px 5px 5px #106823 inset;  // 边框阴影
	border-radius:20%; //边角弧度
}

以上就是我整理的这些我经常会碰到的有关的需要必须掌握的一些样式，布局！之前一直不做笔记，不做不行，一旦不怎么写，回头再用，都有点忘了，哈哈~~

关注