前端常用布局_前端常用布局有哪些-优快云博客

order:定义子元素的排列顺序，数值越小，排列越靠前，默认为0
flex-grow:定义子元素的放大比例，默认为0，即如果存在剩余空间，也不放大；如果所有子元素的flex-grow属性为1，则它们将等分剩余空间
flex-shrink:定义子元素的缩小比例，默认为1，如果空间不足，该子元素将缩小；如果所有子元素的flex-shrink属性都为1，当空间不足时，都将等比例缩小
flex-basis：定义了在分配多余空间之前，子元素占据的主轴空间，默认值为auto
flex:前三者的缩写，默认值为 0 1 auto。

三、自适应布局（bootstrap）

自适应布局分别为不同屏幕不同分辨率定义布局，即是创建多个静态页面，每个静态页面对应一个屏幕分辨率的一个范围内。在改变不同的屏幕分辨率可以切换到不同的静态布局上，但是布局中的元素位置会发生改变，但是在每个静态布局中，页面中的元素不会随着窗口大小的调整发生变化。使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。

四、流式布局（fluid）

流式布局的布局方式是页面的元素的宽度按照屏幕的分辨率进行适配的调整，但是整体布局不变。

五、响应式布局

响应式布局是css3增加的新布局方式。

设计方法： 媒体查询+流式布局。通常使用@media媒体查询，和网格系统配合相对布局单位进行布局，实际上说白了就是综合响应式等技术通过css给单一网页不同设备分辨率返回不式时的技术。

六、浮动布局（float）

浮动布局进行调用浮动属性改变页面中元素的位置，浮动布局应该是目前各大网站用的最多的一种布局方式

七、定位布局（position）

static 静态定位： HTML元素的默认值，即没有定位，元素出现在正常的流中。

fixed 固定定位： 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠。

relative 相对定位： 相对定位元素的定位是以自身为参照物。对象不可层叠、不脱离文档流，移动相对定位元素，但它原本所占的空间不会改变。通过 top,bottom,left,right 定位。

absolute 绝对定位： absolute 定位使元素的位置与文档流无关，因此不占据空间。元素和其他元素重叠。通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位。

sticky 粘性定位 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。