课程咨询 :0551-64632520

合肥web前端培训

合肥web培训 > 达内新闻 > 浅析CSS盒模型基础知识
  • 浅析CSS盒模型基础知识

    发布:合肥web培训      来源:达内新闻      时间:2016-06-02

  • 合肥web培训专家介绍一下CSS盒模型的基础知识。

    1、盒模型边框

    div{
        border:2px  solid  red;        /*粗细、样式和颜色(边框三个属性)。*/
    }

    上面是缩写,可以分开写

    div{
    border-width:2px;
    border-style:solid;
    border-color:red;
    }

    border-style(边框样式)常见有三种样式:dashed(虚线)dotted(点线)solid(实线)

    可以单独设置盒模型的边框

    div{
    border-top:1px dashed red;    /*上边框*/
    border-bottom:1px solid red;    /*下边框*/
    border-left:1px dotted red;       /*左边框*/
    boder-right:1px solid red;        /*右边框*/
    }

    2、盒模型 宽度和高度

    元素实际宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

    div{
           margin:10px;   /*边界*/
           border:2px;       /*边框*/
           padding:5px;    /*填充*/
           width:200px;     /*宽度*/
         }

    元素内容与边框之间是可以设置距离的,称之为“填充”(padding)。元素与其它元素之间的距离可以使用边界(margin)来设置。padding和margin的区别,padding在边框里,margin在边框外。

    推荐文章

上一篇:简介块元素和内联元素

下一篇:CSS布局模型

最新开班日期  |  更多

WEB零基础周末班

WEB零基础周末班

开班日期:

WEB零基础全日制班

WEB零基础全日制班

开班日期:3-08

WEB前端业余班

WEB前端业余班

开班日期:3-08

WEB前端就业班

WEB前端就业班

开班日期:3-08

  • 地址:合肥市蜀山区肥西路66号汇金大厦21楼
  • 课程培训电话:0551-64632520     全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56