css3笔记

1、框模型
   1、什么是框模型
      框：所有元素皆为框
      框模型：(Box Model),也可称之为 "盒子模型",定义了元素处理内容、内边距、边框和外边距的方式。


      元素实际宽度 = 左右外边距 + 左右边框 + 左右内边距 + width;
      元素实际高度 = 上下外边距 + 上下边框 + 上下内边距 + height;
   2、外边距
      围绕在元素边框周围的空白区域就是外边距
      可以表示是该元素与其他元素之间的空间量


      会在元素外创建额外的空白区域，透明的，不允许被其他元素所占据


      1、语法：
         margin:value; /*四个方向外边距*/


单边设置：
margin-top/bottom/left/right : value;


取值：
    单位：
         px 为单位
 % 为单位
 auto ：块级元素，本身做水平居中时，使用 auto
 负值 ：向反方向移动
    margin取值数量:
       margin:value; (四个方向相同)
margin:v1 v2; (v1:上下  v2:左右)
margin:v1 v2 v3;(v1:上 v2:左右 v3:下)
margin:v1 v2 v3 v4;(v1:上 v2:右 v3:下 v4:左)


      2、具备默认外边距的元素
  body
  h1~h6
  p,ul,dl,dd


  如何解决默认外边距？？
  margin:0px;
      3、外边距的问题
         1、外边距合并
   当两个"垂直外边距"相遇时，它们将形成一个外边距，称为外边距合并


   合并后，以外边距大的值为主。
2、子级元素设置外边距的问题
   设置子级元素的上外边距时，默认情况，会显示到父级元素上


   解决方案：
     1、设置父元素边框
     2、通过父元素的上内边距代替子元素的上外边距
    3、内边距
       1、什么是内边距
          内容区域 与 元素框(边框)之间的距离
 注意:这是了内边距之后，会扩大元素框所占据的区域
       2、语法
          padding:value;
 单边设置：
 padding-top/bottom/left/right:value;
 
 取值：
    单位：  
          px 为单位
  % 百分比


  不能取负数 或 auto
    数量：
        padding:value; 四个方向内边距
padding:v1 v2; 上下 左右
padding:v1 v2 v3; 上 左右 下
padding:v1 v2 v3 v4;上 右 下 左
2、背景
   通过 css 样式控制 html元素的背景颜色以及背景图像
   背景色：单一颜色
   背景图片：以图片 或  渐变的方式做背景


   1、背景色
      属性：background-color


      注意：
         1、背景色会填充到元素的内容区域、内边距、边框区域
   2、背景图像
      属性：background-image
      取值：
           默认为  none
  url(图像路径);
          
  background-image:url(图像路径);
   3、背景重复(平铺)
      属性：background-repeat
      取值：
   repeat : 垂直、水平 平铺，默认值
   repeat-x : 水平平铺  
   repeat-y : 垂直平铺
   no-repeat : 不平铺
   4、背景图片尺寸
      属性：background-size
      取值：
            value1  value2 : value1表示宽度  value2 高度
   value1% value2% : 所在元素中的宽和高的占比。
   cover : 覆盖，将背景图像扩大，直到背景图完全覆盖到元素上，则停止
   contain : 包含，将背景图像扩大，使背景图的宽度 或  高度 适应元素位置。
   5、背景图片固定
      让背景图不会随着滚动条而发生改变
      属性：background-attachment
      取值：  
           scroll : 默认值，背景随文档滚动
  fixed : 背景图像固定，不会滚动
   6、背景定位
      改变背景图像在元素中的位置
      属性：background-position
      取值：
            x y :x 水平位置， y垂直位置，元素左上角是 0 0
   x% y% :  ........ , 所在元素的 宽 和 高的占比


   x 位置关键字：left,center,right
   y 位置关键字：top,center,bottom
   7、背景属性
      在一个属性中，声明所有的相关的背景属性值
      属性：background
      取值：color url(图像地址) repeat attachment position;


      background:red;
      


background-image:url(Images/iconlist_1.png);
background-repeat:no-repeat;
background-position:-109px -239px;


background:url(Images/iconlist_1.png) no-repeat -109px -239px;


background:url repeat position;


3、渐变
   1、什么是渐变 
      两种或多种颜色之间的平滑过渡的效果


      任何使用背景图片的地方都可以使用渐变


      渐变的分类:
         1、线性渐变
2、径向渐变
3、重复渐变
   2、渐变语法
      属性：background-image
      取值：
            url()  :  显示背景图
            linear-gradient() : 线性渐变
   radial-gradient() : 径向渐变
   repeating-linear-gradient() : 重复线性渐变
   repeating-radial-gradient() : 重复径向渐变
      
      1、线性渐变
         background-image:linear-gradient(angle,color-point1,color-point2,color-point3 ... );
angle : 角度 或 方向。
       取值：
   to top / (0deg) : 从下向上显示
   to bottom / (180deg) : 从上向下显示
   to left / (270deg) : 从右向左显示
   to right / (90deg) : 从左向右显示
color-point : 颜色点，表示颜色的起始点、中间点以及结束点
        取值：颜色值 位置;
      red  0%


background-image:linear-gradient(to top,red 0%,green 50%,blue 100%);
      2、径向渐变
         radial-gradient([size at position],color-point1,color-point2,....);


size at position : 可以不写的。
  size : 径向的圆的半径
  position ：圆心所在位置，默认为元素的中间位置处
    取值：
         x y  ： 以元素的左上角为 0 0 
 x% y% ：以元素的宽和高的占比设置圆心位置
 top
 left
 bottom
 right
 center
3、重复渐变
  repeating-linear-gradient()
  repeating-radial-gradient()
    3、浏览器兼容性
       大部分浏览器的主流版本 均支持渐变属性


       对于不支持的版本:
       Firefox : 添加前缀 -moz-
       Chrome 和 Safari : 添加前缀 -webkit-
       Opera : 添加前缀 -o-
       IE : 添加前缀 -ms-


       background-image:linear-gradient();
       background-image:-moz-linear-gradient();/*火狐*/
       background-image:-webkit-linear-gradient();/*Chrome Safari*/
       background-image:-o-linear-gradient();/*Opera*/




4、文本格式化
   1、字体属性
      1、指定字体
         font-family:value1,value2;


font-family:"微软雅黑";
font-family:"Microsoft Yahei",Arial;
      2、字体大小
         font-size:value;
      3、字体加粗
         font-weight:normal / bold / value;
value : 400 - 900
      4、字体样式
         倾斜
font-style:normal / italic;
      5、小型大写字母
         font-variant : normal / small-caps;
      6、字体属性
         font:style variant weight size family;
font:bold 12px "微软雅黑";


链接背景色：#005aa0
比洗衣粉好：#FDEDD2
按钮：#f9f9f9 ~ #CCC