赞
踩
目录
在实际开发中,人们已经很少使用表格等html标签,我们通常使用div标签加上padding属性与margin属性进行网页布局
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title></title>
- </head>
- <style type="text/css">
- /* p标签自带16px的外边距 */
- #box{
- width: 100px;
- height: 100px;
-
- margin: 20px 30px;
- /* 上下左右的分配和边框和内边距一样 */
- }
-
-
- </style>
-
-
-
- <body>
- <p></p>
- <div id="box">
-
- </div>
- </body>
- </html>

通过两张图片对比 ,可以明显看出盒子外边距有所增加
注意:
^(* ̄(oo) ̄)^注意!!!! 标准流中(没有什么浮动效果之类的),垂直方向的margin不叠加,以最大的为准,这叫做margin的塌陷现象
可以看出,上下两边的距离是中间的1/2,这是因为浮动解决了margin的塌陷现象
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title></title>
- </head>
- <style type="text/css">
- /* p标签自带16px的外边距 */
- #box{
- width: 100px;
- border: solid #000000;
- overflow: hidden;
- }
- #box1{
- width: 100px;
- height: 100px;
- margin: 10px 0px ;
- background-color: #ADFF2F;
- float: left;
- }
- #box2{
- width: 100px;
- height: 100px;
- margin: 10px 0px ;
- background-color: aqua;
- float: left;
- }
-
-
- /* ^(* ̄(oo) ̄)^注意!!!! 标准流中(没有什么浮动效果之类的),垂直方向的margin不叠加,以最大的为准,这叫做margin的塌陷现象 */
-
- </style>
-
-
-
- <body>
- <p></p>
- <div id="box">
- <div id="box1">
-
- </div>
- <div id="box2">
-
- </div>
- </div>
-
- </body>
- </html>

先用一个大盒子将两个小盒子框起来,然后对小盒子进行设置,这样就可以实现非常规操作,同理,可以把大盒子尺寸变大,把盒子放在任何你想要的地方
今天的分享到这里就结束啦~~希望能帮到您!!
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。