内联元素、display、visibility、overflow、文档流、浮动、多个定位

内联元素:

    内联元素不能设置宽高,设了也无效【重点】

    水平内外边距和边框都支持,垂直方向上都不太好使

display:

    行内不能设置上下左右,但可以通过display来修改元素性质

    block:设置元素为块元素

    inline:设置元素为行内元素

    inline-block:设置元素为行内块元素

    none:隐藏元素(元素将在页面中完全消失)

visibility:用于元素是否可见(隐场后依旧占位)

    visible:可见的

    hidden:隐藏的

(注:display:none和visibility:hidden的区别,前者不占位,后者占位)

overflow:控制内容溢出情况

    visible:默认值

    scroll:添加滚动条

    auto:根据需要添加滚动条

    hidden:隐藏超出盒子的内容

文档流:文档中可现实的对象在排列时所占用的位置(类似图层最底层)

        高度默认被内容撑开、宽度100%、内联占自身大小

    浮动:使元素脱离原来的文本流,在父元素中浮动起来(会一直向上,直到碰到父元素边界或其他浮动元素)

          行内元素浮动后自动变为块级元素,设置display:inline也不管用

          浮动会使元素完全脱离文本流,不再在文档中再占用位置

          浮动元素完全脱离文档流,不会撑开父元素

          float:none:不浮动(为默认值)

                left:向左浮动

                right:向右浮动

    清除浮动:清除浮动对元素的影响,即元素不会因为上方出现浮动元素改变位置

          clear:left:忽略左侧浮动

                right:忽略右侧浮动

                both:忽略全部浮动

                none:不忽略浮动,默认值

    定位:

        position:

                  static

                  relative

                  absolute

                  fixed

        相对定位:相对于一个位置对元素进行移动

                  当“position:relative;”则开启了元素的相对定位

                  开启相对定位后可使用(top、right、bottom、left)属性

        绝对定位:元素相对于html元素或离他最近 的祖先定位元素进行定位

                  当“position:absolute;”则开启了元素的相对定位

                  开启绝对定位后可使用(top、right、bottom、left)属性

                  会使元素完全脱离文本流

                  绝对定位的块元素的宽度会被其内容撑开

        固定定位:元素会被锁定在屏幕的某个位置上,网页滚动时保持不动

                  当“position:fixed;”则开启了元素的相对定位

                  开启固定定位后可使用(top、right、bottom、left)属性

        z-index:元素开启定位后可使用,可提升定位元素所在的层级

                  可指定一个整数作为参数,值越大优先级越高,显示在网页上层

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

推荐阅读更多精彩内容