css 盒子模型布局案例

左手的ㄟ右手 2021-07-24 14:25 494阅读 0赞

<html>
    	<head>
    		<title>css 盒子模型</title>
    		<meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style type="text/css"> div{ 
    				width:300px;
    				height:300px;
    				
    			}
    			#h1{ 
    				width:650px;
    			}
    			#h2{ 
    				width:650px;
    			}
    			#d1{ 
    				border:solid 1px red;
    				float:left;
    				margin-right: 10px;
    				
    			}
    			#d2{ 
    				border:solid 1px yellowgreen;
    				float:left;
    			}
    			#d3{ 
    				border:solid 1px orange;
    				float:left;
    				margin-right:10px;
    			}
    			#d4{ 
    				border:solid 1px magenta;
    				float:left;
    			}
    			#h1,#h2{ 
    				width:650px;
    				margin-top:20px;
    				margin:auto;
    				
    			}
    							
    		</style>
    	</head>
    	<body>
    		<h3 align="center">css 盒子</h3>
    		<hr size="30" color="aquamarine"/>
    		<div id="h1">
    			<div id="d1">
    			  1
    			</div >
    			<div id="d2">
    				2
    			</div>
    		</div>
    		<div id="h2">
    			<div id="d3">
    				3
    			</div>
    			<div id="d4">
    				4
    			</div>
    		</div>
    	</body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，494人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS页面布局之盒子模型

目录 1 盒子模型 1.1 看透网页布局的本质 1.2 盒子模型组成 1.3 边框(border) 1.4 表

不念不忘少年蓝@/ 2022年11月17日 15:58/ 0 赞/ 186 阅读

相关 css盒子模型布局整理

浮动-float 网页布局的本质-用css来摆放盒子。把盒子摆放到相应位置。css提供了三种传统布局方式 1. 普通流（标准流） 2. 浮动方式 3. 定位方式

心已赠人/ 2022年10月19日 05:55/ 0 赞/ 221 阅读

相关 css盒子模型

浏览器中的元素都是一个个的盒子，每一个盒子都有特定的结构。块级元素和行级元素块级元素（block element）块级元素会独占一行，默认其宽度自动填满其

绝地灬酷狼/ 2022年09月21日 11:56/ 0 赞/ 20 阅读

相关 css盒子模型

1.盒子模型所有的html元素都可以看做盒子。 ![这里写图片描述][20160615161131029] 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左

叁歲伎倆/ 2022年09月21日 04:57/ 0 赞/ 10 阅读

相关 CSS的盒子模型与布局

1.CSS的盒子模型按照我的理解就是网页的模块化设计。当想要修改网页的一些布局的时候，就不用去改html代码了，只需要修改css代码即可（1）边框示例

灰太狼/ 2022年08月03日 11:52/ 0 赞/ 192 阅读

相关【CSS】——盒子模型

前提　　在跟着牛腩老师学习前台制作的时候，觉的和在C/S制作的时候有很大的不同，因为之前的界面都是可视化的，都是通过拖拽创建的，而进入B/S阶段所有的控件都是通过代码来

客官°小女子只卖身不卖艺/ 2022年07月28日 01:04/ 0 赞/ 263 阅读

相关 css盒子模型

一般称IE8及其以上为w3c盒子模型，W3C 盒子模型的范围包括 `margin、border、padding、content`，并且 `content` 部分不包含其他部分。

不念不忘少年蓝@/ 2022年07月15日 08:48/ 0 赞/ 225 阅读

相关 css_盒子模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了

「爱情、让人受尽委屈。」/ 2022年05月25日 05:05/ 0 赞/ 280 阅读

相关标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)

转载自：[http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html][http_www.cnblogs.com

- 日理万妓/ 2021年12月22日 09:13/ 0 赞/ 330 阅读

相关 css 盒子模型布局案例

<html> <head> <title>css 盒子模型</title> <meta http-equiv="content-typ

左手的ㄟ右手/ 2021年07月24日 14:25/ 0 赞/ 495 阅读