美文网首页
2019-05-02 css布局套路

2019-05-02 css布局套路

作者: 追夢的蚂蚁 | 来源:发表于2019-05-09 17:17 被阅读0次

原则

  • 不到万不得已,不要写死 width 和 height
  • 尽量用高级语法,如 calc、flex
  • 如果是 IE,就全部写死

口诀

  1. float
    i. 儿子全加 float: left (right)
    ii. 老子加 .clearfix
  2. flex
    i. 老子加 display: flex
    ii. 老子加 justify-content: space-between;

如果宽度不够,可以用 margin: 0 -4px;

.clearfix:after{
    content: '';
    display: block;
    clear: both;
}
.clearfix{
    zoom: 1;
}

1.百分比套路
2.float做平均布局
3.使用calc
4.使用flex
5.响应布局

相关文章

  • 2019-05-02 css布局套路

    原则 不到万不得已,不要写死 width 和 height 尽量用高级语法,如 calc、flex 如果是 IE,...

  • CSS布局套路

    CSS布局 布局套路 浮动布局 宽度百分比浮动布局http://js.jirengu.com/yobiq/1/ed...

  • CSS布局套路

    这篇笔记的目的是记录分别应用float和flex布局的方法。主要是对遇到的问题进行总结。 1.float布局 总结...

  • CSS 布局套路

    一、布局流程 二、布局原则 尽量不要写死width和height 尽量使用高级语法,如calc、nth-child...

  • CSS布局套路

    原则 1.不到万不得已,不要写死 width 和 height 成固定数值2.如果支持 IE8,就用 Float ...

  • 文章收藏

    CSS布局 CSS布局方案整理

  • css进阶专题

    CSS 学习思路宽度与高度(文档流)堆叠上下文icon 全解移动端页面(响应式)Flex 布局布局套路为什么这么多...

  • css

    css基础css选择器css常见样式1css常见样式2CSS布局上CSS布局下flex布局塔防小游戏flex布局青...

  • css flex布局详解

    css flex布局详解 css flex布局详解1css flex布局详解2

  • 经典CSS布局:双飞翼和圣杯布局

    圣杯布局 HTML CSS 双飞翼布局 HTML CSS Flex布局 HTML和圣杯布局一样CSS

网友评论

      本文标题:2019-05-02 css布局套路

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