盒子模型:是每个标签都有的模型,具体是外边距、边框、内边距、内容所组成的思维模型;
上图外边 红色的那一圈就是外边距,属性名为margin,可以理解为两个元素之间的距离,当被嵌套时,是相较于父元素的边框,父元素没有边框,就是相较于body区域,没有被嵌套时,是相较body区域;外边距能设置大小不能设置颜色,图只是方便解释才加了颜色
外边距的属性值,都是数字,单位为px:
margin-left:跟左边元素的距离 格式例:10px;(距离上面元素10像素),当值为正数时,元素往右走,负数往左走,因为元素的外边距不会影响其他元素位置,所以只能自己移动调位置
margin-right:跟右边元素的距离,正数往左走,负数往右走。
margin-top:跟上边元素的距离,正数往下走,负数往上走。
margin-bottom:跟下面元素的距离,正数往上走,负数往下走。
简约写法:margin:上面距离 空格 右边距离 空格 下面距离 空格 左边距离;
当你就写margin:一个值;默认上下左右的距离都是这个值
居中:margin:0 空格auto;这样写就可以使元素x轴居中,0只能写在前面,margin:auto 0;这样写是不合法的
蓝色的那一圈是边框,属性名为border, 边框可设置边框线的粗细还有颜色,边框线的长短由你的设置是元素大小决定,如果设置了内边距,内边距会把边框撑大,我们只能设置边框的粗细
border-top:上边框 格式例:10px (设置边框粗细) solid(设置边框是实线)black(设置边框颜色);
border-bottom:下边框
border-left:左边框
border-right:右边框
简约写法:border:边框粗细 空格 solid 空格 边框颜色;当边框颜色设置为transparent时,边框会透明
绿色的是内边距:属性名为padding,可设置大小不能设置颜色,内边距就是你的内容比如文本或图片距离包裹它的元素的边框距离,不知道边框在哪,你可以设置边框看一下,但是内边距会撑大包裹它的元素
padding-top:元素距离上边框的距离,格式例:10px;
paddin-bottom:元素距离下边框的距离
padding-left:元素距离左边框的距离
padding-right:元素距离右边框的距离
简约写法:padding:上 空格 右 空格 下 空格左;
padding:一个值;这样就是默认上下左右的距离都是一样的