css基础 嵌套的块元素设置外边距

礼悟:
     公恒学思合行悟,尊师重道存感恩。叶见寻根三返一,江河湖海同一体。
          虚怀若谷良心主,愿行无悔给最苦。读书锻炼养身心,诚劝且行且珍惜。


               ide:visual studio 2017  
            browser:Chrome
                     os:win7

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="author" content="https://www.cnblogs.com/jizuiku"/>
    <title></title>
    <style type="text/css">

        .father {
            width:200px;
            height:200px;
            background-color:crimson;
            margin-top:50px;
        }

        .son {
            width:100px;
            height:100px;
            background-color:rebeccapurple;
            margin-top:40px;
        }

    </style>
</head>
<body>
    <div class="father" style="overflow:hidden;">
        <div class="son">

        </div>
    </div>

    <hr />

    <div class="father" style="border-top:1px solid crimson;">
        <div class="son">

        </div>
    </div>

    <hr />

    <div class="father" style="padding-top:1px;">
        <div class="son">

        </div>
    </div>
</body>
</html>

效果



CSS3优秀,值得学习。
学习资源: www.w3cschool.cn + itcast和itheima视频库 + 清净的心地。
如果您有公开的资源,可以分享给我的话,用您的资源学习也可以。
博文是观看视频后,融入思考写成的。博文好,是老师讲得好。博文坏,是 给最苦 没认真。

原文地址:https://www.cnblogs.com/jizuiku/p/8440850.html

时间: 2025-01-17 15:59:15

css基础 嵌套的块元素设置外边距的相关文章

css 的包含块 、负外边距,字体,文本行高

一.包含块 目的:确定元素的位置和相对大小(%) 1.正常文档流元素和浮动元素 ---- 父元素的 content-box 2.绝对定位元素 ---- 父元素的 padding-box 3.固定定位元素 ---- 视口 二.负外边距 document.documentElement.clientWidth; 视口宽度 window.onresize 监控视口改变 三.字体 字体简写: 当 line-height 书写在 font 属性上 ,会覆盖 line-height 的值 字体大小: 默认是

html常见的块元素和行内元素(特别注意个别块元素不能嵌套其他块元素)

html中常见的块元素:div.p.h1-h6.ul.ol.li.hr.table.pre等 块级元素新开启一行即使是设置了width属性也是独占一行(可设置float浮动属性调整布局).尽可能撑满父级元素的宽度,可以设置width和height属性:table元素浏览器默认的display属性为table. html中常见的行内元素:span.img.a.label.input.select.u.strong等 行内元素特性是相邻的行内元素不换行,宽度即为内容的宽度.不可以设置width和he

css基础 display:inline 块级标签-&gt;行内标签 简单示例

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

css基础 使用div块清除无序列表ul,li中的左右浮动的简单示例 clear:both

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

css之去除html标签默认的外边距margin和内边距padding,通用工具类 base.css

@charset "utf-8"; /*! * @名称:base.css * @功能:1.重设浏览器默认样式 * 2.设置通用原子类 */ /* 防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体 */ html { background:white; color:black; } /* 内外边距通常让各个浏览器样式的表现位置不同 */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,le

css盒子模型、边框border、外边距margin、填充padding、轮廓outline

盒子模型 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清除边框外的区域,外边距是透明的. Border(边框):围绕在内边距和外边距的边框. Padding(内边距):清除内容周围的区域,内边距是透明的. Content(内容):盒子的内容,显示文本和图像. 例如下面一个例子 <!DOCTYPE html> <html> ······ <style> div { background-color: lightgrey; width: 300px;

样式初始化+元素类型+外边距合并

浏览器默认给边距,去除浏览器默认样式 <!doctype html><html>    <head>        <title>样式初始化</title>        <style>            /* *通配符选择器,选择页面中所有元素,内外边距都设为0*/           *{margin:0px;padding:0;}            /* 多元素选择器,用”,“隔开,能够节省性能*/          

CSS基础学习四:元素选择器

在上一篇的博客中我们已经熟悉CSS语法,对于CSS代码格式也有了一些认识.下面我就来说一下CSS代码式: 选择器名称 { 属性名:属性值:属性名:属性值:......} 属性与属性之间用分号隔开:属性与属性值直接使用冒号连接:如果一个属性有多个属性值的话,那么多个属性值用空格隔开. 上述提到了我这一篇博客所要说的主题,就是选择器.选择器就是指定CSS语法要作用的标签,那个标签的名称 就是选择器. 基本的选择器可分为三种: a)html标签名选择器:使用的是html的标签名,又叫元素选择器. b)

【css基础】div父元素根据子元素高度自适应高度

两种情况(无特殊说明子元素都是指代父元素的第一级子元素) 第一种:若子元素没有带有float元素的元素,对于高度是自适应的没有问题. 第二种:若子元素全是带有float属性的元素,这时候我们会发现父元素塌陷,高度为0,因为float浮动元素脱离了正常的文档流,父元素相当于没有了这两个儿子! 解决这个问题的根源就是清除浮动: 1 , 给父节点增加样式overflow:hidden或者overflow:auto 2 , 在子元素中的最后一个添加一个兄弟节点,当然该节点应该是一个空节点.你可以用div