当前位置:首页 » php学习笔记 » css-内外边距margin,padding的应用

css-内外边距margin,padding的应用

原创 stpevenchow 12°c 2019年10月09日 23:46 php学习笔记 0条评论
  移步手机端

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .div1{
            width: 400px;
            height: 400px;
            border: 1px solid red;
            background: gray;
            padding-top: 200px;
        }
        .div2{
            width: 300px;
            /* height: 300px;
            之前是300px的占位这里要减去padding-top的数值 */
            height: 250px;
            border: 1px solid blue;
            padding-top: 50px;
            /* 父级块元素上的内边距实现
            注意:在父级使用padding-top时多加上的占位需要在高度上减去相应的数值*/
        }
        .div2>span{
            border: 1px solid pink;
            /* padding-top: 50px; */
            /* 内联元素不支持垂直方向的外边距,无执行效果 */
        }
        .div3{
            border: 1px solid green;
            width: 340px;
            height: 370px;
            font-size: 16px;
            text-indent: 2em;
            padding-top: 30px;
            padding-left: 30px;
            padding-right:     30px;        

        }
        .div4{
            width: 400px;
            background: gray;
            height: 300px;
            padding-top: 100px;
            /* 只能用父级上的内边距效果实现 */
        }
        .div5{
            /* 会产生bug
            margin-top: 100px; */
        }
    </style>
</head>
<body>
    <!-- 内边距 padding
    边框线之内,到内容得占位
    会改变背景以及边框线得显示效果
     -->
    <!-- 1、改变边框线以及背景的显示效果     -->
    <div class="div1">北京</div>
    <br>
    <!-- 2、应用
    情况1,外边距无效时,可以使用内边距
    如果需要span产生上间距效果,使用span的上外边距无法实现,只能使用父级元素的内边距,注意内边距会改变边框线以及背景颜色的显示效果,必须在设定的宽高基础之上,减去相应的数值
    -->
    <div class="div2">
        <span>上海</span>
    </div>
    <!-- 情况2、实现四周的内边距 -->
    <div class="div3">
        学习代码就是要不断学,不断敲,不断练习,孰能生巧
    </div>
    <!-- 情况3,解决外边距bug
    子级第一个标签,有上外边距,不会反向继承给父级元素,并且会多层传递,直至最外层父级元素,来执行margin-top效果
     -->
    <div class="div4">
        <div class="div5">重庆</div>
    </div>
</body>
</html>

欢迎阅读本文,如果本文对您有所帮助,记得收藏/转发☺

本文链接:http://stpeven.com/post/131.html

版权声明:本文为原创文章,版权归 stpevenchow 所有,欢迎分享本文,转载请保留出处!

本文标签:

三人行,必有我师

评论(0)

发表评论:


【顶】 【踩】 【好】 【懵】 【赞】 【表情】

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

推荐阅读
10月14日

css-简单的调查表单制作

发布 : | 分类 : php学习笔记 | 评论 : 0人 | 浏览 : 7次
css-简单的调查表单制作

     拿到种类型的表单过后,我们首先要分析,这个表单大致的要涉及到html哪些标签属性,从表面上来看,这个表格大概是由3个部分组成,主题,标题,内容,把这3个确定好了过后,后面就是直接调用css样式了。下面直接放出代码    <!DOCTYPE html><html><head>    <meta charset="utf...

标签 :