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 ...
随机推荐
- a标签的click事件问题
easy知识点, a标签的click事件和href共存会在执行click事件后触发href里面的链接,如果把href设为空字符串:href="",则会使用当前页面的url作为跳转链 ...
- #pragma 预处理指令
Linux C 编程一站式学习 #pragma 预处理指示供编译器实现一些非标准的特性,C 标准没有规定 #pragma 后面应该写什么以及起什么作用,由编译器自己规定.有的编译器用 #pragma ...
- Qt5-MSVC2012-qDebug中文乱码解决方法
1.首先看代码: int main(int argc, char *argv[]) { QApplication a(argc, argv); MainWindow w; w.show(); qDeb ...
- VC++学习之一
对于编程语言,我一直认为它只是一种工具,就像锤子,斧头一样,每种语言都用自己比较适用的地方,用的时候拿来就可以了.这种思想让我对语言没有做过很仔细的学习,虽然频繁使用过C,C++,java,C#,De ...
- codec ruby和json格式输出
zjtest7-frontend:/usr/local/logstash-2.3.4/config# cat geoip.conf input {stdin {} } filter { geoip { ...
- 关于Makefile.am中与Build相关的变量设置 AM_CPPFLAGS
http://tonybai.com/2010/10/26/about-variables-related-to-building-in-makefile-am/ 关于Makefile.am中与Bui ...
- Android Studio Build选项的功能
再开发过程中出现了如下错误: 无论如何clean,或者删除项目中build文件夹,Rebuild Project还是报错. 解决方案:Make Project 后出现有代码报错.修复代码问题,运行项目 ...
- H264 编码详解
H264 编码详解(收集转载) (1) x264_param_default( x264_param_t *param ) 作用: 对编码器进行参数设定 cqm:量化表相关信息 csp: ...
- scanf与printf用法详解
一.scanf家族 1.scanf家族的原型 int scanf(char const *format,...); int fscanf(FILE *stream,char const *format ...
- 最基本MySQL命令及vi命令
1.MySQL基本命令操作 Mysql的所有命令末尾都需要以分号结束,一条命令可以分成多行书写. 连接数据库:mysql –u root –p: 查看所有数据库:show databases; 创建数 ...