目录
1、什么是盒子模型
“CSS盒子模型就是在网页设计中经常用到的一种思维模型,是CSS布局的基石,主要规定了元素是如何显示元素间相互关系。 CSS盒子模型就是在网页设计中经常用到的一种思维模型,是CSS布局的基石,主要规定了元素是如何显示元素间相互关系。定义所有元素都可以有像盒子一样的平面空间和外形。包含内容区、填充、边框和外边距,这就是盒模型。”
2、盒子模型
2.1、边框
边框属于盒子边缘,边框里面属于盒子内部,出了边框是盒子的外部
设置边框必须指定三个样式
大小 样式 颜色
下面介绍一些边框的属性:
1、border-width
使用border-width可以分别指定四个边框的宽度,默认值一般是3px
他可以跟多个值
跟4个值时,分别表示 上 右 下 左
跟3个值时,分别表示 上 左右 下
跟2个值时,分别表示 上下 左右
跟1个值时,分别表示 上下左右
例如:
div { width: 100px; height:100px; background-color: red; /* 设置边框的宽度 */ border-width: 1px; border-top-width:10px ; }
上述代码中,border-top-width:10px ;的意思是设置上边框的宽度
相似的还有:
border-right-width
border-bottom-width
border-left-width
2、border-color
设置边框的颜色 默认值是黑色,和border-width一样,color也提供四个方向的样式,可以分别指定颜色,即:
border-top-color
border-right-color
border-bottom-color
border-left-color
例如:
div{ border-color: red transparent transparent transparent; border-color: red; border-top-color: red; }
3、border-style
设置边框的样式
可选值:
none 默认值,没有边框 solid 实线 double 双线 dashed 虚线 dotted 点状边框 style也可以分别指定四个边的边框样式,规则和width一致, 同时它也提供border-xxx-style四个样式,来分别设置四个边
xxx可表示top、right、left、bottom
例如:
div{ border-style:double; }
5、border
- 边框的简写样式,通过它可以同时设置四个边框的样式,宽度,颜色
- 而且没有任何的顺序要求
- border一指定就是同时指定四个边不能分别指定
border-top border-right border-bottom border-left
可以单独设置四个边的样式,规则和border一样,只不过它只对一个边生效
div{ border-top: 5px green solid; border-right: 5px red solid ; border-bottom: 5px yellow solid; border-left: 5px blue solid; }
2.2内边距
内边距(padding),指的是盒子的内容区与盒子边框之间的距离
一共有四个方向的内边距,可以通过:
- padding-top
- padding-right
- padding-bottom
- padding-left
来设置四个方向的内边距
总结
- 内边距会影响盒子的可见框的大小,元素的背景会延伸到内边距,
- 盒子的大小由内容区、内边距和边框共同决定
2.3外边距
外边距指的是当前盒子与其他盒子之间的距离,他不会影响可见框的大小,而是会影响到盒子的位置。
盒子有四个方向的外边距:
margin-top 上外边距,设置一个正值,元素会向下移动,设置一个负值,元素会向上移动 margin-right 默认情况下设置margin-right不会产生任何效果 margin-bottom 下外边距,设置一个正值,自己不动,其下边的元素会向下移动,挤别人 margin-left 左外边剧,设置一个正值,元素会向右移动,设置一个负值,元素会向左移动 由于页面中的元素都是靠左靠上摆放的,所以当我们设置上和左外边距时,会导致盒子自身的位置发生改变,而如果是设置右和下外边距会改变其他盒子的位置
注:
外边距也可以指定为一个负值,如果外边距设置的是负值,则元素会向反方向移动。
外边距同样可以使用简写属性 margin,可以同时设置四个方向的外边距,规则和padding一样。
#div1{ width: 200px; height: 200px; background-color: red; border: 10px solid orange; padding: 50px; margin-top: 50px; margin-left: 50px; margin-bottom: -50px; margin-right: 500px; } #div2{ margin: 10px 20px 30px 50px; }