盒模型

作者: f6d8ee519880 | 来源:发表于2018-11-20 20:02 被阅读0次

    css盒模型

    • 设置边框
    border-color:red;    /* 设置顶部边框颜色为红色 */  
    border-width:10px;   /* 设置顶部边框粗细为10px */   
    border-style:solid;  /* 设置顶部边框的线性为实线,常用的有:solid(实线)  
      dashed(虚线)  dotted(点线); */
    可以总结为 border:10px solid red;
    
    • 设置内间距
    padding-top:20px;     /* 设置顶部内间距20px */ 
    padding-left:30px;     /* 设置左边内间距30px */ 
    padding-right:40px;    /* 设置右边内间距40px */ 
    padding-bottom:50px;   /* 设置底部内间距50px */
    上面的顺序是顺时针,依次是上,右,下,左
    也可以为padding:20px 40px 50px 30px;
    

    3、css元素溢出

    • overflow的设置项
    1、visible 默认值。内容不会被修剪,会呈现在元素框之外。
    2、hidden 内容会被修剪,并且其余内容是不可见的,此属性还有清除浮动、清除margin-top塌陷的功能。
    3、scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
    4、auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
    5、inherit 规定应该从父元素继承 overflow 属性的值。 
    

    相关文章

      网友评论

          本文标题:盒模型

          本文链接:https://www.haomeiwen.com/subject/rsxfqqtx.html