当前位置:首页 » php学习笔记 » css-盒子模型

css-盒子模型

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒子模型</title>
    <style type="text/css">
        .span1{
            border: 1px solid pink;
            margin-right: 100px;
            /* span阿拉善的右边外边距的物理占位 */
        }
        .span2{
            border: 1px solid red;
        }
        .span3{
            margin-left: 100px;
            border: 1px solid blue;
        }
        .div1{
            border: 1px solid red;
            /* margin-bottom: 50px; */
        }
        .div2{
            border: 1px solid green;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <!-- 定义一个标签所占的物理空间的大小 -->
    <!-- 物理大小
        外边距---margin
        border先之外的占位
        边框线---border
        设定的border线的大小
        内边距---padding
        border线之内到内容的占位
        内容--content
                    width,height决定
                    内联元素是由内容来决定
        
        实际显示效果,可以改变标签以及标签内容的位置 -->
        <span class="span1">阿拉善</span><span class="span2">是什么玩意儿</span>
        <br>
        <!-- 显示效果好像是span是什么玩意儿的标签位置有所改变,其根本原因是span阿拉善改变了物理占位 -->
        <span class="span2">阿拉善</span><span class="span3">是什么玩意儿</span>
        <br>
        <span class="span2">阿拉善</span><span class="span3">是什么玩意儿</span>
        <!-- 相同的占位间距,可以通过不同的标签实现span阿拉善是mnargin-right是span1,是什么玩意儿margin-left是span3 -->
        <!-- 同理可以实现外边距得上下,内联元素不支持垂直方向外边距得物理空间占位 -->
        <div class="div1">北京</div>
        <div class="div2">上海</div>
        <div class="div1">北京</div>
        <div class="div2">上海</div>
        <div class="div1">北京</div>
</body>                
</html>

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

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

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

本文标签:

三人行,必有我师

评论(0)

发表评论:


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

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

推荐阅读
10月14日

css-简单的调查表单制作

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

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

标签 :