登录    关于
马育民老师的博客

马育民的博客

QQ:65242847

CSS教程:盒子模型

类比

为了便于理解、记忆,看下图:

盒子模型

盒子模型包括:

  • margin(外边距) - 清除边框外的区域,外边距是透明的。
  • border(边框) - 围绕在内边距和内容外的边框。
  • padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • content(内容) - 盒子的内容,显示文本和图像。

边框

设置方式一

div{
    border:2px  solid  red;
}
边框样式有:
  • solid(实线)
  • dashed(虚线)
  • dotted(点线)
边框颜色

可设置为十六进制颜色,如:

border-color:#888;

注意: 前面有 #

边框宽度
数字+px(象素)

设置方式二

单独设置某个边框

div{
    border-top:1px  solid blue;
    border-right:2px  solid green;
    border-bottom:3px solid red;
    border-left:4px  solid gray;
}

margin 外边距

元素与其它元素之间的距离

设置外边距方式一:

如果上、右、下、左的外边距相同,写法如下:

div{
    margin:10px;
}

设置外边距方式二:

如果上、右、下、左的外边距不同,写法如下:

div{
    margin:20px 10px 15px 30px;/*顺序:上、右、下、左*/
}

或者

div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

内边距

元素内容与边框之间的距离

设置方式一:

如果上、右、下、左的填充都相同:

div{
    padding:20px;
}

设置方式二:

如果上、右、下、左的填充都不同:

div{
    padding:20px 10px 15px 30px;/*顺序:上、右、下、左(顺时针)*/
}

或者

div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}

宽度 和 高度

设置内容的宽度、高度

div {
    width: 300px;
    height: 100px;
}

实际宽度

元素实际宽度(盒子的宽度)=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距

元素实际高度(盒子的高度)=上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距


原文出处:https://malaoshi.top/show_1IX1GOYgpDy8.html