尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
DAY7 CSS184-196
DAY1→HTML1-29DAY2→HTML29-53DAY3→HTMLCSS53-79DAY4→CSS79-108DAY5→CSS108-133DAY6→CSS133-147182-18361.伸缩盒模型一简介1轻松控制元素分布方式元素对齐方式元素视觉顺序…2新的布局方案flex布局3传统布局displaypositionfloat二容器与项目box-sizing: border-box;设定的宽和高为盒子的最终大小1伸缩容器给元素设置display: flex;或display: inline-flex该元素就变为了伸缩容器2伸缩项目伸缩容器的所有子元素不包括孙子元素等后代伸缩项目会全部块状化三主轴与侧轴主轴伸缩项目沿着主轴排列主轴默认是水平的默认方向为左→右侧轴与主轴垂直的就是侧轴侧轴默认是垂直的默认方向为上→下四主轴方向flex-directio:常用值row主轴方向水平从左到右默认值row-revers主轴方向水平从右到左column主轴方向垂直从上到下column-revers主轴方向垂直从下到上注改变了主轴的方向侧轴方向也随之改变五主轴上的换行方式flex-wrap:常用值nowrap默认值不换行wrap自动换行wrap-reverse反向换行六复合属性flex-flow写法flex-flow: row wrap七主轴对齐方式justify-content:常用值flex-start主轴的起始位置flex-end主轴的结束位置flex-center中间对齐space-around项目均匀的分布在一行中项目与项目之间的距离是相等的且是项目距边缘的二倍space-between项目均匀的分布在一行中项目与项目之间的距离是相等的且项目距边缘无距离space-evenly项目均匀的分布在一行中八侧轴对齐方式1一行align-itemsstretch默认值如果伸缩项目未设置高度将占满整个容器的高度flex-start侧轴的起点对齐flex-end侧轴的终点对齐center侧轴的中点对齐baseline伸缩项目的第一行文字的基线对齐2多行align-contentstretch默认值如果伸缩项目未设置高度将占满侧轴flex-start侧轴的起点对齐flex-end侧轴的终点对齐center侧轴的中点对齐space-around项目均匀的分布在侧轴中项目与项目之间的距离是相等的且是项目距边缘的二倍space-between项目均匀的分布在侧轴中项目与项目之间的距离是相等的且项目距边缘无距离space-evenly项目均匀的分布在侧轴中九元素水平垂直居中1方案一display:flex;justify-content:center;align-itmes:center;2方案二子元素写上margin:auto;十基准长度flex-basis: auto/30px设置的是主轴方向的基准长度会让宽度和高度失效注主轴横向宽度失效主轴纵向高度失效十一伸缩性_伸flex-grow定义伸缩项目的放大比例默认为0即纵使主轴存在剩余空间也不拉伸放大例子下面代码为inner1占了六分之一inner2占了六分之二inner3占了六分之三.inner1{flex-grow:1;}.inner2{flex-grow:2;}.inner3{flex-grow:3;}十二伸缩性_缩flex-shrink定义了项目的压缩比例默认为1即如果空间不足该项目将会缩小例子三个收缩项目宽度分别为200px300px200px它们的flex-shrink值分别为123若想刚好容下三个项目需要总宽度为700px但目前容器只有400px还差300px所以每个人都需要收缩一下才可以放下具体收缩值这样计算1.计算分母200×1300×2200×314002.计算比例项目一200×1/ 1400比例值1项目二300×2/ 1400比例值2项目三200×3/ 1400比例值33.计算最终压缩大小项目一需要收缩比例值1 × 300项目二需要收缩比例值2 × 300项目三需要收缩比例值3 × 300十三flex复合属性复合了flex-frowflex-shrinkflex-basis三个属性默认值为0 1 auto若写flex: 1 1 auto则可简写为: flex: auto若写flex: 1 1 0则可简写为: flex: 1若写flex: 0 0 auto则可简写为: flex: none若写flex: 0 1 auto则可简写为: flex: 0 auto即flex初始值十四项目排序与单独对齐1项目排序order默认值为0数值越小项目越靠前2单独对齐align-self默认值为auto表示继承父元素的align-items十五布局html,body{width:100%;height:100%;}设置背景图为整个网页background-size: cover;设置边框圆角border-radius: 8px;
RELATED

相关推荐

Oracle 11g实例脚本运行全攻略:从环境配置到排错调优

Oracle 11g实例脚本运行全攻略:从环境配置到排错调优

简介:《Oracle 11g从入门到精通(第二版)》实例源程序包,面向Oracle初学者与需要系统提升数据库技能的开发、运维人员,覆盖19个章节的配套代码,帮助读者通过动手实践理解数据存储、查询优化、事务处理及备份…

📅 2026/10/9 14:05:22
数据库课设实战:学生体质健康管理系统SQL建模与查询优化

数据库课设实战:学生体质健康管理系统SQL建模与查询优化

简介:这是一套面向计算机相关专业学生的数据库课程设计完整交付包,以学生体质健康管理系统为选题,适合作为期末大作业、课程设计或毕业设计的参考范例,也便于初学者通过实战理解数据库设计与应用开发的完整流程。压缩包共包含5个文…

📅 2026/10/9 14:05:22
斐波那契数列从兔子问题到1000内列表:四种解法与工程实践

斐波那契数列从兔子问题到1000内列表:四种解法与工程实践

1. 从一对兔子说起:斐波那契数列到底在描述什么很多人第一次听到“斐波那契数列”这五个字,脑子里冒出来的是一串冷冰冰的数字:1、1、2、3、5、8、13、21……然后就是无穷无尽的递推公式和编程题。但如果你真的回到这个数列被提出的原始场景&…

📅 2026/10/9 14:05:22
MORE NEWS

更多资讯

📰

CNN+Transformer混合模型:运动想象脑电分类实战与避坑指南

简介:这份资源是面向计算机、通信、人工智能、自动化等专业学生与从业者的运动想象脑电信号分类Python源码,采用CNN与Transformer结合的框架,通过卷积网络提取局部时间空间特征,再借助Transformer建模长程依赖,可用于毕…

📰

基于OpenCV手势识别的打地鼠游戏:从肤色分割到交互实现

简介:一套完整的人机交互实验项目,面向学习OpenCV、Mediapipe手势识别及交互方式对比的开发者。项目以打地鼠游戏为载体,通过识别食指与中指骨节点位置判定手势,实现光标操作与打击动画地鼠,代码含详细注释。压缩包内共…

📰

Win8/Win10免安装GSQL绿色简版:解压即用与避坑指南

简介:GSQL是一款面向Windows 8与Windows 10的轻量级数据库管理系统,以免安装绿色简版形式提供,解压即可启动服务,适合开发调试、教学演示及临时测试等不希望改动系统配置的场景。压缩包共234个文件,约16.43MB&#xff…

📰

Java多前端心理健康评估系统:量表计分引擎与多端适配实战

简介:这是一套面向高校计算机专业学生与Java Web开发学习者的大学心理健康评估系统完整源码,适合作为课程设计、毕业设计或实战练手项目。系统以Java后端为核心,融合JavaScript、HTML、CSS与PHP等前端技术,构建了涵盖用户登录、身…

📰

卡内基梅隆大学研究者用TaoToken统一Key通道复现“以小博大”智能体路由实验

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📰

MongoDB聚合管道实战:从$match到$group的常用阶段精讲

做过后端开发的,迟早要和MongoDB的聚合操作打交道。我第一次接触聚合框架时,面对一堆 $match、$group、$sort、$project 完全不知道从哪下手,直到后来接手一个订单统计需求,把常用阶段挨个用了一遍,才算真正开窍。这篇…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬