2021.7.16css盒子

一,学习目标

   01-背景
   02-盒模型

二,背景,
   1.背景颜色  background-color 
   2.背景图片  background-image:   url('相对路径')
   3.背景平铺  background-repeat   no-repeat 
   4.背景位置  background-position: 值1 值2 值: 方位   left  right  center 
                                   值1 代表水平方向 x轴
                                   值2 代表垂直方向 y轴

   精灵图(雪碧图) :
      做法: 把页面上需要小图标,放在一张大图上,在使用的时候,调整背景图片的位置,从而,减少
            下载请求.
      好处: 减少了请求,提高页面的性能

三,盒模型
   1.概念: 把元素在页面上的大小位置,用盒子来模拟, 这种思维模式 成为盒模型

   2.盒模型的几大要素
      1.内容大小,  width height
      2.内填充(内边距)    padding
      3.边框              border
      4.外边距            margin
   3.盒模型宽高
      width   设置宽
      height  设置高
      min-width  设置最小宽度, 通常配合 百分比的宽度  例子: width: 10%;  min-width: 100px;
      min-height 设置最小高度  通常配合 百分比的高度  例子: height: 10%;  min-height: 100px;
      max-width  设置最大宽度  宽度不能大于这个值  
      max-height  设置最大高度  高度不能大于这个值  
   4. 内边距padding (盒子边缘与内容之间的填充,距离)
        注意点: padding  影响内容
         上: padding-top
         右: padding-right
         下: padding-bottom
         左: padding-left

         复合写法,值得个数
                1.1个值, 设置 (上下左右)        上下左右都相同
                2.2个值, 设置 (上下)   (左右)   上下相同   左右相同
                3.3个值, 设置 (上) (左右)  (下)  左右相同
                4.4个值, 设置 (上) (右)  (下) (左)  顺时针的顺序 

   5.外边距( 与其他盒子之间距离 ,--你不要过来 )
      注意点: margin  影响内容
         上: margin-top
         右: margin-right
         下: margin-bottom
         左: margin-left

         复合写法,值得个数
                1.1个值, 设置 (上下左右)        上下左右都相同
                2.2个值, 设置 (上下)   (左右)   上下相同   左右相同
                3.3个值, 设置 (上) (左右)  (下)  左右相同
                4.4个值, 设置 (上) (右)  (下) (左)  顺时针的顺序 
   场景: 内边距padding 通常用在什么情况   -padding挤内容, 如果够不着,就挤不到
         外边距margin  用来盒子之间的距离

   6. 边框颜色： border-color
      边框风格： border-style
      边框宽度： border-width
      复合写法： 推荐   边框宽度 风格样式  颜色