当前位置:深圳网站建设公司   /   建站知识   /   网页设计
网站建设中细节如何简单快速布局
发布日期:2020-09-21 作者:非尔思科技 阅读次数:442 字体大小:

  此文由深圳网站建设企业卓越非尔思小编撰写,转载请注明出处。有需要深圳网站建设,高端网站建设,营销型网站建设,企业网站建设,品牌网站建设,以及平面广告设计服务的,请联系卓越非尔思深圳网站建设公司。

  对于Display布局想必大家都有所了解,这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是必要的。今天我们给大家分享一下网站建设中的Display简单快速布局:

  在以往的大多数网页布局中,经常要用到浮动或定位、居中,为了实现这些效果,我们通常会用到CSS中 display属性 + position属性 + float属性来完成,但对于某些布局非常不方便,往往花费不必要的时间而达不到想要的效果,CSS3中新特性display: flex的出现,使我们能节省时间和优化代码,并实现各种页面简单快速布局。Flex是Flexible Box的缩写,意为"弹性布局",它的强大之处在为盒状模型提供更大的灵活性。而且display: flex兼容大多数主流浏览器,有些浏览器使用时需要加上前缀,比如Webkit内核的浏览器,必须加上-webkit前缀。

深圳网站建设企业

  在使用display: flex布局父元素容器为指定弹性盒子时,只需在父元素中设置:display:flex;而父元素中所包含的子元素的属性float、clear和vertical-align是没有效果的;而行内元素容器弹性盒子设置为display:inline-flex;弹性盒子有两条轴,水平的主轴(横轴)和垂直的交叉轴(纵轴)。默认横轴为主轴,默认自左向右;纵轴为辅轴,默认自上而下。

  在设置了display: flex的父元素上,常常会用到的有关弹性布局的属性主要有 flex-direction , flex-wrap , justify-content , align-items , align-content ,这几个属性分别从主轴的方向、是否换行、子元素在主轴上的对齐方式、子元素在交叉轴上的对齐方式、子元素在多根轴线上的对齐方式来规定了子元素在父元素中的弹性,从而来达到所想实现的效果。

  在定义了父元素为弹性盒子后子元素所拥有的属性都有:order,flex-grow,flex-shrink,flex-basis,align-self。order规定了子元素出现的排列循序,值越小,排列越靠前,默认为0;flex-grow定义了子元素的放大比例,默认为0,表示即使父元素还有剩余空间也不放大该子元素。设父元素的宽度为500px,三个子元素宽度分别为100px,如果所有子元素的flex-grow的值为1,则如果父元素有剩余空间,子元素会等比例放大,即剩余出来的200/3分给三个子元素;如果是一个子元素flex-grow为1,一个为2,第三个为3,则三个子元素分别多分到,200*(1/6),200*(2/6),200*(3/6);flex-shrink定义了子元素的缩小比例,默认为1,当父元素空间不足时,如果各个条目的flex-shrink值均为1,则表明等比例缩小,如果为0,则表示不缩小。

  此文由卓越非尔思小编撰写,转载请注明出处。有需要深圳网站建设,高端网站建设,营销型网站建设,企业网站建设,品牌网站建设,以及平面广告设计服务的,请联系卓越非尔思公司。