CSS盒模型之padding和border
一个盒子的主要属性有五个:width、height、padding、border、margin。
width是“宽度”的意思,CSS中width指的是内容的宽度,而不是盒子的宽度。
height是“高度”的意思,CSS中height指的是内容的高度,而不是盒子的高度。
padding是“内边距”的意思,值不能为负。
border是“边框”。
margin是“外边距”。
1、padding
padding的区域默认透明,加有背景颜色,就显示背景颜色。css2.1前提下,背景颜色一定和内容区域相同。即,background-color将填充所有boder以内的区域。
padding有4个方向的,top上、right右、bottom下、left左。表示方法有两种:
(1)小属性:
padding-top: 30px; padding-right: 20px; padding-bottom: 40px; padding-left: 60px; 快捷键就是pdt、pdr、pdb、pdl 然后按tab。 |
(2)综合属性:
如果写了4个值:
padding:30px 20px 40px 60px; 空格隔开分别表示“上、右、下、左”的内边距。 |
如果只写3个值:
padding: 20px 30px 40px; 等价于: padding: 20px 30px 40px 30px; |
如果只写2个值:
padding: 20px 30px; 等价于:
padding: 20px 30px 20px 30px;
要懂得,用小属性层叠大属性:
padding: 20px; padding-left: 30px; 等价于: padding: 20px 20px 20px 30px; |
padding: 20px 10px 30px; padding-right: 40px; 等价于: padding: 20px 40px 30px 10px; padding-left: 10px; padding-right: 20px; padding:40px 50px 60px; padding-bottom: 30px; 等价于: padding: 40px 50px 30px 50px;
padding-left:10px;和padding-right:20px; 没用,因为后面的padding大属性,层叠掉了他们。 |
2、border
就是边框。边框有三要素:粗细、线型、颜色。颜色不写,默认黑色。另两个属性不写,要命了,显示不出来边框。
border: 1px dashed red;
所有的线型:
常用的线型:solid、dashed、dotted
border是一个大综合属性,
border:2px solid red; |
就是把4个边框,都设置为2px宽度、实线、red颜色。
按3要素拆分为:border-width、border-style、border-color
border-width:2px; → 边框宽度 border-style:solid; → 线型 border-color:red; → 颜色 |
如果某一个小要素后面是空格隔开的多个值,那么就是上右下左的顺序:
border-width:10px 20px; border-style:solid dashed dotted; border-color:red green blue yellow; |