本文将在CSS3学习笔记1的基础内容上，记录CSS的更多内容。
涵盖了CSS盒子，CSS浮动，CSS定位，CSS装饰等知识内容。

CSS3盒子模型

CSS盒子-思维导图

A006-1s.jpg

1. CSS盒子模型

盒子其实就是标签；盒子可分为4个部分：
（1）内容区域content-蓝色
（2）内边距区域padding-绿色
（3）边框区域border-黄色
（4）外边距区域margin-橙色

效果如图所示：
A006-1.jpg

1.1 内容content

常见属性有：
width/height(px)
bgc等等一系列的属性值

1
w200+h200+bgc

1.2 边框border

属性名: border
复合属性：线粗 线型 颜色；(可以不分先后顺序)

1
border: 10px solid red;

  • 快捷键：bd + tab
  • 线型：solid/dashed/dotted
  • 只对某个方向显示边框？border-left/right/top/bottom属性
  • 复合属性拆分？border-width/style/color等属性（用不上）

1.2.1 border例子

  • 例子1
    需求：画一个400*400大小的盒子，要求边框线为黑色10px的实线。
    解答：需要注意的是，边框线的粗也算在盒子大小里，需要考虑。
    border会撑大盒子大小！

    1
    2
    3
    4
    5
    6
    div {
        width: 380px;
        height: 380px;
        background-color: green;
        border: 10px solid #000;
    }

  • 例子2
    需求：给定一张png，画一个盒子
    解答：使用PxCook确认测量与色号。

    1
    2
    3
    4
    5
    6
    div{
        width: 280px;
        height: 280px;
        background-color: #ef4123;
        border: 10px solid #00f;
    }

1.2.2 新浪导航例子

这是一个新浪导航栏的案例，涉及了盒子模型。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
    <title>导航栏-盒子案例</title>
    <style>
        .box{
            height: 40px;
            background-color: #fff;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #ededf0;
        }
        .box a {
            /* 后代选择器：选中box类选择器后代中的a标签 */
            width: 80px;
            height: 40px;
            /* background-color: #ededf0; */
            /* 推荐留着，可以看盒子的大小 */
            display: inline-block;
            text-decoration: none;
            text-align: center;
            line-height: 40px;
            /* tac+lh使得文字居中 */
            color: #4c4c4c;
            font-size: 12px;
            /* 字体高度fs */
        }
        .box a:hover {
            background-color: #ededf0;
            color: #ff8400;
        }
    </style>
</head>
<body>
    <!-- 从外到内，从上到下 -->
    <!-- 先尺寸，后格式 -->
    <div class="box">
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
    </div>
</body>

效果图：
A006-1-2-2.jpg

1.3 内边距padding

padding可以用作复合属性。

  1. padding: 1个值—四个方向的内边距都是该值。
  2. padding: 2个值—（上下-左右）
  3. padding: 3个值—（上-左右-下）
  4. padding: 4个值—顺时针（上-右-下-左）

1.3.1 padding例子

需要注意的是padding也会撑大盒子大小！

需求：盒子300*300，背景粉，边框10px实线黑色，上下左右20px内边距。

1
2
3
4
5
6
7
8
div{
    /* 300-2*20-2*10=240px */
    width: 240px;
    height: 240px;
    background-color: pink;
    border: 10px solid #000;
    padding: 20px;
}

1.3.2 内减模式

减法太麻烦了！可以用内减模式哦 — box-sizing: border-box;

1
2
3
4
5
6
7
8
9
div{
    box-sizing: border-box;
    /* 该模式下，wh直接限定了盒子的大小 */
    width: 300px;
    height: 300px;
    background-color: pink;
    border: 10px solid #000;
    padding: 20px;
}

1.3.3 新浪导航-盒子案例padding优化

如果文本内容不是四个字，而是5个字甚至更多？有概率会让a标签过大从而独行显示。是因为宽度属性限定死了，超出就会换行。
如何让宽度自动撑开？
首先，取消width属性，然后加入padding属性。

1
2
3
4
5
...
    /* width: 80px; */
    padding: 0 16px;
    /* 优化撑开 */
...

1.4 外边距margin

写法和padding一模一样，一个里一个外。
故而，略。

1.4.1 margin相关问题

1. 合并现象

对于两个垂直布局的块元素，上下的margin会合并，取最大值。
解决方案：

  • 只给一个设置margin

2. 塌陷现象

对于两个互相嵌套的块元素，子元素的margin-top会让父元素一起往下塌陷。
解决方案：

  • 给父元素设置border-top/padding-top, 避开对子元素用margin-top.
  • 给父元素设定overflow: hidden (推荐)
  • 转换为行内块元素
  • 设置浮动

1.5 清除默认样式

一些标签会自带默认的margin和padding
如何清除？

1
2
3
4
* {
    margin: 0;
    padding: 0;
}

或者也可以用并集选择器。
是一定会用的。

1.6 版心居中

常见的盒子，丢在水平居中位置。

1
2
/* 版心居中 */
margin: 0 auto;

1.7 行内元素的垂直内外边距问题

如果想用margin/padding改变行内标签的位置，垂直方向不会生效。
即：行内标签的margin/padding-top/bottom都不会生效。

解决方案：

  • 使用line-height属性

1.8 盒子案例-网页新闻列表

思路：从外到内，从上到下。考虑宽高，背景，框内外距，内容格式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
    <title>网页新闻案例</title>
    <style>
        /* 首先清除所有标签的默认盒子属性，并切换到内减模式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 用类选择器设定这个div盒子的属性值 */
        /* 盒子宽高；边框线；外边距调节位置；内边距调节内容显示位置 */
        .news{
            width: 500px;
            height: 400px;
            border: 1px solid #ccc;
            margin: 50px auto;
            padding: 42px 30px 0;
        }

        /* h2来设定标题 */
        /* 加边框底线，设定字的大小 */
        .news h2 {
            border-bottom: 1px solid #ccc;
            font-size: 30px;

            /* 行高是1倍,给字和线之间加入内边距（非必须） */
            line-height: 1;
            padding-bottom: 9px;
        }

        /* 【拓展】去掉列表的标识符 */
        ul{
            list-style: none;
        }

        /* 对li操作，高度；边框底线；左缩进；内容垂直居中 */
        .news li{
            height: 50px;
            border-bottom: 1px dashed #ccc;
            padding-left: 28px;
            line-height: 50px;
        }

        /* 对a操作，去下划线；设定内容字体大小和颜色 */
        .news a{
            text-decoration: none;
            font-size: 18px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="news">
        <h2>最新文章/ New Article</h2>
        <!-- ul>li>a -->
        <ul>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
            <li><a href="#">体验java魅力</a></li>
            <li><a href="#">ababababababababab</a></li>
            <li><a href="#">玛卡巴卡</a></li>
        </ul>
    </div>
</body>

效果图：
A006-1-7.jpg

CSS3浮动

2. CSS浮动

CSS浮动-思维导图

A006-2s.jpg

2.1 结构伪类选择器

结构伪类选择器是一种利用H5结构寻找标签的选择器，常用于li标签。
常见选择器有：

  • li:first-child {css} //找第一个li

  • li:last-child {css} //找最后一个li

  • li:nth-child(x) {css} //找第x个li 【常用】

  • li:nth-last-child(x) {css} //找倒数第x个li

  • li:nth-child(2n) {css} //找第偶数个li 【常用】
    其中，li:nth-child(x) {css}是最常用的形式，x可以用公式表达，n会从0开始数。
    例如：

  • 偶数：2n

  • 奇数：2n+1

  • 前5个：-n+5

  • 从第5个开始：n+5

    • </ul>

    2.2 伪元素

    伪元素是使用CSS做出的伪标签，常用于装饰，依赖于父标签可分为前和后两种，必须设置content属性才能生效，默认是行内元素。
    常见形式：

    • .father::before {css}

    • .father::after {css}
      默认是行内元素，需要改变显示模式才可以调整宽高。

      • </ul>

      例如：“老鼠 爱 大米”

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      <style>
              .father {
                  width: 200px;
                  height: 300px;
                  background-color: pink;
              }
              .father::before {
                  /* 前置伪元素 */
                  content: '老鼠';
                  color: blueviolet;
                  width: 100px;
                  height: 100px;
                  background-color: skyblue;
                  display: inline-block;
                  /* 可以看见基本就是一个标签（大小需要调display，因为默认行内元素无法改变宽高） */
              }
              .father::after {
                  /* 后置伪元素 */
                  content: '大米';
                  /* content必须有，可以留空--content: ''; */
              }
          </style>
      </head>
      <body>
          <!-- .father -->
          <div class="father">爱</div>
      </body>

      2.3 标准流

      标准流：标签的默认排列规则，也称文档流
      即，类似div默认1行1个，span默认1行多个，诸如此类。

      2.4 浮动

      浮动：可以让块元素完美地在一行中排列，不同于行内块显示模式。

      2.4.1 起因: 行内块问题

      当使用行内块显示模式时，div如果换行写，显示时就会产生1个空格的间距，这样就很麻烦！
      例如：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
          <style>
              div {
                  width: 100px;
                  height: 100px;
                  display: inline-block;
              }
              .one {
                  background-color: pink;
              }
              .two {
                  background-color: skyblue;
              }
          </style>
      </head>
      <body>
          <div class="one">one</div><div class="two">two</div>
      </body>

      A006-2-4.jpg

      如果要实现无缝的话，就需要将多个div写在一行内，但是这样不便于阅读维护。
      所以就需要使用浮动。

      2.4.2 浮动的作用

      浮动拥有2种作用：
      （1）图文环绕
      （2）网页布局

      2.4.3 浮动的代码实现

      1
      float: left/right;

      2.4.4 浮动的特点

      （1）浮动元素会脱离标准流，在标准流中不占位置(脱标)
      （2）浮动元素浮在空中,不在同一个图层了，但是下方标准流的文本还是会避开遮挡以正常显示(半脱)
      （3）浮动找浮动，一行可以多个，可以设置宽高，具备行内块特点。
      （4）浮动元素不可以tac/margin:0 auto来居中标签(这个特点是在说浮动元素/标签，并不是说标签内容/文本)，即浮动优先级更高。
      例如：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
          <style>
              .one {
                  width: 100px;
                  height: 100px;
                  background-color: pink;
                  float: left;
              }
              .two {
                  width: 200px;
                  height: 200px;
                  background-color: skyblue;
                  float: left;
              }
              .three {
                  width: 300px;
                  height: 300px;
                  background-color: orange;
              }
          </style>
      </head>
      <body>
          <div class="one">one</div>
          <div class="two">two</div>
          <div class="three">three</div>
      </body>

      A006-2-4-4.jpg

      2.5 浮动案例-小米

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      82
      83
      84
      85
      86
      87
      88
      89
      90
      91
      92
      93
      94
      95
      96
      97
      98
      99
      100
      101
      102
      103
      104
      105
      106
      107
      108
      109
      110
      111
      112
      113
      114
      115
      116
      117
      118
      119
      120
      121
      122
      123
      124
      125
      126
      127
      128
      129
          <title>CSS浮动案例-小米</title>
          <style>
              /* 清除默认盒子边距 */
              * {
                  margin: 0;
                  padding: 0;
              }
              /* 通栏 */
              .top {
                  height: 40px;
                  background-color: #333;
              }
              /* 头部 */
              .header {
                  margin: 0 auto;
                  width: 1226px;
                  height: 100px;
                  background-color: #ffc0cb;
              }
              /* 父级版心居中 */
              .content {
                  margin: 0 auto;
                  width: 1226px;
                  height: 460px;
                  background-color: #ccc;
              }
              /* 子级浮动一左一右 */
              .left{
                  float: left;
                  width: 234px;
                  height: 460px;
                  background-color: #ffa500;
              }
              .right {
                  float: right;
                  width: 992px;
                  height: 460px;
                  background-color: #87ceeb;
              }
              /* 【重要】CSS书写顺序(快且快)
                  1. 浮动float/display
                  2. 盒子模型: margin, border, padding, whbgc
                  3. 文字样式
               */
              .box {
                  margin: 0 auto;
                  width: 1226px;
                  height: 614px;
                  background-color: #ccc;
              }
              .left1 {
                  float: left;
                  width: 234px;
                  height: 614px;
                  background-color: #800080;
              }
              .right1 {
                  float: right;
                  width: 978px;
                  height: 614px;
                  background-color: green;
              }
              ul {
                  list-style: none;
              }
              /* 如果父级宽度不够，子级会自动换行 */
              .right1 li {
                  float: left;
                  margin-right: 14px;
                  margin-bottom: 14px;
                  width: 234px;
                  height: 300px;
                  background-color: #98c6bf;
              }
              li:nth-child(4n){
                  margin-right: 0;
              }

              .header li {
                  float: left;
              }
              .header li a {
                  display: inline-block;
                  width: 153.25px;
                  height: 100px;
                  text-decoration: none;
                  text-align: center;
                  line-height: 100px;
                  color: white;
              }
              .header li a:hover {
                  background-color: green;
              }
          </style>
      </head>
      <body>
          <div class="top"></div>
          <div class="header">
              <ul>
                  <li><a href="#">新闻1</a></li>
                  <li><a href="#">新闻2</a></li>
                  <li><a href="#">新闻3</a></li>
                  <li><a href="#">新闻4</a></li>
                  <li><a href="#">新闻5</a></li>
                  <li><a href="#">新闻6</a></li>
                  <li><a href="#">新闻7</a></li>
                  <li><a href="#">新闻8</a></li>
              </ul>
          </div>
          <div class="content">
              <div class="left">left</div>
              <div class="right">right</div>
          </div>
          <div class="box">
              <div class="left1">侧边栏</div>
              <div class="right1">
                  <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                      <li></li>
                  </ul>
              </div>
          </div>
      </body>

      效果图：
      A006-2-5.jpg

      2.6 清除浮动

      清除浮动，是清除浮动给别的标签带来的影响。
      本节会介绍1个场景和4种解决方案。

      2.6.1 浮动问题场景

      当有一组父子级标签，其中子级浮动，而父级无高度设定，则位于后面的标准流盒子会往上顶替。
      如图所示:
      A006-2-6-1.jpg
      图中，灰、蓝色为两个子元素，都使用了浮动；且父元素没有进行高度设定；所以位于后面的绿色标准流元素就顶替上去了，呈多图层效果。
      这是一个经典的浮动影响场景。

      2.6.2 浮动清除1-父级加高法

      该浮动问题的根源在于父元素没有高度设定，故而只需要对父级进行高度设定就可以清除浮动带来的影响。
      缺点：
      （1）部分网页设计下，父元素不适合加高度设定。
      例如：
      会在将来无限拉长的新闻公告栏，高度会一直发生变动。

      2.6.3 浮动清除2-额外标签法

      这种方法引入一个额外标签来清除浮动。在父元素的最后添加一个块级元素，并给这个块级元素添加clear:both;属性。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
          <title>浮动清除-额外标签法</title>
          <style>
              .top {
                  margin: 0 auto;
                  width: 1000px;
                  /* height: 300px; */
                  background-color: pink;
              }
              .bottom {
                  height: 100px;
                  background-color: green;
              }
              .left {
                  float: left;
                  width: 200px;
                  height: 300px;
                  background-color: #ccc;
              }
              .right {
                  float: right;
                  width: 790px;
                  height: 300px;
                  background-color: skyblue;
              }

              .clearfix {
                  /* 清除左右两侧浮动的影响 */
                  clear: both;
              }
          </style>
      </head>
      <body>
          <div class="top">
              <div class="left"></div>
              <div class="right"></div>
              <!-- 这里引入额外标签，调用类选择器，清除浮动 -->
              <div class="clearfix"></div>
          </div>
          <div class="bottom"></div>
      </body>

      效果图：
      A006-2-6-2.jpg

      缺点：
      （1）又把父级的高撑开了。
      （2）添加了额外的标签和选择器，变复杂了。

      2.6.4 浮动清除3-单伪元素清除法

      这种方法本质与额外标签法相同，不同的是采用了伪元素来代替额外标签。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
          <title>浮动清除-单伪元素清除法</title>
          <style>
              .top {
                  margin: 0 auto;
                  width: 1000px;
                  /* height: 300px; */
                  background-color: pink;
              }

              .bottom {
                  height: 100px;
                  background-color: green;
              }
              .left {
                  float: left;
                  width: 200px;
                  height: 300px;
                  background-color: #ccc;
              }
              .right {
                  float: right;
                  width: 790px;
                  height: 300px;
                  background-color: skyblue;
              }

              .clearfix::after {
                  content: '';
                  /* 伪元素添加的标签默认是行内的 */
                  display: block;
                  clear:both;
                  /* 这两条为了低级浏览器兼容 */
                  height: 0;
                  visibility: hidden;
              }
              /* 单伪元素法本质与额外标签的原理相同 */
          </style>
      </head>
      <body>
          <!-- 调用两个类，用单伪元素法清除浮动 -->
          <div class="top clearfix">
              <div class="left"></div>
              <div class="right"></div>
              <!-- 通过css添加伪元素 -->
          </div>
          <div class="bottom"></div>
      </body>

      优点：
      （1）以后直接给标签加类就可以清除浮动了

      2.6.5 浮动清除4-双伪元素清除法

      这种方法采用了两个伪元素来配合，一个::before一个::after;
      两个都要转显示模式为table;
      然后需要对after加clear:both;

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
          <title>浮动清除-双伪元素清除法</title>
          <style>
              .top {
                  margin: 0 auto;
                  width: 1000px;
                  /* height: 300px; */
                  background-color: pink;
              }

              .bottom {
                  height: 100px;
                  background-color: green;
              }
              .left {
                  float: left;
                  width: 200px;
                  height: 300px;
                  background-color: #ccc;
              }
              .right {
                  float: right;
                  width: 790px;
                  height: 300px;
                  background-color: skyblue;
              }

              /* 清除浮动-双伪元素清除法 */
              /* 这一段作用是解决margin塌陷问题 */
              /* margin塌陷？父子级标签，都是块，子级加margin会影响父级位置 */
              /* 这里转成table了，直接避开了块 */
              /* 故而双伪元素清除法，不但可以浮动清除，还可以解决margin塌陷，只要调用clearfix类就可以。 */
              .clearfix::before,
              .clearfix::after {
                  content: '';
                  display: table;
              }

              /* 真正清除浮动的标签 */
              .clearfix::after {
                  clear: both;
              }
          </style>
      </head>
      <body>
          <div class="top clearfix">
              <div class="left"></div>
              <div class="right"></div>
          </div>
          <div class="bottom"></div>
      </body>

      优点：
      （1）以后直接调用类就可以了。
      （2）不但可以清除浮动，还可以解决margin外边距的问题。

      2.6.6 浮动清除5-overflow清除法

      这种方法是最简单的。直接给父元素的css添加 overflow : hidden; 属性就能解决此类问题。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
          <title>浮动清除-overflow清除法</title>
          <style>
              .top {
                  margin: 0 auto;
                  width: 1000px;
                  /* height: 300px; */
                  background-color: pink;
                  
                  /* overflow浮动清除法 */
                  overflow: hidden;
              }

              .bottom {
                  height: 100px;
                  background-color: green;
              }
              .left {
                  float: left;
                  width: 200px;
                  height: 300px;
                  background-color: #ccc;
              }
              .right {
                  float: right;
                  width: 790px;
                  height: 300px;
                  background-color: skyblue;
              }
          </style>
      </head>
      <body>
          <div class="top">
              <div class="left"></div>
              <div class="right"></div>
          </div>
          <div class="bottom"></div>
      </body>

      这也是最方便快捷的方法。

CSS3定位装饰

3. CSS定位装饰

本章将思维导图分别放在3.1定位和3.2装饰的标题后。

3.1 定位

CSS定位-思维导图

A006-3-1s.jpg

3.1.1 作用与使用步骤

（1）特点

“定位”不同于标准流和浮动，它支持自由摆放，盒子堆叠的布局效果。

（2）场景

“定位”通常用于一些元素堆叠，以及盒子始终不动等应用场景。

（3）使用步骤

“定位”的使用分为两步：

1
2
position: relative/absolute/fixed;
left/right/top/bottom: xxpx/xx%;

先是设置定位属性，然后是设置定位偏移值。
left表示，与左边相距xxpx.

3.1.2 定位的分类

“定位”可以分为静态定位、相对定位、绝对定位、固定定位4类。
其中静态定位其实就是不定位。

3.1.2.1 相对定位

“相对定位”是指相对自己之前的位置发生偏移；
一般拥有以下几个特点：
（1）空空占用原有的位置；
（2）仍然具有原有显示模式的特点；
（3）改变位置是基于自己原来的位置。


1
2
position:relative;
+偏移值设定

Q: 如果只有定位，没有偏移设定？
A: 那等于没定位。

Q: 如果又设置左偏移，又设置右偏移，又设置上偏移，又设置下偏移？
A: 那只会读left/top的值。

3.1.2.2 绝对定位

“绝对定位”可以分为两种情形。
（i）如果父级没有定位，那就以浏览器窗口为参照进行定位。(一般不会用)
（ii）如果父级有定位，那就以这个父级为参照进行定位。（这个常用）
且使用“绝对定位”会让子元素的显示模式变成行内块的特性。（需要大小设定）

其中，在（ii）情形中，父元素的定位一般采用相对定位。此时，子级绝对定位且父级相对定位，被称为“子绝父相”。
（这里的“父级”是广义的，爷爷级也算。）

1
2
position:absolute;
+偏移值设定

Q: 如果只有定位，没有偏移设定？
A: 那元素会脱标，变得像浮动一样。

*绝对定位的一些案例

例1：图片角标
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="box wrapper">
        <div class="title">
            <h2>精品推荐</h2>
            <a href="#">查看全部</a>
        </div>
        <div class="content clearfix">
            <ul>
                <li>
                    <a href="#">
                        <img src="./images/course07.png" alt="">
                        <h3>Think PHP 5.0 博客系统实战项目演练</h3>
                        <p><span>高级</span>  •  1125人在学习</p>
                        <!-- 定位的hot小图 -->
                        <img src="./images/hot.png" alt="" class="hot">
                    </a>
                </li>
                ......

/ 课程模块 hot 定位小图 /
.box .content li {
position: relative;
}

.box .content li .hot {
position: absolute;
right: -4px;
top: 4px;
}

效果图：
A006-31221.jpg

可以看到css部分采用了子绝父相，对a标签中的img标签进行了布局调整。

例2：绝对定位的居中

在使用定位后，会有一个问题场景：“绝对定位的盒子不能使用margin: 0 auto;进行居中”
这里有两种解决方法。

解决方法1: 绝对定位的盒子，直接设置偏移值：
left:50%; margin-left: -width/2;
top: 50%; margin-top: -height/2;
缺点: 位置受到了盒子大小的影响，永远要调整。

解决方案2: 绝对定位的盒子，使用transform设置偏移值：
left: 50%; top: 50%;
transform: translate(-50%, -50%) ;
从而实现自身宽高一半的位移。
这种方法会更好。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.box {
    position: absolute;

    left: 50%;
    top: 50%;
    /* margin-left: -150px; */
    /* margin-top: -150px; */

    /* 位移: 自己宽度高度的一半 */
    transform: translate(-50%, -50%);

    width: 400px;
    height: 300px;
    background-color: pink;
}

效果图：
A006-31222.jpg

例3：图片调整

这个例子是导航二维码的居中定位案例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
  <title>导航二维码-居中定位</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    /* 因为有通栏：占满一行的边框，所以需要有一个通栏：占满一行的盒子 */
    .nav {
      height: 40px;
      border-bottom: 1px solid #ccc;
    }

    /* 因为ul中所有的内容都是在网页的宽度固定并且水平居中的盒子内部，所以设置ul为宽度固定并且水平居中的效果（后面项目中所用到的版心） */
    ul {
      list-style: none;
      width: 1200px;
      margin: 0 auto;
    }

    ul li {
      float: left;
      width: 20%;
      height: 40px;
      border-right: 1px solid #ccc;
      /* 自动内减 */
      box-sizing: border-box;
      text-align: center;
      line-height: 40px;
    }

    ul .last {
     border-right: none;
    }

    ul li a {
      /* a标签默认是行内元素，宽高由内容撑开，并且无法设置宽高，此时默认情况用户只能点击文字区域才能调整 */
      /* 如果把a标签转换成块级元素，此时可以设置宽高，会让a标签范围更大，用户可以点击调整的区域也越大 */
      display: block;
      /* 宽度不设置块元素会默认占满一行 */
      height: 40px;
      text-decoration: none;
      color: #000;
    }

    /* 这里可以看到：子绝父相 */
    ul li .app {
      position: relative;
    }

    .code {
      position: absolute;
      left: 50%;
      top: 41px;
      transform: translate(-50%);
    }
  </style>
</head>
<body>
  <!-- 导航 -->
  <div class="nav">
    <ul>
      <li><a href="#">我要投资</a></li>
      <li><a href="#">平台介绍</a></li>
      <li><a href="#">新手专区</a></li>
      <!-- 因为用户鼠标放在二维码图片上也能跳转，所以证明img也是在a的范围内，因此把img写在a标签的内部 -->
      <li><a href="#" class="app">手机微金所 <img src="./images/code.jpg" alt="" class="code"> </a></li>
      <li class="last"><a href="#">个人中心</a></li>
    </ul>
  </div>
</body>

效果图：
A006-31223.jpg

例4：遮罩效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
    <title>banner的遮罩效果</title>
    <style>
        .banner {
            position: relative;
            margin: 0 auto;
            width: 1226px;
            height: 600px;
        }

        .mask {
            position: absolute;
            left: 0;
            bottom: 0;
            /* 绝对定位的盒子显示模式具备行内块特点: 加宽度高度生效, 如果没有宽度也没有内容, 盒子的宽度尺寸就是0 */
            /* width: 1226px; */
            /* 如果子级和父级的宽度相同  */
            width: 100%;
            height: 150px;
            background-color: rgba(0,0,0, .5);
        }
    </style>
</head>
<body>
    <div class="banner">
        <img src="./images/bg.jpg" alt="">
        <!-- 遮罩 -->
        <div class="mask"></div>
    </div>
</body>

效果图：
A006-31224.jpg

3.1.2.3 固定定位

“固定定位”是指相对浏览器进行移动，无论怎么滚动都不动。
一般拥有以下几个特点：
（1）会脱标。
（2）基于窗口。
（3）具备行内块特点（需要大小设定）

1
2
position:fixed;
+偏移值设定

如果此时left:0;top:0;则会吸附到浏览器左上角（常用于导航栏）

3.1.2.4 显示层级关系

标准流<浮动<定位
其中，各种定位的默认层级相同，但是遵循“后来居上”原则。

3.2 装饰

CSS装饰-思维导图

A006-3-2s.jpg

3.2.1 垂直对齐方式

浏览器在处理行内/行内块元素时，都是按文字来处理的。由于文字的基线存在，有的元素大，有的元素小，会存在元素之间垂直不对齐的情况。
这个时候可以用vertical-align属性来调节。

需要注意的是，这个属性只可以在行内/行内块标签内使用。
部分情况也可以考虑转成 块元素 来处理。

vertical-align属性有四种取值情况：

1
2
3
4
vertical-align: baseline; (默认，基线对齐)
vertical-align: top; (顶部对齐)
vertical-align: middle (中部对齐)【常用】
vertical-align: bottom (底部对齐)

专门用于调节垂直上的对齐问题。

3.2.2 光标类型

光标类型通过cursor属性来进行调整。

1
2
3
4
cursor: default; 箭头
cursor: pointer; 小手
cursor: text; 工/选择文字
cursor: move; 十字/移动

3.2.3 边框圆角

边框圆角一般用border-radius属性来设定。

1
border-radius: xxpx/xx%;

1个值：4个角的圆角半径
4个值：左上顺时针4个角的分别的圆角半径
缺少的值就看对角，这个和margin/padding一样。

圆角案例1 正圆

border-radius: 50%
前提：元素本身就是正方形。

圆角案例2 胶囊

border-radius: 盒子高度的一半
前提：元素本身是长方形。

3.2.4 溢出显示管理-overflow

overflow属性可以控制溢出盒子的部分。

1
2
3
4
overflow: visible; 默认，溢出显示
overflow: hidden; 溢出部分隐藏
overflow: scroll; 无论是否溢出都显示滚动条(一般不用)
overflow: auto; 根据溢出与否，自动显示隐藏滚动条

3.2.5 元素的显示与隐藏

常用于子菜单的隐藏与显示。

占位隐藏

visibility: hidden;
原地隐藏，但是占用的位置依旧占用。（占位隐藏效果）不常用

不占位隐藏

display: none;
彷佛就不曾存在过（不占位隐藏）常用

案例-悬停显示图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
  <title>悬停显示图片</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    /* 因为有通栏：占满一行的边框，所以需要有一个通栏：占满一行的盒子 */
    .nav {
      height: 40px;
      border-bottom: 1px solid #ccc;
    }

    /* 因为ul中所有的内容都是在网页的宽度固定并且水平居中的盒子内部，所以设置ul为宽度固定并且水平居中的效果（后面项目中所用到的版心） */
    ul {
      list-style: none;
      width: 1200px;
      margin: 0 auto;
    }

    ul li {
      float: left;
      width: 20%;
      height: 40px;
      border-right: 1px solid #ccc;
      /* 自动内减 */
      box-sizing: border-box;
      text-align: center;
      line-height: 40px;
    }

    ul .last {
     border-right: none;
    }

    ul li a {
      /* a标签默认是行内元素，宽高由内容撑开，并且无法设置宽高，此时默认情况用户只能点击文字区域才能调整 */
      /* 如果把a标签转换成块级元素，此时可以设置宽高，会让a标签范围更大，用户可以点击调整的区域也越大 */
      display: block;
      /* 宽度不设置块元素会默认占满一行 */
      height: 40px;
      text-decoration: none;
      color: #000;
    }

    ul li .app {
      position: relative;
    }

    .code {
      position: absolute;
      left: 50%;
      top: 41px;
      display: none;
      transform: translate(-50%);
    }

    /* 鼠标悬停a 显示二维码图片 */
    .nav li a:hover img {
        display: block;
    }
  </style>
</head>
<body>
  <!-- 导航 -->
  <div class="nav">
    <ul>
      <li><a href="#">我要投资</a></li>
      <li><a href="#">平台介绍</a></li>
      <li><a href="#">新手专区</a></li>
      <!-- 因为用户鼠标放在二维码图片上也能跳转，所以证明img也是在a的范围内，因此把img写在a标签的内部 -->
      <li><a href="#" class="app">手机微金所 <img src="./images/code.jpg" alt="" class="code"> </a></li>
      <li class="last"><a href="#">个人中心</a></li>
    </ul>
  </div>
</body>

效果图：
A006-3251.gif

3.2.6 元素整体透明度

opacity: xx;
取值：0-1

CSS部分到这里就告一段落了，接下来会进行Javascript的学习内容。