首页 > 代码库 > 布局学习笔记

布局学习笔记

布局即将元素以正确的大小摆放在正确的位置
其中重要的属性有:Display:设置元素的显示方式,它有以下几个值(不完全)
        block:默认宽度是父元素的宽度 可以设置宽高 换行显示
        inline:默认宽度是内容宽度 不可设置宽高 同行显式
        inline-block:默认宽度为内容宽度 可以设置宽高 同行显式 整块换行(后续元素的宽度如果超出范围,则会整块换行)表单元素默认是这个属性
        none:设置元素不显示
还有属性position(定位):它可以实现元素叠加,设置定位方式,主要配合使用的属性有:top right bottom left z-index 设置位置
其中z-index是设置元素在Z轴上的排序,需要注意的是父元素中的Z-index权重总是要比子元素的Z-index要大的。position的值有(不完全):
        static(默认):没有定位
        relative:仍在文档流中 参照物为元素本身的位置 使用场景;绝对定位的参照物
        absolute:默认宽度是内容的宽度 脱离文档流 参照物是第一个定位祖先或者根元素
        fixed:默认宽度是内容宽度 脱离文档流 参照物是视窗(浏览器窗口))(IE6及以下不支持)
属性float:它默认宽度也是内容宽度,会脱离文档流,向指定的方向一直移动。但要注意的是多个float的元素在同一文档流中,而且其实,float元素是半脱离文档流的:对于元素是脱离文档流的即它后续的元素会占据它之前的位置,但对内容是在文档流的,但内容会围绕着它,不会被它覆盖。
与属性float经常配合使用的是clear:both|left|right。清楚浮动时应用于浮动元素的父元素中的最后,即浮动元素后面,经常给父元素添加clearfix伪类after:内容为:                      {content:‘.‘;display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
2009年,W3C提出了一种新的方案----Flex布局,即弹性布局,使用它可以简便地实现各种响应式页面布局。

关于flex我们首先需要认识几个名词:flex container:弹性容器;直接子元素flex item:弹性子元素; main axis:主轴;cross axis:副轴

使用display:flex即可设置flex布局容器。

学习flex布局我们需要关注三个方面,即方向、弹性和对齐。

关于方向的属性有:
       flex-direction:row|row-reverse|column|column-revers。它设置的是横着排还是竖着排

       flex-wrap:no-wrap|wrap|wrap-reverse。它设置的是当flex-item超出容器范围时允不允许换行,怎样换行。

       flex-flow:<‘flex-direction‘>||<‘flex-wrap‘>。它是以上两个属性的简写形式,即一次性设置以上两个属性。这个是推荐的写法

       order:<interger> 初始值为0(顺序值)。它设置直接子元素的排列顺序,数值越小,排列越靠前。

关于弹性的属性有:

       flex-basis:main-size|<width>。它设置flex item的初始宽高

       flex-grow:<number>默认值是0,它设置元素能获得的空余空间的比例,此时计算元素的宽度公式为:元素宽度=flex-basis+flow-grow/sum(flow-grow) * remain

       flex-shrink:默认值为1,它设置的是当空间不足时,如何按比例缩小

       flex:<‘flex-grow‘>||<‘flex-shrink‘>||<‘flex-basis‘> 初始值分别为0 1 main-size 它是以上三个属性的简写形式,即一次可以设置三个属性,是推荐写法。

关于对齐的属性有:

       justify-content:flex-start|flex-end|center|space-between|space-around。它是设置项目在主轴上的对齐方式

       align-items:flex-start|flex-end|center|space-between|space-around。它是设置项目在副轴上的对齐方式

       align-self:auto|flex-start|flex-end|center|baseline|stretch。它设置单个flex item在cross-axis方向上对齐方式

       align-content:ex-start|flex-end|center|space-between|sapce-around|stretch。设置cross-axis方向上行对齐方式(多行情况)

       注意:flex ie9及以下不支持,目前主要用于移动web页面中。

       感谢老范提供的课程,谢谢。

 

布局学习笔记