定宽居中-横幅

最新推荐文章于 2021-06-26 18:21:29 发布

WD-CHINA

最新推荐文章于 2021-06-26 18:21:29 发布

阅读量208

点赞数

本文链接：https://blog.csdn.net/qq_44692640/article/details/89221477

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			/* body默认有一个8像素的外边距，如果不想要 可以手动设置为0 */
			body{
				/* margin 设置盒子的外边距 */
				margin: 0;
			}
			
			div{
				/* 宽高是盒子内容的大小 不包含边框 不包含外边距 不包含内边距*/
				width: 800px;
				height: 80px;
				background-color: red;
				/*  */
				/* border: black 5px solid; */
				/* margin 外边距  盒子与盒子之间的距离*/
				/* margin 复合样式  包含 上 右 下 左 四个方向的外边距 */
				/* margin: 10px;  一个值 是设置四边的外边距*/
				/* margin: 10px 20px;  两个值  是设置 上下  左右 外边距*/
				/* margin: 10px 20px 30px 40px; 四个值  上 右 下 左 */
				/* 单独设置某一边的外边距 */
				/* margin-top: 20px;
				margin-left: 20px; */
				/* 定宽居中 */
				/* auto 自动计算 */
				/* 等同于 calc((100% - 800px) / 2) */
				margin: 0 auto;
			}
			
		</style>
	</head>
	<body>
		
		<div></div>
		<!-- 横幅展示图片 只需要将宽度设置为100%  高度自适应即可 -->
		<img src="header.jpg" alt="" width="100%">
		
	</body>
</html>

WD-CHINA

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
定宽居中-横幅

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> /* body默认有一个8像素的外边距，如果不想要可以手动设置为0 */ body{ /* margin 设置盒子的外边...
复制链接

扫一扫