css 布局经常使用属性总结

布局目前学习了一下几种html

1.position布局浏览器

      position有absolute relative fixed static inherit等属性值,框架

     absolution:绝对定位,相对于除了static之外的父元素进行定位;ionic

     relative:相对定位,相对于元素正常位置进行定位;ide

     fixed:绝对定位,相对于浏览器窗口进行定位;布局

     inherit:继承父类;学习

     position定位在不少框架布局中都有应用 我就不一一介绍了,自行去看ionic的布局,body采用的就是        position进行布局,好比body大小变成窗口大小能够设置成 top:0;bottom:0;left:0;right:0;flex

     这样一来就能够造成一个总体的布局;好比常见的三列布局 两列布局等 均可以用position去实现;ui

    另外position 用于某一个元素的时候,子元素的offsetParent 是至关于父元素的;没有定位的时候是相       对于根节点的;orm

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须要清除浮动

相关文章
相关标签/搜索