伪类元素实现可伸缩时间轴,伸缩

     
 需求:需要实现纵向列表左边的一条时间轴,时间轴中间除穿插具体的时间节点外不可间断,单击右边信息盒子里的图标,向下弹出子盒子并撑开列表,时间轴相应的延长。再单击图标,子盒子隐藏,时间轴收缩。看图来直观的了解一下这个需求,为便于观察,使用了醒目的红色线段和紫色边框如图a、图b所示:

图片 1     
  图片 2

图a   初始状态下的时间轴                                                
      图b  弹出子元素后的时间轴

     
实现:方案一,每一个列表为一个item,在单个item左边的时间盒子里使用绝对定位,使用div加border实现两条纵向直线,但是这种方案使用到的标签较多,意味着创建的dom节点很多并且所需要的css代码很繁琐,不利于提升页面性能和开发效率,后经同事指点,采用伪类元素加绝对定位成功的实现了这个需求。

方案二:伪类元素+绝对定位。以单个item为例,用基本的伪类元素实现线段后并使用绝对定位定位到UI要求的位置如图所示,

图片 3

由于当子盒子弹出时伸长的是底部纵轴线段,故需要着重考虑的是底部纵轴线段长度的控制。使用绝对定位,底部元素长度控制的代码为:

    content: '';
    border-left: 1px solid red;
    position: absolute;
    left: .39rem;
    width: 1px;
    bottom:.1rem;
    top:.9rem;
    height:auto;

top属性设置此直线距离顶部的位置,即要留出一段空白显示具体的时间18:48,bottom属性设置元素长度底部的位置,要想上下间的item无缝对接显示成一条不间断的直线,故设置bottom:0非常重要。最关键的还是要设置父元素position:relative了,即设置此直线位置是相对于哪个父元素而言,w3school介绍的是,生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位,若父元素没有相对定位position:relative,则该子级元素会相对于body来定位。故此处设置单个item元素的定位position:relative即可,除此之外,还需要设置包裹伪类元素的父元素高度为:100%,因为子类元素需要从父类元素那里继承高度。若父元素设置的不恰当,可能会引起时间轴不出现或者长度不对。

 

需求:需要实现纵向列表左边的一条时间轴,时间轴中间除穿插具体的时间节点外不可间断,单击右边信…

方案二:伪类元素+绝对定位。以单个item为例,用基本的伪类元素实现线段后并使用绝对定位定位到UI要求的位置如图所示,

top属性设置此直线距离顶部的位置,即要留出一段空白显示具体的时间18:48,bottom属性设置元素长度底部的位置,要想上下间的item无缝对接显示成一条不间断的直线,故设置bottom:0非常重要。最关键的还是要设置父元素position:relative了,即设置此直线位置是相对于哪个父元素而言,w3school介绍的是,生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位,若父元素没有相对定位position:relative,则该子级元素会相对于body来定位。故此处设置单个item元素的定位position:relative即可,除此之外,还需要设置包裹伪类元素的父元素高度为:100%,因为子类元素需要从父类元素那里继承高度。若父元素设置的不恰当,可能会引起时间轴不出现或者长度不对。

8.清除浮动指什么? 如何清除浮动?

清除浮动指清除浮动带来的影响。主要包括对上级元素和对同级元素的影响。对上级元素的影响如上题所说,浮动元素不会撑起父级元素的高度。对同级元素,是同级元素会忽略浮动元素所占的空间,需要浮动元素所占的空间不被忽略。
清除浮动可以用overflow清除父级元素的浮动。
第七题的例子,父元素没有被完全撑开,在父元素上加上overflow: hidden;,效果则变成下图所示:

图片 4

父元素被撑开。
还可以用clear清除浮动,clear: xxx;表示清除元素xxx方向的浮动。
对父元素,加

.nav:after {
            content: '';
            display: block;
            clear: left;
        }

效果:

图片 5

伪类元素:after相当于在父元素中增加了一个标签。
对于同级元素,.item2,item4可以加上clear: left;,
效果:

图片 6

因为.item1设置了透明度为0.4,所以变成图中的颜色。
可以看到,这时父元素也被撑开了。

本文版权归作者和饥人谷所有,转载请注明出处

    content: '';
    border-left: 1px solid red;
    position: absolute;
    left: .39rem;
    width: 1px;
    bottom:0;
    top:.9rem;
    height:auto;

方案二:伪类元素+绝对定位。以单个item为例,用基本的伪类元素实现线段后并使用绝对定位定位到UI要求的位置如图所示,

5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别

position:relative和负margin都可以使元素位置发生偏移。区别在于,position:relative元素发生偏移时,初始空间还被占据着。而负margin则不再占据初始空间。
举例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>相对定位</title>
  <style>
      .content {
          width: 100px;
          height: 100px;
          border: 1px solid red;
      }
      .pa {
          width: 100px;
          height: 100px;
          display: inline-block;
          border: 1px solid red;
         /*margin-top: -20px;
          margin-left: -20px;*/
          /*position: relative;
          top: -20px;
          left: -20px;*/
      }
      .item {
          width: 100px;
          height: 100px;
          border: 1px solid red;
      }
  </style>
</head>
<body>
  <div class="content">
  <p>段落</p>
  饥人谷
  </div>
  <div class="pa">下面的段落位置有变化吗?</div>
  下面的段落位置有变化吗?
  <div class="item">下面的段落位置有变化吗?</div>
</body>
</html>

未设置position和负margin时,效果:

图片 7

设置

          position: relative;
          top: -20px;
          left: -20px;

效果:

图片 8

设置

          margin-top: -20px;
          margin-left: -20px;

效果:

图片 9

可以看出元素设置position:relative时,后面的元素位置不变动。负margin时,后面的元素也跟着变动。

由于当子盒子弹出时伸长的是底部纵轴线段,故需要着重考虑的是底部纵轴线段长度的控制。使用绝对定位,底部元素长度控制的代码为:

     
实现:方案一,每一个列表为一个item,在单个item左边的时间盒子里使用绝对定位,使用div加border实现两条纵向直线,但是这种方案使用到的标签较多,意味着创建的dom节点很多并且所需要的css代码很繁琐,不利于提升页面性能和开发效率,后经同事指点,采用伪类元素加绝对定位成功的实现了这个需求。

7.浮动元素有什么特征?对其他浮动元素、普通元素、文字分别有什么影响?

浮动元素脱离了文档流,浮动模型是一种可视化格式模型,浮动的框可以左右移动(根据float属性值而定),直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。

  • 对其他浮动元素的影响,一个元素浮动如果碰到另一个浮动元素的边框,会紧贴着那个边框水平放置,如果父元素宽度不够则会自动下移。
    举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动元素</title>
    <style>
        .nav {
            width: 280px;
            height: 300px;
            border: 1px solid;
        }
        .box {
            width: 100px;
            height: 100px;
        }
        .item1 {
            background: #f00;
            float: left;
        }
        .item2 {
            background: #0f0;
            float: left;
        }
        .item3 {
            background: #00f;
            float: left;
        }
    </style>
</head>
<body>
  <div class="nav">
    <div class="box item1">1</div>
    <div class="box item2">2</div>
    <div class="box item3">3</div>
  </div>
</body>
</html>

效果:

图片 10

nav的宽度280px,而item1,item2,item3,分别是100px,一行放不下三个块元素。item3下移。

  • 对普通元素的影响,同级的普通块级元素会忽略浮动元素的存在。
    举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动元素</title>
    <style>
        .nav {
            width: 280px;
            height: 300px;
            border: 1px solid;
        }
        .item1 {
            width: 100px;
            height: 100px;
            background: #f00;
            float: left;
            opacity: 0.4;
        }
        .item2 {
            background: #0f0;
            height: 120px;
        }
        .item3 {
            width: 100px;
            height: 100px;
            background: #00f;
            float: left;
            opacity: 0.6;
        }
        .item4 {
            background: #ccc;
        }
    </style>
</head>
<body>
  <div class="nav">
    <div class="item1">1</div>
    <div class="item2">
    浮动</div>
    <div class="item3">3</div>
    <div class="item4">饥人谷</div>
  </div>
</body>
</html>

效果:

图片 11

如图示,item1,item3浮动,脱离了文档流,item2,item4的位置不受影响,仍是,占据一行,从上到下排列。
浮动元素的父级元素的高不会被自动撑开。
把上面的例子中的nav的高度设置去掉,则出现这种效果:

图片 12

可以看出,浮动元素没有撑起父级元素,靠的是文本流内的同级块级元素撑起的。

  • 对文字的影响,从上面的同级元素的例子中中也可以看出,文字受浮动元素的影响。浮动元素占据的空间,其他元素的文字不能占据,只能挨着浮动元素排列。

Author

发表评论

电子邮件地址不会被公开。 必填项已用*标注