css案例学习之父子块的margin
两边还会有些距离，这是body默认的。
代码：
<head>
<title>父子块的margin</title>
<style type="text/css">
/* body{
margin:0 0;
} */
div.father{ /* 父div */
background-color:#fffebb;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:10px;
border:1px solid #000000;
}
div.son{ /* 子div */
background-color:#a2d2ff;
margin-top:30px;
margin-bottom:0px;
padding:15px;
border:1px dashed #004993;
}
</style>
</head>
<body>
<div class="father">
<div class="son">子div</div>
</div>
</body>
两边没有了距离
<head>
<title>父子块的margin</title>
<style type="text/css">
body{
margin:0 0;
}
div.father{ /* 父div */
background-color:#fffebb;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:10px;
border:1px solid #000000;
}
div.son{ /* 子div */
background-color:#a2d2ff;
margin-top:30px;
margin-bottom:0px;
padding:15px;
border:1px dashed #004993;
}
</style>
</head>
<body>
<div class="father">
<div class="son">子div</div>
</div>
</body>
说明：子元素只能在父元素允许的空间中活动。默认情况下会自动填满父元素。
撑破了
代码：
<head>
<title>设置父块的高度</title>
<style type="text/css">
div.father{ /* 父div */
background-color:#fffebb;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:10px;
border:1px solid #000000;
height:40px; /* 设置父div的高度 */
}
div.son{ /* 子div */
background-color:#a2d2ff;
margin-top:40px; margin-bottom:0px;
padding:15px;
border:1px dashed #004993;
}
</style>
</head>
<body>
<div class="father">
<div class="son">子div</div>
</div>
</body>
说明：设置父元素高度为40px，子元素在处理margin-top时，撑破了父元素。
代码：
<head>
<title>设置父块的高度</title>
<style type="text/css">
div.father{ /* 父div */
background-color:#fffebb;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:10px;
border:1px solid #000000;
height:40px; /* 设置父div的高度 */
width: 400px;
}
div.son{ /* 子div */
background-color:#a2d2ff;
margin-top:40px; margin-bottom:0px;
margin-left:400px; /*宽度有很大的伸缩空间，超过宽度也会被撑破*/
padding:15px;
border:1px dashed #004993;
}
</style>
</head>
<body>
<div class="father">
<div class="son">子div</div>
</div>
</body>
说明：宽度也会被撑破，不过有很大的弹性空间
css案例学习之父子块的margin的更多相关文章
- css案例学习之table tr th td ul li实现日历
效果 代码 <html> <head> <title>Calendar</title> <style> <!-- .month { b ...
- css案例学习之float浮动
代码: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...
- css案例学习之盒子模型
定义:每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置:里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子 ...
- CSS 案例学习
1.样式 display:inline-block;可改变a标签,合其可定义宽高 2.a:hover表示鼠标经过 3.background:url(110.png) bottom 表示:给链接一个图片 ...
- css案例学习之用thead、tbody、tfoot实现漂亮的table布局
首先说说thead.tbody.tfoot <thead> <tbody> <tfoot> 无论前后顺序如何改变, <thead> 内的元素总是在表的最 ...
- css案例学习之ul li dl dt dd实现二级菜单
效果 代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- css案例学习之通过relative与absolute实现带说明信息的菜单
效果如下 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- css案例学习之div a实现立体菜单
效果 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- css案例学习之双斜角横线菜单
效果 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
随机推荐
- 碰到这个SB错误，'Taglist: Exuberant ctags (http://ctags.sf.net) not found in PATH. Plugin is not loaded.点办
After launching MacVim you may get this annoying error message:'Taglist: Exuberant ctags (http://cta ...
- 畅通工程--hdu1232(并查集)
畅通工程 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- SQL Server 查看表定义的 2 种方法
方法 1. 用SQL Server Management Studio 第一步找到要查看的表,右键 第二步点设计 方法 2. sp_help @objname = 'tableName' execut ...
- Sql Server专题：SQL 经典实例
SQL 经典实例 1.实例表: Student(S#,Sname,Sage,Ssex) 学生表 S#:学号:Sname:学生姓名:Sage:学生年龄:Ssex:学生性别 Course(C#,Cname ...
- Oracle EBS-SQL (MRP-5):重起MRP Manager.sql
UPDATE fnd_concurrent_processes SET process_status_code = 'K' WHERE process_status_code not in ('K', ...
- Can't create a new thread (errno 11); if you are not out of available memory, you can consult the manual for a possible OS-dependent bug
解决方案: http://www.javatang.com/archives/2013/06/19/2701909.html
- 顶尖数据挖掘教学案例库（TipDM-C10）产品白皮书
顶尖数据挖掘教学案例库 (TipDM-C10) 产 品 说 明 书 广州泰迪智能科技有限公司 版权所有 地址: 广州市经济技术开发区科学城232号 网址: ht ...
- 北京西服定做_衬衫定制_关于我们_Dimoon TLR.
北京西服定做_衬衫定制_关于我们_Dimoon TLR.
- word2vec 入门（二）使用教程篇
word2vec 要解决问题: 在神经网络中学习将word映射成连续(高维)向量,这样通过训练,就可以把对文本内容的处理简化为K维向量空间中向量运算,而向量空间上的相似度可以用来表示文本语义上的相似度 ...
- 使用ashx一般处理程序，读取不到Session的问题
一般的处理程序文件里面是用不了Session的,必须得实现Session接口才可以用. public class RandomCode : IHttpHandler, System.Web.Sessi ...