web盒子模型练习题--精华版

乾隆2

于 2022-06-01 20:37:11 发布

阅读量589

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_53925029/article/details/125074602

版权

这是一篇关于前端CSS盒子模型的精华版练习题，通过分析图片来深入理解盒子模型。文中包含两个示例图片：beijing.jpg（930*840）和月饼.png（875*736），帮助读者直观认识每个深蓝色方框所代表的盒子及其尺寸。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wa</title>
    <style type="text/css">
        #div0{
        width:930px;
        height:840px;/*背景图片宽高*/
        background:url(img/beijing.jpg);
		float:left;

        }

        .div1{
        width:220px;
        height:220px;
        float:left;
        margin-left:100px;/*以左顶点为原点构成xy轴，见最后张图片，该盒子的左顶点为终点,构成x轴长度*/
		margin-top:60px;/*....构成y轴长度....接下来的left和top是一样的，只是有些要以最近盒子的的某个顶点为参照物*/
		border:solid;
        }
		
		.divt{
        width:220px;
        height:220px;
        float:left;
        margin-left:19px;
		margin-top:60px;
		border:solid;
        }
		
		
		.div2{
		width:220px;
        height:220px;
		float:left;
		margin-left:100px;
		margin-top:15px;
		border:solid;
		}
		
		.divm{
		width:220px;
        height:220px;
		float:left;
		margin-left:19px;
		margi