HTML 盒子模型

最新推荐文章于 2023-06-06 17:11:12 发布

Di_Panda

最新推荐文章于 2023-06-06 17:11:12 发布

阅读量435

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/Di_Panda/article/details/105642182

版权

为了找到一种布局方式，是目前最主要的布局方式，比传统的table布局要美观，也要复杂很多。

盒子模型基础

设置宽高/设置边框/设置内间距/设置外边距

width:200px;  /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */ 
height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */

盒子模型基础

margin 基础

margin只能自动对齐中间，但是不能自动对齐上下

样式设置如图所示

.box{
   
			width: 200px;
			height: 200px;
			background-color: gold;
			/* margin:50px auto 100px auto; */
			margin: 50px auto 100px;

如果想把盒子完全贴近页面边距应该怎样设计呢？
因为Body占有8px的界面，所以在样式里面应该设定margin-left: -8px;才能够完全贴边。
如何制作这个盒子:

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Margin的技巧</title>
	<style type="text/css">
		.box,.box1
		{
   
			width: 200px

最低0.47元/天解锁文章

Di_Panda

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML 盒子模型

为了找到一种布局方式，是目前最主要的布局方式，比传统的table布局要美观，也要复杂很多。盒子模型基础设置宽高/设置边框/设置内间距/设置外边距width:200px; /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */ height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */盒子模型基础margin 基...
复制链接

扫一扫