布局问题:绝对定位 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。
也可以用下面的代替:
布局和方法更换:最笨的方法。