width 宽度: 指的是真实内容的宽度,不是盒模型的宽度。
height 高度: 盒子里面内容的高度,不是指盒子的高度。
padding 内边距(盒子里面的留白)。
border 指的是盒子边框的大小。
margin 盒子外边距。(一个盒子和另外一个盒子的关系)
width和height 描述的是真实内容的宽和真实内容的高。
盒子的宽度和真实的占有度不是一回事。
以上图为例:
盒子的内容width:200px height:200px 但真实的宽高却是302*302 ,这是因为还要加上内边距(padding),还有边框(border)大小。
如果要求一个盒子的真实占有像素 公式为 左border+右border+width+左padding+右padding.
如果想保持一个盒子的真实占有不变,那么加width就要减padding(width +2 padding-1),加了padding就要减width。 (padding+1 width-2)
一、关于padding。
padding区域都是有背景颜色的,也就是说backgroud-color将填充所有boder以内的区域!!
padding 是有四个方向的,分别可以描述四个方向的padding。
在css中有两种定义padding的方式,分别是直接用小属性,或者用空格隔开,例如:
padding-left: 100px;
pandding-right: 20px;
padding-top: 30px;
padding-bottom: 40px;
或者用以下方式定义,通过空格分开,上右下左:
padding:30px 20px 40px 100px;
其实有一些html元素标签默认就带有padding,比如ul标签。所以在编写html代码的时,默认都会加一个默认的选择器,把margin和padding都清除。
*{
margin: 0;
padding: 0;
}
二、border边框。
border有三个要素,分别是粗细,线形,颜色。
例:
boder: 10px ridge red;
另外一种写法就是:
border-width: 10px;
border-style: solid;
border-color: red;
按照方向拆分:
border-top:10px solid red;
border-right:10px solid bule;
border-left: 10px solid yellow;
border-bottom: 10px solid green;
甚至可以拆的更详细:
将每个方向的每个元素都拆开。
如果想让边框消失,可以使用border:none 或者boder:0,他们两个作用一样。
如果想让某一个方向的边框消失border-left:none;或者border-left:0;。