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

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;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,786评论 1 92
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,788评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,327评论 0 11
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,228评论 0 8
  • 简书连载风云录蔷薇小说目录择一世长安专题择一世长安【目录】 文丨蔷薇下的阳光 上一章丨《第四十七章:下月初三》 前...
    蔷薇下的阳光阅读 497评论 0 10