• 技术文章 >Web开发 >css教程

    css内联样式的盒子模型

    小妮浅浅小妮浅浅2021-08-30 09:43:50转载3127

    1、内联样式是不能设置width和height的。

    2、它可以设置水平内边距,会影响页面布局,会将水平方向其他元素挤开。

    但是垂直内边距则不会影响页面布局,它是选择覆盖其他元素。

    3、它可以设置边框,垂直边框不会影响页面布局。

    但是水平边框会(可以理解为跟水平内边距一样)

    同时,内联元素支持水平方向的外边距,相邻元素外边距不会重叠而是求和。

    内联元素不支持垂直外边框。

    实例

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    span{
    background-color: #bfa;
    }
    .box1{
    width: 100px;
    height: 100px;
    background-color: red;
    }
    .s1{
    /*
      内容区、内边距 、边框 、外边距
     * */
    /*
     * 内联元素不能设置width和height
     */
    /*width: 200px;
    height: 200px;*/
    /*
     * 设置水平内边距,内联元素可以设置水平方向的内边距
     */
    padding-left: 100px ;
    padding-right: 100px ;
    /*
     * 垂直方向内边距,内联元素可以设置垂直方向内边距,但是不会影响页面的布局
     */
    padding-top: 50px;
    padding-bottom: 50px;
    /*
     * 为元素设置边框,
     * 内联元素可以设置边框,但是垂直的边框不会影响到页面的布局
     */
    border: 1px blue solid;
    /*
     * 水平外边距
     * 内联元素支持水平方向的外边距
     */
    /* margin-left:100px ;
    margin-right: 100px; */
    /*
     * 内联元素不支持垂直外边距
     */
    margin-top: 200px;
    margin-bottom: 200px;
    }
    .s2{
    /*
     * 为右边的元素设置一个左外边距
     * 水平方向的相邻外边距不会重叠,而是求和
     */
    /* margin-left: 100px; */
    }
    </style>
    </head>
    <body>
    <span>我是一个span</span>
    <span>我是一个span</span>
    <span>我是一个span</span>
    <span>我是一个span</span>
    <div></div>
    </body>
    </html>

    以上就是css内联样式的盒子模型,希望对大家有所帮助。更多css学习指路:css教程

    本文教程操作环境:windows7系统、css3版,DELL G3电脑。

    专题推荐:css内联样式
    品易云
    上一篇:CSS实现轮播图的方法 下一篇:css标签选择器的使用注意

    相关文章推荐

    • css渐进增强和优雅降级的区别• css渐进增强如何理解• css优雅降级是什么意思• css margin:auto的填充规则• css中box-shadow方法如何使用• css中outline方法的使用• Vue框架在PostCSS中使用sass的方法• CSS实现轮播图的方法

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
  • 

    Python学习网