002--css3-flex布局

一、布局

  • 传统的布局:盒子模型
    • content-box--平时普通的盒子模型(向外扩展
    • 平时普通的盒子,添加padding,border,盒子会变大
  • box-sizing:border-box--整体的盒子模型不变大(向内扩展

二、盒子模型用途

  • calc(公式)
  • width:calc(25% 空格- 空格10px)
  • -是为了区别连接符

三、flex布局

  • 父级:display:flex
  • 添加浏览器前缀: -webkit- ;真是工作,postCss插件(自动添加前缀)
  • 水平居中一个盒子
position: absolute;
     left: 50%;
     top: 50%;
     /*margin-left:-100px;*/
     /*margin-top:-100px;*/
     transform: translate(-50%,-50%)
  • 如果父级用了弹性布局,子元素就不需要浮动了
  • 父级身上的其它属性
    -justify-content:center 子元素水平排列方式(center:居中,flex-start:居左 flex-end:居右 space-between:两端对齐 space-around:子元素拉手分布)
  • 垂直排列
    • align-items:子元素的垂直排列
    • center 垂直居中 flex-start 开始 flex-end 底部
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,628评论 0 26
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,518评论 0 6
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,809评论 1 92
  • 阅读目录移动开发基本知识点 calc基本用法box-sizing的理解及使用理解display:box的布局理解f...
    张宪宇阅读 1,568评论 0 1
  • 任昱宁 我喜欢你 我可以为你放弃全世界 一滴水 融入大海里 我的心情有谁知道 看着你帅气的背影 我的心微微颤动...
    夏冰灵阅读 704评论 0 0