美文网首页
1.4.6布局

1.4.6布局

作者: 每日活菌 | 来源:发表于2016-03-06 19:41 被阅读0次

    布局简介、display(水平居中、居中导航)、position(轮播头图、固定顶栏、遮罩、三行自适应布局)、float(两列布局)、flex(三行两列自适应)

    布局:浏览器将元素以正确的大小摆放在正确的位置上。
    布局:元素摆放的模式

    1.4.6.1 display

    display

    • 设置元素的显示方式
    • display:block|inline|inline-block|none

    display:block

    • 默认宽度为父元素的宽度
    • 可设置宽高
    • 换行显示
    • 默认display:block元素-div,p,h1-h6,ul,form

    display:inline

    • 默认宽度为内容宽度
    • 不可设置宽高
    • 同行显示
    • 默认display:inline元素-span,a,label,cite,em,…

    display:inline-block

    • 默认宽度为内容宽度
    • 可以设置宽高
    • 同行显示
    • 整块换行
    • 默认display:inline-block元素-input,text area,select,button,…

    display:none

    • 设置元素不显示
    • 与visibility:hidden区别

    1.4.6.2 position

    定位

    • position-设置定位方式
    • top,right,bottom,left,z-index-设置位置

    top/right/bottom/left

    设置元素边缘距离参照物边缘的距离

    z-index

    在z轴上的排序
    z-index:-1
    z-index:0
    z-index:1

    z-index栈

    position

    • position:static|relative|absolute|fixed
      相对,绝对,固定

    position:relative

    • 仍在文档流中
    • 参照物为元素本身
    • 使用场景,绝对定位元素的参照物

    position:absolute

    • 默认宽度为内容宽度
    • 脱离了文档流
    • 参照物为第一个定位祖先/根元素

    position:fixed

    • 默认宽度为内容宽度
    • 脱离文档流
    • 参照物为视窗

    1.4.6.3 float

    浮动

    • float:left|right

    • 默认宽度为内容宽度

    • 脱离文档流

    • 向制定的方向一直移动

    • float的元素在同一文档流中

    • 半脱离文档流
      对后续的元素,脱离文档流。对后续的内容,在文档流。
      元素会重叠,内容不会重叠

    clear

    clear:both|left|right

    • 应用与浮动元素的后续元素
    • 应用与块级元素

    clear

    • 空白元素
    • clearfix

    1.4.6.4 flex

    弹性布局

    flex terms

    创建

    相关文章

      网友评论

          本文标题:1.4.6布局

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