css基础篇1: 布局

布局问题：绝对定位 position ？

        inherit: 父元素中继承。

        static: 默认，正常元素流中。不存在 top、bottom、left、right、z-index 这些。

        absolute: 绝对定位，相对 static 外的第一个父级元素定位。

        relative: 相对定位，相对于正常位置定位。

        fiexed: 绝对定位，相对 浏览器窗口／frame 定位。

布局问题：css 的经典布局有哪些？

        Stickyfotter。就是header、content、footer 布局。

布局问题：如何水平、垂直居中？

        水平居中：float、position、flex、calc。

        垂直居中：position、flex、calc、transform

布局问题：外层div 高度固定，里面有两个div,上下排列，里面的第一个div高度不固定，里面的第二个div高度要撑江整个div？

        

        一句话解答：外层设置 flex，方向 为 column, 里层第一个高度固定，里层第二个设置 flex: 1。

布局问题：div 分成三等分？

        

      一句话解答：外层设置 flex ，里面用 calc（100%／3)。

布局问题：ul 下面有 5个 li ，每个 li 有 marging-right:20px, 最后一个 li 没有边距 。求均分？

    效果图如下 ：

    布局如下：

    方法：flex 布局

                

                一句话总结：外层设置 flex,里面的 li 设置 宽度 calc(100%/5),右边距，box-sizing，最后一个 li设置边距为 0。

                也可以用下面的代替：

                

        布局和方法更换：最笨的方法。