当前位置:首页 > 技术 >

网页设计css布局方式(css制作网页布局代码)

来源:原点资讯(m.360kss.com)时间:2023-02-09 15:47:00作者:YD166手机阅读>>

flex-grow 属性

flex-shrink 属性

flex-shrink 属性定义了子容器弹性收缩的比例。如图,超出的部分按 1:2 的比例从给子容器中减去。此属性要生效,父容器的 flex-wrap 属性要设置为 nowrap

.ele{ flex-shrink: <number>; /* default 0 */ }复制代码

网页设计css布局方式,css制作网页布局代码(13)

flex-shrink 属性

flex-basis 属性

flex-basis 属性定义了子容器在不伸缩情况下的原始尺寸,主轴为横向时代表宽度,主轴为纵向时代表高度。

.ele{ flex-basis: <length> | auto; /* default auto */ }复制代码

网页设计css布局方式,css制作网页布局代码(14)

flex-basis 属性

flex 属性

子元素的 flex 属性是 flex-grow,flex-shrink 和 flex-basis 的简写,默认值为 0 1 auto。后两个属性可选。

该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

align-self 属性

子容器的 align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖父容器 align-items 属性。默认值为 auto,表示继承父元素的 align-items属性,如果没有父元素,则等同于 stretch。

.ele{ align-self: auto; // 继承父元素的 align-items 属性 align-self: flex-start; // 交叉轴的起点对齐。 align-self: flex-end; // 交叉轴的终点对齐。 align-self: center; // 交叉轴的中点对齐。 align-self: baseline; // 项目的第一行文字的基线对齐。 align-self: stretch; // 默认,如果项目未设置高度或设为auto,将占满整个容器的高度。 }复制代码

网页设计css布局方式,css制作网页布局代码(15)

align-self 属性

grid 网格布局

flex 布局虽然强大,但是只能是一维布局,如果要进行二维布局,那么我们还需要使用 grid。

grid 布局又称为“网格布局”,可以实现二维布局方式,和之前的 表格table布局差不多,然而,这是使用 CSS 控制的,不是使用 HTML 控制的,同时还可以依赖于媒体查询根据不同的上下文得新定义布局。

网格布局还可以让我们摆脱现在布局中存在的文档流限制,换句话说,你的结构不需要根据设计稿从上往上布置了。这也意味着您可以自由地更改页面元素位置。这最适合你在不同的断点位置实现你最需要的布局,而不再需要为响应你的设计而担心HTML结构的问题。

和 table 布局不同的是,grid 布局不需要在 HTML 中使用特定的标签布局,所有的布局都是在 CSS 中完成的,你可以随意定义你的 grid 网格。

没有 HTML 结构的网格布局有助于使用流体、调整顺序等技术管理或更改布局。通过结合 CSS 的媒体查询属性,可以控制网格布局容器和他们的子元素,使用页面的布局根据不同的设备和可用空间调整元素的显示风格与定位,而不需要去改变文档结构的本质内容。

浏览器兼容性如下:

网页设计css布局方式,css制作网页布局代码(16)

栏目热文

css div布局的基本步骤(divcss实现几种经典布局详解)

css div布局的基本步骤(divcss实现几种经典布局详解)

DIV CSS标准化布局的优势使用“DIV CSS”对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTM...

2023-02-09 15:09:20查看全文 >>

css100个经典案例(css100个必备技巧)

css100个经典案例(css100个必备技巧)

一、如何写出这样的页面?1、解题:(1)第一行 四大名著 :这个是个大标题。(2)观察全局:2、代码实现:备注:代码部分...

2023-02-09 15:26:02查看全文 >>

门下垂怎么调整视频(木头门下垂怎么调整视频)

门下垂怎么调整视频(木头门下垂怎么调整视频)

综合橙柿互动、新闻晨报、@中国国际航空、航空资源网、网友评论等1月27日下午#国航航班颠簸下坠乘客录视频防不测#话题冲上...

2023-02-09 15:49:48查看全文 >>

门铰链调节(门铰链的调整安装方法)

门铰链调节(门铰链的调整安装方法)

铰链是连接柜门和柜体的重要五金配件,是整个家居行业不可或缺的,每当家里装修的时候你看见木工师傅熟练地进行柜门铰链安装,你...

2023-02-09 15:22:09查看全文 >>

铰链如何调整门的上下(门上下不平门铰链怎么调)

铰链如何调整门的上下(门上下不平门铰链怎么调)

看上面图片上的前凸后平,像不像个飞机模型?所以它又叫“飞机合页”。当然除了这个比较有趣的名字以外,它还有一些更显专业的名...

2023-02-09 15:25:57查看全文 >>

div css布局经典实例(divcss排版布局步骤)

div css布局经典实例(divcss排版布局步骤)

前段时间我们分享了HTML&CSS—DIV CSS布局实例项目前五节课内容,今天继续为大家分享第六节课内容。后续...

2023-02-09 15:54:06查看全文 >>

网页制作css布局(网页设计布局图css代码)

网页制作css布局(网页设计布局图css代码)

大家好,我是三木。这篇文章,替大家汇总了css的布局方式,在每个布局的结尾附上了我认为比较好的文章链接,不仅仅可以当作学...

2023-02-09 15:49:47查看全文 >>

网页排版布局框架图(网页布局图设计工具)

网页排版布局框架图(网页布局图设计工具)

转自公众号:logo设计视觉010203040506070809本文转自微信公众号:logo设计视觉,图片来源网络,版权...

2023-02-09 15:24:30查看全文 >>

css grid布局详细图解(图解css grid 布局)

css grid布局详细图解(图解css grid 布局)

分享兴趣,传播快乐,增长见闻,留下美好!亲爱的您,这里是LearningYard新学苑。今天小编为大家带来华硕前端1...

2023-02-09 15:18:07查看全文 >>

div css布局技巧

div css布局技巧

我们在网页制作中,会有许多的术语例如:CSS、HTML、DHTML、XHTML等等。下面开始使用Div CSS进行网页布...

2023-02-09 15:23:03查看全文 >>

文档排行