复习CSS基础之盒模型

盒模型

一个盒子中国主要的属性就5个:width、height、border、margin
width -宽度，css中width指的是内容的宽度，而不是盒子的宽度
height-宽度，css中height指的是内容的高度，而不是盒子的高度
padding-内边距
border-边框
margin-外边距

计算真实占有宽度:
       真实占有宽度 = 左border + 左 padding + width + 右 padding + 右border

padding

             属性:top(上)、right(右)、bottom(下)、left(左)
                     padding-top   padding-right  padding-bottom  padding-left
         快捷键：pdt、pdr、pdb、pdl然后按tab

注意：一些元素。默认带有padding，所以在做站的时候，便于控制，总是喜欢清除这个默认的padding，改为padding:0;
           *{
                margin:0;
                padding:0;
             }

border

    边框。边框有三个要素:粗细、线型、颜色(默认黑色)
    一般常用的是solid、dashed、dotted，solid是黑色实线、dashed是黑色虚线、dotted是以点为虚线

border属性能够被拆开，有两大拆开的方式:
1)按3要素:border-width(边框宽度)、border-style(线型)、border-color(红色)
2)按方向:border-top、border-right、border-bottom、border-left
按3要素拆开：
   border-width：XX px；
   border-style:   XX  ;
   border-color:   XX ;
         等价于border：XX px XX XX;

所以border是由三个小属性综合而成: border-width  border-style  border-color
按方向来拆
    border=border-top、border-right、border-bottom、border-left
               = border-top-width: XXpx; border-top-style: XX;   border-top-color:XX;
                   border-right-width: XXpx; border-right-style: XX;   border-right-color:XX;
                   border-bottom-width: XXpx; border-bottom-style: XX;   border-bottom-color:XX;
                   border-left-width: XXpx; border-left-style: XX;   border-left-color:XX;

margin

           属性:margin-top、margin-right、margin-bottom、margin-left
                   margin:XXpx XXpx XXpx;   
                            上外边距是XXpx   右外边距和左外边距是XXpx  下外边距是XXpx
                   margin:XXpx  XXpx;   
                             上外边距和下外边距是XXpx    右外边距和左外边距是 XXpx
                    margin:XXpx;
                              所有 4 个外边距都是 XXpx
单位：auto
注意：允许使用负值
          该属性可以有1到4个值