面试题div居中

静静湖

已于 2022-03-28 16:31:20 修改

阅读量94

点赞数

文章标签：前端 javascript css

于 2022-03-18 22:36:46 首次发布

本文链接：https://blog.csdn.net/m0_60608114/article/details/123586189

版权

border-style:dotted solid double dashed;
dotted ：上边框是点状

solid：右边框是实线

double：下边框是双线


dashed：左边框是虚线

.flex布局

<div class= "flex"></div>
<style>
.flex{
display:flex;
align-items: center; /*垂直方向居中*/
justify-content: center;  /*水平方向居中*/

}
</style>
父元素标签，里面加一个子元素可居中显示

margin 负值居中


<div class="box"></div>
#css
.box{
width:200px;
height: 200px;
position: absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}

absolute 绝对定位

<div class="box"></div>
#css
.box{
position:absolute/fixed;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}

现在最好用的就是flex布局。要熟练

div画三角形

<!DOCTYPE >
<thml>
	<style>
	.d4{
	 margin-left: 110px;
	 float: left;
	 width: 0; 
	 height: 0;
	 border-width: 100px;
	 border-style: solid;
	 border-color: transparent #0099CC transparent transparent;
	}
	/**html*/
	
	</style>
</thml>
<body>
	<div class="d4"></div>
</body>

优惠劵

静静湖

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
面试题div居中

flex布局<div class= "flex"></div><style>.flex{display:flex;align-items: center; /*垂直方向居中*/justify-content: center; /*水平方向居中*/}</style>父元素标签，里面加一个子元素可居中显示margin 负值居中<div class="box"></div>#css.box{widt
复制链接

扫一扫