css 布局常用属性总结

2019独角兽企业重金招聘Python工程师标准>>>

布局目前学习了一下几种

1.position布局

      position有absolute relative fixed static inherit等属性值，

     absolution：绝对定位，相对于除了static以外的父元素进行定位；

     relative：相对定位，相对于元素正常位置进行定位；

     fixed：绝对定位，相对于浏览器窗口进行定位；

     inherit：继承父类；

     position定位在很多框架布局中都有应用 我就不一一介绍了，自行去看ionic的布局，body采用的就是        position进行布局，比如body大小变成窗口大小可以设置成 top：0；bottom：0；left:0;right:0;

     这样一来就可以形成一个整体的布局；比如常见的三列布局 两列布局等 都可以用position去实现；

    另外position 用于某一个元素的时候，子元素的offsetParent 是相当于父元素的；没有定位的时候是相       对于根节点的；

2.display：flex

   flex是弹性布局，具体参考阮一峰写

    http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool；

3.display：table

   显示成表格形式；子元素要设置成display：row ;display：column；vertical-align:middel可以让内容居中；

4.display：inline-block;

   块级预算按照行内元素排列；行内元素一般都是按行排列行内预算又称为内联元素，内联元素如果嵌入了文本的话  对其的基线会改变；主要是line-height和vertical-align搞得鬼；所以只要设置vertical-align可以对齐元素；

5.BFC IFC

   BFC:块级格式化上下文，一般处理 margin重叠  浮动，自适应布局；具体参考

http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

  IFC：内联格式化上下文具体参考

  http://www.jshacker.com/note/3608

6.减少div嵌套，每一层div都要有一定的意义

7.float布局 ：float需要清除浮动

 

转载于:https://my.oschina.net/u/3198493/blog/821687