美文网首页
固定定位对下面元素的影响,在文本中添加不同宽度的空格

固定定位对下面元素的影响,在文本中添加不同宽度的空格

作者: 蒲小若 | 来源:发表于2017-07-22 22:49 被阅读0次

1.相信初学者在刚刚接触定位,并且使用固定定位的时候,可能会出现一些不是自己想要的那个效果,使用固定定位的元素会影响到显示在它下方的元素,下方的元素会被使用固定定位的元素覆盖掉固定定位元素的高度。下面就给大家介绍一个小方法来解决这个小问题吧!

css代码如下

.top{

      position: fixed;

      width: 100%;

      height: 100px;

      background-color: #FAFAFA;

}

.banner{

      width: 100%;

      height: 570px;

      background:url(images/banner.jpg) no-repeat;

      background-size: cover;

      background-position: center center;

}

html代码

<div class="top">

       ...

       ...

</div>

<div class = "banner">

    ....

    ....

<div/>

这样写所呈现的代码是这样的:

        banner会被top覆盖点100px,想要解决这个问题很简单,就是在.banner{}样式中添加padding-top:100px;就ok了。

以后如果再遇到类似的问题,可以给被覆盖的元素加上padding-top:设置固定定位的元素的高度。

2.文本中有时可能需要添加空格,但是你可能需要不同宽度的空格,所以下面就给大家介绍不同的空格:

(1)&nbsp;我们在写东西的时候最常见的一种,它所占的是一个空格的宽度,这个会影响到正常的换行。所以在写页面的时候要少用这个。

(2)&ensp;这个所代表的宽度会比&nbsp;稍窄点,当你不需要像&nbsp;那样的宽度时,就可以用这个。

(3)&emsp;

相关文章

  • 固定定位对下面元素的影响,在文本中添加不同宽度的空格

    1.相信初学者在刚刚接触定位,并且使用固定定位的时候,可能会出现一些不是自己想要的那个效果,使用固定定位的元素会影...

  • 开发过程中的一些总结

    1.元素宽度高度能不写就不写,注意默认宽度,块级元素宽度默认父元素宽度(绝对定位和固定定位中默认为元素的宽度 边框...

  • CSS 四种定位 static fixed absolute r

    静态定位 不脱离文本流。元素定位的默认值。 固定定位 position:fixed; 固定定位 脱离文本流。元素的...

  • 元素的水平居中的方法

    元素内的行内元素 在元素上加 宽度固定的块级元素 在元素上加 或者用绝对定位 宽度不固定的块级元素 方法1 用di...

  • CSS笔记 关于水平居中布局

    行内元素 像段落中的文本,直接设置文本对齐属性为居中即可。 固定宽度的块级元素 设置margin左右为auto 绝...

  • 2018-09-27

    加了绝对定位,固定定位,浮动元素的行内元素,可以不用转换,直接给宽度和高度

  • div的宽度自适应文本

    在css中添加如下代码可使div的宽度等于自身内部文本宽度

  • 小技巧随笔

    js中给字符串添加空格 使用 +'\xa0'+ 即可 超出文本框宽度变为... text-overflow:ell...

  • 瀑布流布局的原理

    瀑布流布局是宽度固定,高度随机,从上到下的布局方式 父元素相对定位(relative),子元素绝对定位(absol...

  • iview 文字提示

    Tooltip 是iview中的文字提示,好用 采坑的是 1、当父元素 col 宽度固定 2、p标签文本溢出隐藏 ...

网友评论

      本文标题:固定定位对下面元素的影响,在文本中添加不同宽度的空格

      本文链接:https://www.haomeiwen.com/subject/dwqpkxtx.html