CSS3(5)

最新推荐文章于 2024-07-31 12:16:44 发布
最新推荐文章于 2024-07-31 12:16:44 发布
阅读量337 收藏
点赞数
文章标签： css3 css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_60179418/article/details/122208004
版权

目录

flex

简写属性

老版本

容器

项目

新版本

容器

项目

新版本新增

容器

项目

伸缩规则

flex案例

CSS3媒体查询

媒体类型

媒体属性

关键字

多列布局

flex

CSS3弹性盒子（Flexbox），是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运 行/列。对于许多应用程序，弹性盒子模型提供了对块模型的改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。

1.项目永远排列在主轴的正方向上

2.flex分新老版本两种：

        -webkit-box

        -webkit-flex或flex

3.由于仍有移动端的浏览器内核低，而这些浏览器只支持老版的flex布局

简写属性

flex:1（即flex-basis:0%; flex-grow:1; flex-shrink:1;）

可做等分布局

老版本

容器

1.容器的布局方向

-webkit-box-orient

        控制主轴的选取

值：

horizontal 水平

vertical 垂直

2.容器的排列方向

-webkit-box-direction

        控制主轴的方向

值：

normal        正方向

reverse        反方向

3.富裕空间管理

只决定富裕空间的位置，不会给项目区分配空间

（1）主轴

-webkit-box-pack

若主轴为x轴：

start        在右边

end        在左边

center        在项目两边

justify        在项目之间

若主轴为y轴：

start        在下边

end        在上边

center        在项目两边

justify        在项目之间

（2）侧轴

-webkit-box-align        

若侧轴为x轴：

start        在右边

end        在左边

center        在项目两边

若侧轴为y轴：

start        在下边

end        在上边

center        在项目两边

项目

弹性空间管理

        将主轴上的富裕空间按比例分配到各个项目上

-webkit-box-flex:弹性因子

默认值：0        不可继承

新版本

容器

1.容器的布局方向&容器的排列方向

flex-direction

        控制主轴的选取和方向

属性值效果

row

x轴（从左往右）
row-reversex轴（从右往左）
columny轴（从上到下）
column-reversey轴（从下到上）

2.富裕空间管理

只决定富裕空间的位置，不会给项目区分配空间

（1）主轴

justify-content

值：

flex-start        在主轴的正方向

flex-end        在主轴的反方向

center        在主轴两边

justify        在项目之间

space-between        在项目之间

space-around        在项目两边

(2)侧轴

align-items

值：

flex-start        在侧轴的正方向

flex-end        在侧轴的反方向

center        在侧轴两边

baseline        基线对齐

stretch        等高布局（项目没有高度）

项目

弹性空间管理

        将主轴上的富裕空间按比例分配到各个项目上

flex-grow:弹性因子

默认值：0        不可继承

新版本新增

容器

  • flex-wrap

        控制容器为单行/列还是多行/列。并且定义了侧轴的方向，就新行/列将沿侧轴的方向堆砌

默认值：nowrap        不可继承

值：

nowrap        不换行，没有侧轴

wrap        侧轴方向由上而下（flex-shrink失效）

wrap-reverse        侧轴方向由下而上（flex-shrink失效）

  • align-content

        定义弹性容器的侧轴方向上有额外空间时，如何排布每一个行/列。当弹性容器只有一行/列时无效

多行多列时，侧轴空间的管理（把多行多列看成一个整体）

  • flex-flow

        该属性是设置flex-direction和flex-wrap的简写

默认值：row nowrap        不可继承

控制主轴和侧轴的位置以及方向

项目

  • order

        该属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照order属性的值的升序进行布局。拥有相同的order属性值的元素按照它们在源代码中出现的顺序进行布局

order越小越前

默认值：0        不可继承

  • align-self

        该属性会对齐当前flex行中的flex元素，并覆盖align-items的值，如果任何flex元素的侧轴方向margin值设置为auto，则会忽略align-self

默认值：auto        不可继承

值：

auto

        设置为父元素的align-items值。如果该元素没有父元素，则设置为stretch

flex-start

        flex元素会对齐到cross-axis的首端

flex-end

        flex元素会对齐到cross-axis的尾端

center

        flex元素会对齐到cross-axis的中间。如果该元素的cross-size的尺寸大于flex容器，将在两个方向均等溢出

baseline

        所有的flex元素会沿着基线对齐

stretch

        flex元素将会基于容器的宽和高，按照自身margin box的cross-size拉伸

  • flex-shrink

        该属性指定了flex元素的收缩因子

默认值：1

  • flex-basis

        伸缩规则计数的基准值（默认为width或height）

伸缩规则

  • flex-grow

可用空间 = (容器大小 - 所有相邻项目flex-basis的总和)

可扩展空间 = (可用空间/所有相邻项目flex-grow的总和)

每项伸缩大小 = (伸缩基准值(flex-basis) + (可扩展空间 x flex-grow值))

  • flex-shrink

1.计算收缩因子与基准值乘的总和

        var a = 每一项flex-shrink*flex-basis之和

2.计算收缩因数

        收缩因数 = (项目的收缩因子 * 项目基准值) / 第一步计算总和

        var b = (flex-shrink * flex-basis) / a

3.计算移除空间

        移除空间 = 项目收缩因数 * 负溢出空间

        var c = b * 溢出空间 

flex案例

导航界面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			a{
				text-decoration: none;
				color: gray;
				display: block; 
			}
			#nav > .row{
				display: flex;
				
			}
			#nav > .row > .item{
				flex: 1;
				text-align: center;
			}
			#nav > .row > .item > a:before{
				content: "";
				display: block;
				width: 86px;
				height: 86px;
				margin: 0 auto;
			}
			#nav > .row:nth-child(1) > .item:nth-child(1) > a:before{
				background: url(img/01.png) no-repeat;
			}
			#nav > .row:nth-child(1) > .item:nth-child(2) > a:before{
				background: url(img/02.png) no-repeat;
			}
			#nav > .row:nth-child(1) > .item:nth-child(3) > a:before{
				background: url(img/03.png) no-repeat;
			}
			#nav > .row:nth-child(1) > .item:nth-child(4) > a:before{
				background: url(img/04.png) no-repeat;
			}
			#nav > .row:nth-child(1) > .item:nth-child(5) > a:before{
				background: url(img/05.png) no-repeat;
			}
			
			#nav > .row:nth-child(2) > .item:nth-child(1) > a:before{
				background: url(img/06.png) no-repeat;
			}
			#nav > .row:nth-child(2) > .item:nth-child(2) > a:before{
				background: url(img/07.png) no-repeat;
			}
			#nav > .row:nth-child(2) > .item:nth-child(3) > a:before{
				background: url(img/08.png) no-repeat;
			}
			#nav > .row:nth-child(2) > .item:nth-child(4) > a:before{
				background: url(img/09.png) no-repeat;
			}
			#nav > .row:nth-child(2) > .item:nth-child(5) > a:before{
				background: url(img/10  .png) no-repeat;
			}
		</style>
	</head>
	<body>
		<div id="nav">
			<div class="row">
				<div class="item">
					<a href="javascript:;">天猫</a>
				</div>
				<div class="item">
					<a href="javascript:;">聚划算</a>
				</div>
				<div class="item">
					<a href="javascript:;">天猫国际</a>
				</div>
				<div class="item">
					<a href="javascript:;">外卖</a>
				</div>
				<div class="item">
					<a href="javascript:;">天猫超市</a>
				</div>
			</div>
			<div class="row">
				<div class="item">
					<a href="javascript:;">充值中心</a>
				</div>
				<div class="item">
					<a href="javascript:;">飞猪旅行</a>
				</div>
				<div class="item">
					<a href="javascript:;">领金币</a>
				</div>
				<div class="item">
					<a href="javascript:;">拍卖</a>
				</div>
				<div class="item">
					<a href="javascript:;">分类</a>
				</div>
			</div>
		</div>
	</body>
</html>

CSS3媒体查询

CSS3媒体查询是响应式方案的核心

语法：

        @media 媒体类型 and（关键字）带条件的媒体属性 and 带条件的媒体属性 {

                规则

        }

媒体类型

all        所有媒体（默认值）

screen        彩色屏幕

print        打印预览

媒体属性

width: 浏览器窗口尺寸        （可加max min前缀）

min-width: n px;        >=n px

max-width: n px;        <=n px

device-width:设备独立像素        （可加max min前缀）

pc端：分辨率

移动端：具体看机器参数

device-pixel-ratio:像素比        （必须加webkit前缀，可加max min前缀）

pc端：1

移动端：具体看机器参数

横竖屏切换:

orientation:landscape        横屏

orientation:portrait        竖屏

关键字

only:        和浏览器兼容性有关（老版本浏览器只支持媒体类型）

and:        连接媒体类型或媒体属性，代表“与”的意思

,:        连接多条查询规则，代表“或”的意思

not:        取反

多列布局

column-width:        指定每一栏的宽度（布局第一种方法）

column-count:        指定多少栏（布局第二种方法）

column-gap:        栏目距离

column-rule:        栏目间隔线

____@
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5+CSS3 精美登陆界面源码
01-19
HTML5和CSS3是现代网页开发的两大核心技术，它们为创建功能丰富且视觉吸引人的网页提供了强大的工具。在这个“HTML5+CSS3 精美登陆界面源码”压缩包中，包含了三个精心设计的登录界面，每一个都充分利用了HTML5的新...
CSS3 +HTML5入门到精通
07-01
【标题】"CSS3 +HTML5入门到精通"与【描述】"《HTML+5+从入门到精通》-中文学习教程"所涵盖的知识点主要围绕着Web开发的基础技术——HTML5和CSS3展开，这两者是现代网页设计与开发不可或缺的组成部分。以下是关于这...
CSS3基础学习（弹性盒子）（八）
qq_36802214的博客
08-19 549
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。 弹性容器内包含了一个或多个弹性子元素。 属性 描述 display 指定 HTML 元素盒子类型。 flex-direction 指定了弹性容器中子元素的排列方式 justify-content 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。 align-items
深入理解 WebKit 的 Flexbox 支持：布局优化与实践指南
2402_85762143的博客
07-11 1082
Flexbox（Flexible Box Layout Module）是一种现代的 CSS 布局模式，它提供了一种更加高效的方式来在不同的屏幕尺寸和设备上布局、对齐和分配容器内项目的空间，即使它们的大小未知或是动态变化的。通过理解 Flexbox 的基本概念、掌握其属性的使用，并遵循最佳实践，开发者可以创建出既美观又实用的网页布局。通过本文的深入探讨，读者应该对 WebKit 的 Flexbox 支持有了全面的了解，并能够将其应用于实际的网页布局中。/* 或 column */
少小白学前端——css篇(flex布局)
最新发布
Another_World_Naraku的博客
07-31 1268
其中，采用该样式的元素被称为容器（container），而它的子元素则称为item。容器上默认有两根轴线：水平的主轴（main axis）和垂直的交叉轴（cross axis），子元素item则根据轴线排列。
css3 -webkit-flex 布局
weixin_33743661的博客
04-24 472
2019独角兽企业重金招聘Python工程师标准>>> ...
CSS3起步 11-------弹性盒模型【新版flex以及老版-webkit-box】及骰子布局demo
h1234561234561的博客
04-15 1424
一，flex基本概念 问题一，什么是flex Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。且任何元素都可以成为flex容器，使其内部为flex布局。 块级元素：display: flex; 行内元素：display: inline-flex; 注意点： 01，Webkit 内核的浏览器，必须加上-webkit前缀。 02，设为 Flex 布局以...
CSS布局之flex布局
cocoCodedede的博客
09-01 149
一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } Webkit 内核的浏览器，必须加上-webkit前缀。 .box{ display: -webkit-flex; /* Safari */
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
HTML5以及CSS3demo
05-09
H5新特性以及结合C3的小demo，有利于更好的学习H5开发
html5+css3+JS代码
05-22
HTML5、CSS3和JavaScript是构建现代网页和应用程序的核心技术，它们共同构成了Web开发的三驾马车。在本篇文章中，我们将深入探讨这三种技术的详细知识点，并结合《精通html5+css3+JavaScript页面设计》这本书中的...
flex弹性布局（详解）
wshwsh_的博客
08-09 1万+
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
只需5分钟！一文读懂CSS布局（二） -- flex布局
小丞同学
05-25 4470
一文读懂CSS布局（二） – flex布局 在我们上一篇CSS布局文章中详细的讲解了grid布局，这篇文章就带大家来学习一下flex布局！ 全文思维导图，建议收藏！
-webkit-box-flex 属性 组件长/宽偏差
qq_38321137的博客
11-26 1600
背景：有四个表格，按照田字排列，长宽五五开。同时，有两个表格可能会随着配置项不显示，这个时候，旁边的表格就要填满不显示的表格所在的空白，所以表格的长或宽就要自适应了，就要用到==-webkit-box-flex==属性了。如图。 1、2、3、4四个表格，按需求应该是等高的。实际1、3等宽，比2、4要稍宽，这个是需要，暂且不管。 问题是，2、4等高，但1比3高几个像素。本来几个像素区别不大，但是旁边2、4等宽，一眼就看出参差不齐 这几个表格是这么布局的。在总div里横向排序两个div,两个div不等宽，这两
display:-webkit-flex;
m0_37638508的博客
06-06 5440
为了兼容性，一般两条都写，如下#main { display: flex; display:-webkit-flex; } 这样兼容性更好，使用那一条，交给浏览器去决定，两个效果都是一样的。来自https://segmentfault.com/q/1010000009728277...
千万级数据量怎么做分页查询
lzf的博客
12-12 2898
mysql大数据量使用limit分页，随着页码的增大，查询效率越低下。
Flex布局的坑之一：Webkit 内核的浏览器，必须加上-webkit前缀。
qq_48729513的博客
10-14 1212
Webkit 内核的浏览器，必须加上-webkit前缀。 .box{ display: -webkit-flex; /* Safari */ display: flex; } 注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 八大webkit浏览器 1.Google Chrome 谷歌浏览器 2.Safari浏览器 3.搜狗高速浏览器 4.傲游浏览器3 5.QQ浏览器 6.360极速浏览器 7.世界之窗浏览器(极速版) 8.阿里云浏览器 .
CSS3（三）Animation 入门详解
热门推荐
CSDN前端知识共享
04-17 7万+
Animation 前言 好的前端工程师，会更注重用户的体验和交互。那么动画就是将我们的静态页面，变成具有灵动性，为我们的界面添加个性的一种方式。 下面是七喜的官方主页，它就是很好的富交互样例。鼠标移动到导航栏，就会播放多种动效，给用户一种酷炫的体验。我觉得用户体验，才是前端工程师更加关注的问题，而不是一味追求Javascript的编码技能。 七喜官方网站 A...
微信小程序——flex布局
wct040923的博客
03-21 4612
在一款校园类软件新引进日课表功能，其中的单个盒子就可使用flex布局具体的盒子分布方式可如上划分（其中建筑的方格可最后考虑，因为此图片位于文字的下方，需要用其他定位方式来进行定位，层级调低一个即可）首先需要确定最外层的大格子为父容器，给予flex布局的标志（display:flex）。在框里面的方格时要找准下一个较低的父容器的盒子的划分（在较低的父容器其中也要加入display:flex）。
HTML5与CSS3实战指南
"HTML5 & CSS3 in The Real World.pdf" 这本书深入浅出地介绍了HTML5和CSS3在实际开发中的应用。HTML5是超文本标记语言（HTML）的最新版本，它引入了许多新特性，旨在提升网页的交互性和功能。CSS3则是层叠样式表的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值