前端---CSS 2

1.背景

• background-color：默认transparent。
• background-image ：便于控制位置。none（默认无），url（绝对或相对路径）。
• background-repeat：repeat（默认平铺），no-repeat（不平铺），repeat-x（横向平铺），repeat-y（纵向平铺）。
• background-position：x y;
  两坐标可使用方位名词（top、center、bottom、left、right）或精确单位（百分数或长度值）。
  ①若两个值都是方位名词，前后顺序无关。若只有一个值，第二个值居中对齐。（获取图片：右键，open in new tab）
  ②若都是精确单位，第一个一定是x，第二个一定是y。若只有一个值，则为x，另一个默认居中对齐。
  ③若是混用，则第一个是x，第二个是y。
• background-attachment：scroll或fixed（固定）。

<style>
        div {
            line-height: 100px;
            height: 100px;
            width: 200px;
            background-color: rgb(124, 6, 124);
            background-image: url(images/img6.jpg);
            background-position: 50px 50px;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
</style>
<div>橙子</div>

• background：transparent url（image.jpg） repeat-x fixed top；（复合写法）

 <style>
        div {
            line-height: 100px;
            height: 100px;
            width: 200px;
            background: rgba(184,134,11,0.6) url(images/img6.jpg) repeat-x fixed top;
        }
</style>
<div>橙子</div>

• background：rgba（0,0,0,0.6）。背景色半透明。
  alpha透明度（取值范围0~1）（0.6的0可省略）

<style>
        div {
            line-height: 100px;
            height: 100px;
            width: 200px;
            background: rgba(138,43,226,0.2);
        }
</style>
<div>橙子</div>

2.三大特性

2.1层叠性（样式冲突的问题）
①就近原则：哪个样式离结构近，执行哪个样式。
②样式不冲突，不会层叠。
2.2继承性
子标签会继承父标签的某些样式（如：文本颜色、字号、text-、font-、line-、color）
恰当使用继承可以简化代码。

<style>
        body {
            color: darkred;
            font-size: larger;
            font-style: italic;
        }
        div {
            color: blue;
        }
</style>
<div>橙子</div>
<span>橙子</span>
<span>草莓</span>
<span>葡萄</span>

特例： 行高继承性

行高表示方式	代码
数字	line-height:30px
文字大小*倍数	font:12px/1.5 Microsoft YaHei

(第二种优势：子元素可以根据自己文字大小自动调整行高)

<style>
        body {
            color: darkred;
            font: italic 50px/1.5 'Courier New', Courier, monospace;
        }
        div {
            color: blue;
            font-size: 20px;
        }
</style>
<div>橙子</div>
<span>橙子</span>
<span>草莓</span>
<span>葡萄</span>

2.3优先级

选择器	权重
继承 或 通配符	0000
元素选择器	0001
类选择器 或 伪类	0010
id选择器	0100
行内样式	1000
！important	无穷大

①权重由四种数字组成，没有进位。
②等级判断由左向右。
③继承的权重为0。
例：div ul li：0,0,0,3
例：.nav ul：0,0,1,1
例：a:hover：0,0,1,1

3.盒子模型

3.1边框（border）

• border-width：边框粗细。单位px。
• border-style：边框样式。实线solid，虚线dashed，点线dotted。
• border-color：边框颜色。
  可简写，无顺序。
• 分开写法：border-top，border-bottom，border-left，border-right。

<style>
        div {
            color: blue;
            font-size: 20px;
            border: 20px solid #637;
            border-top: 10px solid rgb(212, 18, 96);
        }
</style>
<div>橙子</div>

• 边框会影响盒子实际大小。
• border-collapse：浏览器绘制表格边框的方式。border-collapse:collapse;表示相邻边框合并在一起。

<style>
        table,td {
            border: #637 10px solid;
            border-collapse: collapse;
        }
</style>
     <table width="200" border="1" cellspacing="1" cellpadding="1">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>

3.2外边距（margin）

• 盒子与盒子之间的距离。
• margin简写代表的意义与padding一致。
• 应用：块级盒子水平居中。
  ①盒子被指定了宽度。
  ②盒子左右外边距为auto。

table {
          margin: 0 auto;
        }

• 行内元素、行内块元素水平居中：给父元素添加text-align:center;。

<style>
      body {
        text-align: center;
      }
      span {
        padding: 10px;
      }
</style>
<span>设为首页</span>
    <span>手机新浪网</span>
    <span>微博</span>
    <span>点这里</span>

• 嵌套块元素垂直外边距塌陷：父元素、子元素都有外边距，父元素会塌陷较大的外边距值。
  解决方法：为父元素
  ①定义上边框。
  ②定义上内边距。
  ③添加overflow:hidden。

• 清除内外边距：因为网页元素自带默认内外边距，所以在布局前，先要清除网页元素内外边距。
  *{
  padding:0;
  margin:0;
  }
  行内元素尽量只设置左右内外边距。
  3.3内边距（padding）

• 边框与内容之间的距离。

• padding属性（简写）：
  5px，上下左右都是5。
  5px 10px，上下5左右10。
  5px 10px 15px，上5左右10下15。
  5px 10px 15px 20px，上5右10下15左20。

• 内边距也会撑大盒子。

• 可以利用padding做导航栏。

<style>
        hr {
          background-color: #8a2be2;
          color: #8a2be2;
          height: 5px;
        }
        span {
          display: inline-block;
          padding: 10px;
        }
</style>
<hr>
    <span>设为首页</span>
    <span>手机新浪网</span>
    <span>微博</span>
    <span>点这里</span>

• 若盒子本身没有指定width/height，padding不会撑开盒子。

3.4圆角边框

• 语法：border-radius: 5px;
• 圆形：border-radius: 50%;
• 圆角矩形：设置为高度的一半。
• 简写属性：左上角（border-top-left-radius）、右上角、右下角、左下角。

3.5盒子阴影

• 语法：box-shadow:h-shadow v-shadow blur spread color inset;（h-shadow、v-shadow是必需的）分别是水平阴影、垂直阴影、模糊距离、

3.6文字阴影
①
②
③
④
⑤
⑥