• 聊吧
  • 微笑丶斜翅膀说:。。。求最终幻想7核心危机临原声大碟

    版规 发帖 删帖 管理

    最简单、最实用CSS布局技巧总结!

    2017/1/12 18:26:00  人气 209    ◇灌水娱乐专区◇  

    本文目的:给你个大纲,让你快速又简单的搞懂css布局那些事儿!

    (一)浮动
    优点:目前应用还是很广泛,前人把路踩的也很宽啦!哈哈~
    缺点:清除浮动!清除浮动!清除浮动!
    没有垂直居中,没有等高,也没有顺序无关性。
    应用场景:确定现在不需要,以后也不需要垂直居中和等高的布局。
    (二)inline-block
    优点:能垂直居中,当然不需要多个断点一次次的清除浮动。
    缺点:空白!空白!空白!
    没有等高,也没有顺序无关性。
    应用场景:需要垂直居中,但是不需要等高;
    找到让你的团队不抓狂的对付空白的方法。
    (三)*:table
    优点:能垂直居中,还能等高!
    缺点:没有顺序无关性;
    边框问题费劲;
    应对响应式布局能力有限,从 n 列变 1 列ok,但是从 3 列变 2 列就无法做到。
    应用场景:不能用 flexbox,又需要垂直居中 + 等高 + 从 n 列变 1 列的响应式布局。
    (四)Flexbox
    优点: 顺序无关性!对响应式布局能力爆表!
    有垂直居中!还有等高!
    可以在沿 X 轴排列和沿 Y 轴排列间互相转换
    可缩可放,可行可列,还有自适应空间能力
    同一效果可以有多种实现写法
    缺点:学着有点费劲!
    ie9以下都用不了!
    应用场景:不需要兼容ie9以下,需要缩放的时候表现很牛!

    其他一些布局上的知识点:

    使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。在移动设备上显得尤为重要。
    当你设置一个元素为 box-sizing: border-box; 时,此元素的内边距和边框不再会增加它的宽度。
    为了制作更多复杂的布局,需要用到定位 position 属性。
    百分比是一种相对于包含块的计量单位。它对图片很有用:如下我们实现了图片宽度始终是容器宽度的50%。
    媒体查询是“响应式设计(Responsive Design)” 的强大工具!可以让网站在任何情况下显示的很棒!
    使用 meta 视口 可以让你的布局在移动浏览器上显示的更好。

    新的CSS属性:column,可以轻松的实现文字的多列布局。

    . ID650080
    我想的很简单清晨起来你能在我的身边。

    发表回复

       


      通知楼主

    地板

    夜微凉、人尤在?.01-13 00:09
    农业银行

    回复只看TA

    椅子

    夜微凉、人尤在?.01-13 00:09
    去咯去咯哦

    回复只看TA

    沙发

    爱你2014.01-12 19:00
    ~~~

    回复只看TA

    斯凯首页|服务中心|站长信箱|关于斯凯

    ©2016 MRPYX.CN 赣ICP备14004270号