css属性与盒子大小

• 常用属性
  • background-color 设置背景颜色

    background-color: #F4F4F4;
    

  • line-height 设置文字在元素中垂直居中,将值设置为height的值

    height:24px;
    line-height:24px;
    

  • font-size 设置文字大小

    font-size:14px;
    

  • color 设置文字颜色

    color:red;
    

  • text-decoration: none; 设置文字下划线不显示
• 盒子大小
  默认情况下盒子的可见大小由内容区、内边距、边框构成。
  box-sizing 可以设置盒子的大小计算方式
  可选值：
  • content-box
    默认值。width和height设置的大小只是内容区，盒子的可见大小还得加个内边距和边框。
  • border-box
    盒子大小可见大小由width和height设置,它里面包含边框、内边距、内容区。
• outline
  与边框相似，用来显示元素的轮廓线。只是它不会改变页面的布局，通常用于鼠标移入元素时显示。

  outline:solid 10px red;
  

• boxshaow
  用来设置元素的阴影。设置阴影不会改变页面的布局
  参数一表示水平偏移。正数向右移动，负数向左移动。
  参数二表示垂直偏移。正数向下移动，负数向左移动。
  参数三表示模糊（羽化）程度。只能为正值，数值越大效果越大（可选）
  参数四设置阴影的颜色。

  box-shadow: 10px 10px 30px rgba(0, 0, 0, .3);
  

• border-radius
  由于css元素是一种盒子模型，所以4角是方的。
  可以通过border-radius属性设置圆的半径。使方角变成圆角
  还可以设置单个角的圆角状态。
  可以设置4个角的值，设置的位置为左上角、右上角、右下角、左下角
  当值相同时，可以只写一个

  border-radius: 10px 20px 30px 40px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px 20px;
  

  一个角可以设置两个值：水平与垂直的像素
  当一个角中水平与垂直的值一样时，圆角为正圆，当值不同时圆角为椭圆