HTML+CSS培训教案（十四）

最新推荐文章于 2023-05-20 11:50:03 发布

红壶吃猬队

最新推荐文章于 2023-05-20 11:50:03 发布

阅读量356

点赞数

分类专栏： HTML/CSS HTML+CSS培训教案文章标签： HTML CSS 教程

本文链接：https://blog.csdn.net/chenmiaoqin950606/article/details/92428485

版权

HTML/CSS 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

HTML+CSS培训教案

16 篇文章 1 订阅

订阅专栏

三十二、父子块

代码

<html>
    <head>
        <meta content="text/html;charset=utf-8">
        <title>父子块</title>
        <style>
        div.father{
            background-color:#FFFFFF;
            text-align:center;
            font-family:Arial, Helvetica,sans-serif;
            font-size:12px;
            padding:10px;
            border: 1px solid #000000;
        }
        div.son{
            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>
<html>

知识点

父边框-子内容的距离=父padding+子maigin+子border+子padding

扩展

给div.father添加CSS样式height:30px

答案：父块高度小于子块高度加上margin的值，则出现溢出，把子块挤出去
（在扩展1基础上）给div.father添加CSS样式overflow:hidden

答案：overflow处理溢出方式，值：scroll/hidden
给div.son添加CSS样式margin-bottom:-40px

答案：可通过设置margin为负数的方法实现父子块分离

三十三、兄弟块

代码

<html>
    <head>
        <meta content="text/html;charset=utf-8">
        <title>兄弟块</title>
        <style>
        div{width:40px;height:40px;}
        #div1{margin-bottom:10px;}
        #div2{margin-top:30px;}
        </style>
    </head>
    <body>
        <div id="div1">
        </div>
        <div id="div2">
        </div>
    </body>
<html>

知识点

margin“上下塌”（取最大值）

扩展

给div添加CSS样式float:left

答案：float元素依序浮动，值：left/right
（在扩展1基础上）给#div1添加CSS样式margin-right:30px，给#div2添加CSS样式margin-left:10px

答案：margin“左右加”（两边值相加）

红壶吃猬队

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS培训教案（十四）

三十二、父子块代码<html> <head> <meta content="text/html;charset=utf-8"> <title>父子块</title> <style> div.father{ background-...
复制链接

扫一扫