温故知新之（三）css背景属性、盒子模型、圆角边框和阴影

背景属性

• 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等
• background-color: transparent | red;,设置元素的背景颜色，transparent 为透明
• background-image : none | url(url);,设置元素的背景图像,url 指定使用绝对或相地址指定的背景图像
• background-repeat: repeat| no-repeat| repeat-x| repeat-y;,设置背景图像的平铺
  • repeat 背景图像在纵向和横向上平铺(默认的)
  • no-repeat 背景图像不平铺
  • repeat-x 背景图像在横向上平铺
  • repeat-y 背景图像在纵向平铺
• background-position: x y;,设置图片在背景中的位置
  • length：百分数|由浮点数字和单位标识符组成的长度值
  • position：top| center | bottom |left |center |right 方位名词

    参数是方位名词：1.如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 2.如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
    参数是精准单位：1.如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标 2.如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
    参数是混合单位：如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

• background-attachment : scroll | fixed;,设置背景图像是否固定或者随着页面的其余部分滚动
  • scroll 背景图像是随对象内容滚动
  • fixed 背景图像固定
• background : transparent url(image.jpg) repeat-y fixed top;,复合写法

盒子模型

• 盒子模型的组成：margin、border、padding、content

border 边框

• border-width: 1px;,边框的粗细，一般情况下都用 px
• border-style: solid;, 边框的样式
  • solid 实线边框
  • dashed 虚线边框
  • dotted 点线边框
• border-color: pink;, 边框的颜色
• border: 5px solid pink;,复合写法，没有顺序
• border-top: 5px solid pink;,只指定一边
• border-collapse: collapse;,用于表格，合并相邻的边框

  边框会额外增加盒子的实际大小，因此我们有两种方案解决：1.测量盒子大小的时候，不量边框;2.如果测量的时候包含了边框，则需要 width/height 减去边框宽度

padding 内边距

• 盒子边框与内容之间的距离
• padding-left: 10px;,指定左内边距
• padding : 5px;, 1 个值，代表上下左右都有 5 像素内边距
• padding :5px 10px;, 2 个值，代表上下内边距是 5 像素，左右内边距是 10 像素
• padding: 5px 10px 20px;, 3 个值，代表上内边距 5 像素，左右内边距 10 像素，下内边距 20 像素
• padding :5px 10px 20px 30px;, 4 个值，上是 5 像素，右是 10 像素，下 20 像素，左是 30 像素，顺时针
• padding 影响盒子的情况：
  • 如果盒子设置了宽度和高度，此时设置 padding，会影响盒子大小
  • 如果盒子没有设置宽度和高度，则此时 padding 不会撑开盒子大小

margin 外边距

• 控制盒子和盒子之间的距离
• 用法和 padding 一样
• 通过 margin 设置块级盒子水平居中
  • 盒子需要有宽度
  • margin: 0 auto;或者margin: auto;
• 行内元素或者行内块元素水平居中给其父元素添加 text-align: center 即可

外边距合并

• 相邻块级元素垂直外边距合并
  • 相邻块元素垂直外边距的合并，解决方案是只给一个盒子添加 margin 值
  • 嵌套块元素垂直外边距的塌陷，解决方案有三种：
    • 给父元素定义上边框
    • 直接给父元素设置上内边距
    • 给父元素添加 overflow: hidden

盒子模型分类

标准盒子模型

• 盒子实际内容（content）的width/height=设置的width/height;
• 盒子总宽度/总高度=width/height+padding+border+margin；

怪异盒子模型

• 设置的width/height = 盒子的（content）宽度/高度+内边距padding+边框border
• 盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin

box-sizing指定盒子模型

• box-sizing: content-box; 指定为传统标准盒子模型：width + border + padding
• box-sizing: border-box; 指定为怪异盒子模型，padding 和 border 不会再撑大盒子了

圆角边框

• border-radius: 10px;,设置元素的外边框圆角,参数值可以是数值或百分比的形式
• border-top-left-radius:10px;,设置单个外边框圆角
• 如果是正方形，把数值修改为高度或者宽度的一半即可，或者直接写为 50%，即为一个圆

盒子阴影

• box-shadow:10px 10px 10px -4px rgba(0,0,0,.3);, box-shadow 属性为盒子添加阴影
• box-shadow: h-shadow v-shadow blur spread color inset;
  • h-shadow 必需。水平阴影的位置，允许负值
  • v-shadow 必需。垂直阴影的位置，允许负值
  • blur 可选。模糊距离，即影子的虚实
  • spread 可选，阴影的尺寸，影子的大小
  • color 可选，阴影的颜色。
  • inset 可选，将外部阴影（outset）改为内部阴影

    默认的是外阴影（outset），但是不可以在后面写这个单词，否则导致阴影无效盒子阴影不占用空间，不会影响其他盒子排列

文字阴影

• text-shadow: h-shadow v-shadow blur color;
• h-shadow 必需。水平阴影的位置，允许负值
• v-shadow 必需。垂直阴影的位置，允许负值
• blur 可选。模糊距离
• color 可选，阴影的颜色