Html+Css前端布局设置99%的人都知道,你知道吗?

2020-07-23 01:06| 发布者:

所谓页面布局指的是在页面中进行大的模块划分。在大屏中布局一般有两种风格:管理系统类和网页类。

管理系统类,一般比较平实,古朴,偏实用。大部分时候是圣杯布局或其简化。网页类,一般比较艳丽、布局的变化性较大,没有一定的设计原则。无论什么样的布局风格,其技术是完全一样的。在默认情况下,页面中的所有元素都会以流的方式进行布局,称为流布局。流布局的特点是:从上到下,从左到右;元素占位,无位换行。 流布局只是默认布局,这样的布局无法应用在实际项目中。项目中往往使用HTML和CSS共同作用,创建新的布局。项目中常用的布局方式主要有三种:传统布局、flex布局、grid布局。

float 属性是对块级元素的设定,最早的设计目的是用于文字在图片周围的环绕显示。这种文字环线的效果主要是由于浮动元素脱离了标准文档流,使其下面的元素上移,从而占据的原来浮动元素的位置而造成的。

float:left,表示失去块级元素特征,元素自身向左浮动,直到遇上左边的其他元素,或遇到父容器为止。 float:right,表示失去块级元素特征,元素自身向右浮动,直到遇上右边的其他元素,或遇到父容器为止。

对于其父元素来说,元素浮动之后,脱离了当前正常的文档流,所以它也无法撑开其父元素,造成父元素的塌陷。当兄弟元素为块级元素(非浮动),该元素会忽视浮动元素而占据它的位置,并且元素会处在浮动元素的下层(而且无法通过z-index属性改变他们的层叠位置),但它的内部文字和其他行内元素都会环绕浮动元素。*需要注意的是:在IE 6、7下则分别都有不同的表现,IE 6、7中,该兄弟元素会紧跟在浮动元素的右侧,并且在IE6中两者之间留有3px的空隙。这就是著名的“IE 3px bug”。

默认情况下块级标签的范围是由他里面的标准文档流的内容决定。浮动之后的元素是不属于标准文档流的,这时就无法撑开块级标签的高度。 块级标签就变成一个没有高度的线。此所谓塌陷或坍缩。 解决方法:

在所有的浮动元素后面加一个空的div元素,设置style=clear:both。该方法的适用范围更大,包括绝对定位都是可以使用该方法。在父div元素中,设置overflow:hidden,从而触发了浮动元素的父元素的BFC,使其在计算高度的时候包含浮动元素,从而防止出现高度塌陷的问题。注意:默认情况下,只有body标签具有BFC特性。可以使用overflow:hidden设置,触发其他块级标签的该种特性。

属性值 说明 visible 默认值。内容不会被修剪,会呈现在盒子之外 hidden 内容会被修剪,并且其余内容是不可见的 scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余内容(滚动条) auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容

使用浮动布局的难点是高度自适应问题,这往需要借助JavaScript进行即时刷新操作。可以利用如下代码获取可视部分的高度。如下:

static,默认值,不使用专门的定位技术,元素跟随标准文档流定位。relative,相对定位absolute,绝对定位fixed,固定定位,一种特殊的absolute,fixed总是以body为定位对象的,按照浏览器的窗口进行定位。 relative属性值1,部分的脱离的标准的文档流,其对父级容器及相邻的容器都没有影响。2,其在标准文档流中的占位依然存在。3,其定位方式是相对于其原来的在标准文档流中的位置进行定位(偏移),如果没有对某个相对定位的元素进行left、right、top、bottom定位,则该元素保持在原位置不变。4,激活了left、right、top、bottom、z-index属性。

1,完全脱离标准的文档流,对其他元素的定位不会造成任何影响。此时对象不具有外边距,但仍有内边距和边框

3,其定位方式是针对其也设置了relative或absolute取值的祖先容器进行定位的,如果没有这样的父容器,则针对body元素(浏览器窗口)进行定位。如果没有对某个绝对定位的元素进行left、right、top、bottom定位,则该元素保持在原位置不变。4,激活了left、right、top、bottom、z-index属性。

z-index属性,元素层次属性该属性在标准的文档流中是无效的。该属性取值整数,默认值为0。设置了position属性的值为relative和absolute的元素,可以设置该值。该属性值大的元素,位于该属性值小的元素的上方。

Flexible Box缩写,意为“弹性盒子”。flex布局是一维布局方式,同时在一定程度上兼顾二维。腾讯公司的微信小程序就是使用flex布局。微信小程序本质也是网页,其大部分内容与标准的H5兼容。

CSS3引入的弹性盒子模型,提供了一种更加方便的一维布局方式。CSS3引入的弹性盒子布局的主旨是:让容器有能力让其子项目改变宽度、高度甚至顺序。以最佳的方式填充可用空间,以适应不同的设备和屏幕。弹性盒子模型一般说来有三种,分别是:旧版本、混合版本和新版本。本文只介绍新版本。

display: flex | inline-flex将一个容器设置为块伸缩容器或者是内联伸缩容器,这是新弹性盒子的设置方式。

flex-direction: row | row-reverse | column | column-reverse创建主轴、定义伸缩流方向

flex-start,靠前对齐flex-end,靠后对齐center,居中对齐space-between,两端对齐space-around,间隔相等对齐5,align-items

设置容器中每个项目的交叉轴对齐方式,所谓交叉轴指的是与主轴垂直方向上的辅助轴。其取值可能为如下:

当交叉轴有多根轴线时的对齐方式,如果只有一根轴线,该属性无效。该属性的取值与justify-content属性一致。

order属性定义容器中项目顺序,数字越小,越往前。默认值是0,可以为负值。如果只按元素排列顺序的话,order属性可以省略。

flex-grow: number(默认值为0),默认值时,就算就多余的空间也不扩展,数字本身指的是可伸缩部件的扩展比率。

CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素)。 wrapper 是实际的 grid(网格),items 是 grid(网格) 内的内容。

display属性有三个可能的值:grid、inline-grid、subgrid。 其中subgrid属性值指的是:网格容器本身是另一个网格的网格项(即嵌套网格)。其行/列的大小继承自它的父级网格容器,而不是自己指定的。 注意:在网格容器上使用column、float、clear、vertical-align不会产生任何效果。

使用grid-template-row和grid-template-column属性。 设置行和列(在容器中定义) grid-template-columns,该属性的值可以有多个,grid容器需要有几列,就设置几个值。其值可以是px值,也可以是百分数。 grid-template-rows,设置行属性,grid容器需要有几行,就设置几个值。

当grid-template-columns属性中的某个值定义为auto时,容器会在宽度上充满所有空间;被定义为auto列会充满除了已定义宽度的列之外的所有空间。 由于根元素的height的特点,在grid-template-rows属性上使用auto无法达到以上的效果。当然如果同时对html、body和容器元素设置上height:100vh,也可以实现高度的自动填充。

grid-column-start,grid-column-end grid-row-start,grid-column-end 以上属性的取值都一个正整数,没有任何单位。该正整数指的列或者行的边线,即所谓的网格线。 网格线(Grid Line)是构成网格结构的分界线。它们既可以是垂直的(“列网格线(column grid lines)”),也可以是水平的(“行网格线(row grid lines)”),并位于行或列的任一侧。

可以给网格线定义名称,而且很显然的,一条网格线可以有多个名称。如: row1-end和row2-start,实际指的都是第二个条网格线。 网格线还可以导出如下定义: 网格轨道(Grid Track)是两条相邻网格线之间的空间。你可以把它们想象成网格的列或行。 网格单元格(Grid Cell)是两个相邻的行和两个相邻的列网格线之间的空间。是Grid(网格) 系统的一个“单元”。 网格区域(Grid Area)4条网格线包围的总空间。一个网格区域(Grid Area)可以由任意数量的网格单元格(Grid Cell)组成。

使用grid-template-areas属性与grid-area属性,定位和调整items的大小,会更简单一些。 grid-area属性,用于给每个item起名字。这个名字不影响item原的id或class。 grid-template-areas属性用于在不同的名字按已经定义好的网格放入相应的位置即可。

以上代码描述了一个三行两列的网格,第一行描述了名叫header的item占据第一行两列的位置。第二行描述了名叫nav和section的两个item分别占据了第二的第一列和第二列。

以上代码可以缩写为grid-column:1/4; 以上代码指定某个grid容器中的元素,从第一个列边线到第三个列边线。也就是该元素在grid容器中占据两列的空间。

<
>
昆明腾瑞网络有限公司积极引导客户理解互联网对企业的品牌价值,并充分把握中小型企业信息化管理的个性化需求,提供真正有价值的信息化服务产品,让企业在全球一体化的经济体系下的竞争中处于不败之地,不仅深谙互联网核心技术的开发,而且对全球互联网市场和IT行业的大势均有精确的把控。

联系我们

昆明龙泉路实力壹方城6栋1702号

0871-65125379(服务时间:9:00-18:00)

3568089682@qq.com

在线咨询 官方微信官方微信

网站建设 微信开发 售后服务 咨询电话0871-65125379 返回顶部
返回顶部