内联元素、visibility、display、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:元素开启定位后可使用,可提升定位元素所在的层级

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容