css案例学习之父子块的margin

时间：2022-09-22 10:07:51

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>

css案例学习之父子块的margin

两边没有了距离

<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>

说明：子元素只能在父元素允许的空间中活动。默认情况下会自动填满父元素。

css案例学习之父子块的margin

撑破了

代码：

<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时，撑破了父元素。

css案例学习之父子块的margin

代码：

<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的更多相关文章

  1. css案例学习之table tr th td ul li实现日历

    效果 代码 <html> <head> <title>Calendar</title> <style> <!-- .month { b ...

  2. css案例学习之float浮动

    代码: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  3. css案例学习之盒子模型

    定义:每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置:里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子 ...

  4. CSS 案例学习

    1.样式 display:inline-block;可改变a标签,合其可定义宽高 2.a:hover表示鼠标经过 3.background:url(110.png) bottom 表示:给链接一个图片 ...

  5. css案例学习之用thead、tbody、tfoot实现漂亮的table布局

    首先说说thead.tbody.tfoot <thead> <tbody> <tfoot> 无论前后顺序如何改变, <thead> 内的元素总是在表的最 ...

  6. css案例学习之ul li dl dt dd实现二级菜单

    效果 代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  7. css案例学习之通过relative与absolute实现带说明信息的菜单

    效果如下 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  8. css案例学习之div a实现立体菜单

    效果 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  9. css案例学习之双斜角横线菜单

    效果 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

随机推荐

  1. Node&period;js 爬虫初探

    前言 在学习慕课网视频和Cnode新手入门接触到爬虫,说是爬虫初探,其实并没有用到爬虫相关第三方类库,主要用了node.js基础模块http.网页分析工具cherrio. 使用http直接获取url路 ...

  2. machine learning 笔记 normal equation

    theta=(Xt*X)^-1 Xt*y x is feature matrix y is expectation

  3. Uva674 完全背包求方案数

    记忆化搜索.注意输入n的位置,否则Tle. dp[i][j]表示用前j种硬币组成i分钱时的种类数 那么状态转移方程是:dp[i][j]+=DP(i-k*v[j],j-1) #include<io ...

  4. Linux命令（2）- mv

    mv 功能:可以用来移动文件或者将文件改名. 格式:mv [选项] 源文件或目录 目标文件或目录 说明:mv命令将文件重命名或将其移至一个新的目录中.第二个参数类型是文件时,mv命令完成文件重命名,此 ...

  5. mac&colon;ssh登陆总是需要输入钥匙串密码解决

    方法1: finder -> 左上角:前往->按住option建->多出一个资源->KeyChains->第一个文件夹(删除掉次文件夹) 然后重启即可 方法2: ssh- ...

  6. Python-memcached的基本使用 - Flynewton成长点滴 - 开源中国社区

    Python-memcached的基本使用 - Flynewton成长点滴 - 开源中国社区 Python-memcached的基本使用 发表于3年前(2010-12-04 00:02)   阅读(9 ...

  7. Cocos2d 使用控制台打印的方法

    1.打开当前项目的win32解决方案. 2.在解决方案管理器的win32文件夹下打开main.cpp 3.增加以下代码: #define USE_WIN32_CONSOLE //以下加到入口函数 #i ...

  8. eclipse-ee修改字体大小和配置Tomcat服务器

    参考博客:http://blog.csdn.net/lpftobetheone/article/details/17783791 一.EclipseEE背景色和字体的修改 1.Eclipse背景颜色修 ...

  9. 刷机无法连接4g

    只显示2g,gsm only 无法修改,本人刷cm13和lineageOs都遇到过这样的情况,可能与手机有关xt1570(moto x style),特在此分享,希望有用 1.首先在设置中将sim卡网 ...

  10. 如何解决failed to push some refs to git

    $ git push -u origin master To git@github.com:yangchao0718/cocos2d.git ! [rejected]        master -& ...

相关文章