盒子模型

盒子模型

1：外边距

　　属性:margin   （margin-top  margin-bottom margin-left margin-right）

　　取值：数字+px;

　　margin:x y;       margin取两个值的时候x代表的是上下 y代表的是左右

　　margin：x y z m;  取四个值的时候   上右左下的顺序

　　左右设置为auto的话  居中显示

　　有的块元素会存在默认的外边距例如  body  h1~h6  p

　　垂直方向上的外边距合并问题：两个垂直外边距相遇时将会合成一个外边距，最终以较大的值显示

　　继承性问题：给子元素设置margiin-bottom时，默认会被识别成父亲的margin-bottom

　　　　　　　　　　解决方案：1给父亲设置边框  2通过父亲的padding解决

2：内边距

　　1什么是内边距

　　　　内边距时内容和边框之间的空白，内边距会扩大边框所占用的面积

　　2属性

　　　　padding   取值  数字+px

　　　　padding：x y    以两个数字   x代表上下  y代表左右

　　　　padding：x y z m 以四个数字  上右下左

3：背景

　　1背景色

　　background-color       背景颜色会填充到元素的边框，内边距，内容区域01

　　transpartent透明

　　2背景图片

　　属性：background-image：url(“图片路径”)

　　3背景重复

　　默认的图片能铺满整个框（平铺）

　　属性：background-repeat

　　取值：repeat 默认值   repeat-x水平平铺  repeat-y垂直平铺  no-repeat不平铺

　　4背景图片固定

　　属性：background-attacment

　　取值：fixed  固定

　　5背景定位

　　改变背景图片在元素中的位置

　　属性：background-position

　　xy   x代表水平方向 y代表垂直方向

　　center    top  bottom 

3：文本格式化、

　　1、指定字体
   　　　　 font-family：选择字体格式
    　　　　font-family:"microsoft yahei","arial","verdana";
  　  2、字体大小
    　　　　font-size:value;   *****
    
   　　　　 font-size:12px;
  　  3、字体加粗      normal正常    *****
    　　　　font-weight:normal / bold ;  
   　　　　 400 - 900
    　4、字体样式(斜体)   i
    　　　　font-style:normal/italic;
        5、小型大写字母   font-variant字体型状
    　　　　font-variant:normal/small-caps;
        6、字体属性
       　　　font:font-style font-variant font-weight font-size font-family;
    　　　　常用方式：
   　　　　　　 font:font-size font-family;
    　　　　　　font:12px "微软雅黑",arial,verdana;