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 ...
随机推荐
- uva 10304 - Optimal Binary Search Tree 区间dp
题目链接 给n个数, 这n个数的值是从小到大的, 给出个n个数的出现次数. 然后用他们组成一个bst.访问每一个数的代价是这个点的深度*这个点访问的次数. 问你代价最小值是多少. 区间dp的时候, 如 ...
- Android小记之--ClickableSpan
在给TextView设置超链接时,要想ClickableSpan的onClick事件响应,还必须同时设置tv.setMovementMethod(LinkMovementMethod.getInsta ...
- SQL Server 对表的 12 种一般性操作
01. 创建 create table Strings(ID int); go 02. 为表添加列 alter table Strings add String nvarchar(32); ...
- Windows 10上快速尝鲜bash on Ubuntu
今年微软Build 2016大会最让开发人员兴奋的消息之一,就是在Windows上可以原生运行Linux bash,对于非开发人员来讲,可能不知道这意味着什么,而对于开发人员来说,意味着Windows ...
- PHP设计模式之委托模式
委托模式: 通过分配或委托至其他对象,委托设计模式能够去除核心对象中的判决和复杂的功能性. class Bank{ protected $info; /* 设置基本信息 @param string $ ...
- Logstash type来标记事件类型,通过type判断
/*************** 根据type判断 input { file { type => "zj_frontend_access" path => [" ...
- Node.js log3:create ejs engine and jade engine
The base condition is ensure that you have installed express. 1.create ejs engine Using windows d ...
- adobe reader安装完成之前被中断,错误代码150210解决方法
adobe reader安装完成之前被中断,错误代码150210解决方法出现这种情况是因为之前安装过adobe reader但是没有卸载删除干净进而导致重新安装时无法安装.为什么卸载不了大多数是因为3 ...
- 【JSP实例】指定用户计数器
不同的用户访问次数是不一样的,因此对于每一个用户的访问次数都要进行统计,以适应需要. 用户登陆的Login.html的源文件: <html> <head> <title& ...
- centos curl web站点监控实践
1,监控给定web站点的状态--站点请求返回代码,下载整个web站点页面文本到-o 指定的文本 curl -o /dev/null -s-silent -w--wirte-out "%{ht ...