合肥Web培训
达内合肥web培训中心

0551-64632511

热门课程

浅析CSS盒模型基础知识

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

合肥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前端培训带给你专业web前端知识

合肥Web培训学校对网站前端性能做相应的优化

选择城市和中心
贵州省

广西省

海南省

台湾