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

    css内边框如何理解

    小妮浅浅小妮浅浅2021-08-13 09:31:31原创2522

    说明

    1、内边框是用box-sizing属性设置的。box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。

    2、通过将box-sizing设置为border-box。浏览器呈现出带有指定宽度和高度的框。

    并且会把边框和内边距放入框中。

    语法

    box-sizing: content-box|border-box|inherit;

    属性值

    content-box:这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度(最小/属性)适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外

    border-box:指定宽度和高度(最小/属性)确定元素边框。也就是说,对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

    inherit:指定 box-sizing 属性的值,应该从父元素继承。

    实例

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>爱宠知识</title>
     
    <style>
    *{ margin:0; padding:0;}
    /*大盒子的定义宽,背景图片*/
    .news{
    width:240px;
    border:#009900 solid 1px;
    background:url(images/bg.gif) center;
    /*内边距为上下左右10px撑开盒子更美观*/
    padding:10px;
    /*外边距上下为20px,左右居中*/
    margin:20px auto;
      }
        /*字体颜色大小*/
    .news h1{
    font-family:黑体;
    color:#FFF;
    font-size:20px;
    /*字体左边的边框设置*/
    border-left:#c9e143 solid 4px;
    /*距离边框的内边距*/
    padding-left:5px;
     }
     
    .news ul{
    /*白色底部*/
    background:#FFF;
    /*外边框上部为5px;*/
     
    margin-top:5px;
    /*内边距上下为0,左右为10px;*/
    padding:0 10px;
     }
    .news li{
    /*li边框颜色,虚线,1px大小*/
    border-bottom:#666 dashed 1px;
    /*取消li前面的无序序号*/
    list-style:none;
    /*li的背景图片不要平铺,靠左显示*/
    background:url(images/tb.gif) no-repeat left;
    /*字体缩进1个位置*/
    text-indent:1em;
     }
    .news a{
    /*a标签的颜色,大小,取消下滑线,行高大小*/
    color:#06C;
    font-size:12px;
    text-decoration:none;
    line-height:30px;
     }
    .news a:hover{
    /*鼠标滑过字体的时候出现下划线和颜色*/
    text-decoration:underline;
    color:#F00;
     }
    </style>
    </head>
    <body>
    <!-- 定义一个大盒子 -->
    <div>
    <h1>爱宠知识</h1>
    <ul>
        <li><a href="#">养狗比养猫对健康更有利</a></li>
        <li><a href="#">日本正宗柴犬亮相,你怎么看柴犬</a></li>
        <li><a href="#">狗狗歌曲《新年旺旺》</a></li>
        <li><a href="#">带宠兜风,开车带宠需要注意什么?</a></li>
        <li><a href="#">【爆笑】这狗狗太不给力了</a></li>
        <li><a href="#">狗狗与男童相同着装拍有爱造型照</a></li>
        <li><a href="#">狗狗各个阶段健康大事件</a></li>
        <li><a href="#">调皮宠物狗陷在沙发里的搞笑瞬间</a></li>
        <li><a href="#">为什么每次大小便后,会用脚踢土?</a></li>
     
    </ul>
    </div>
    </body>
    </html>

    以上就是css内边框的理解,希望对大家有所帮助更多css学习指路:css教程

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

    专题推荐:css内边框
    品易云
    上一篇:css自定义属性如何继承 下一篇:CSS如何绘制三角形

    相关文章推荐

    • CSS鼠标跟随的原理• css中svg图片无法显示怎么办?• css点击元素变更颜色的方法• css如何使用scale()方法进行缩放• css line-height属性是什么• css设置行间距的三种方法• CSS中有哪些定位的方式• css中Min()函数如何使用• css max函数调整字体• css clamp()函数是什么• css设置行间距的方法• css外边距margin是什么• css padding内边距的理解• css中Grid模块是什么• css Flex容器如何理解• css Flexbox布局的介绍• css Flex容器属性有哪些• css flex的排列方式• css中flex-basis的使用• css性能优化的解决办法• css中fraction如何使用• css如何实现自定义的属性• css自定义属性如何继承

    全部评论我要评论

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

  • 取消发布评论
  • 

    Python学习网