web开发之-前端css(5)（css前端设计）
zhezhongyun 2025-06-15 20:37 54 浏览
显示
控制一个元素的显示方式，我们可以使用display:block;display:inline-block;display:none;其中布局相关的还有两个很重要的属性:display:flex;和display:grid;flex表示弹性盒子，grid表示网格；
布局
我们使用一个三例的布局为例来试一下:
display:flex;
<html>
<head>
<title>css</title>
</head>
<body>
<div style="height: 900px;">
<div style="width: 100%;height:100px;background:grey">我是头部</div>
<div style="display: flex;height: 100%;">
<div style="width: 100px;height: 100%;background:yellow;">左侧</div>
<div style="width:100%;background:burlywood">中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间</div>
<div style="width: 100px;height: 100%;background:yellow;">右侧</div>
</div>
</div>
</body>
</html><html>
<head>
<title>css</title>
</head>
<body>
<div class="container">
<div class="item">flex1</div>
<div class="item">flex2</div>
<div class="item">flex3</div>
<div class="item">flex4</div>
<div class="item">flex5</div>
<div class="item">flex6</div>
<div class="item">flex7</div>
<div class="item">flex8</div>
</div>
</body>
<style>
.container{
display: flex;
width:600px;
height: 900px;
background:grey;
flex-direction: row; /** 设置排列的方式 row 横向 row-reverse 横向反转 column 纵向 column-reverse*/
justify-content: flex-start; /** 设置每一个列的对齐方向 flex-start靠左排开,flex-end靠右排列,center居中排列,space-between左右靠边平均对齐，space-around */
flex-wrap: wrap;/***是否换行 wrap换行,nowrap不换行，wrap-reverse倒序换行*/
align-content: flex-start; /**用于设置各行之间如何对齐*/
align-items:flex-start; /**设置纵向的排列方式*/
}
.item{
width: 100px;
height: 100px;
margin: 10px;
background:yellow;
}
</style>
</html>注：以下的属性设置大家可以去尝试一下。
flex-direction: row; /** 设置排列的方式 row 横向 row-reverse 横向反转 column 纵向 column-reverse*/
justify-content: flex-start; /** 设置每一个列的对齐方向 flex-start靠左排开,flex-end靠右排列,center居中排列,space-between左右靠边平均对齐，space-around */
flex-wrap: wrap;/***是否换行 wrap换行,nowrap不换行，wrap-reverse倒序换行*/
align-content: flex-start; /**用于设置各行之间如何对齐*/
align-items:flex-start; /**设置纵向的排列方式*/
display:grid:
<html>
<head>
<title>css</title>
</head>
<body>
<div style="height: 900px;">
<div style="width: 100%;height:100px;background:grey">我是头部</div>
<div style="display: grid;height: 100%;grid-template-columns: 100px auto 100px;">
<div style="background:yellow">左侧</div>
<div style="background:burlywood">中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间</div>
<div style="background:yellow">右侧</div>
</div>
</div>
</body>
</html>以上我们只是用一个三例布局讲了一下基本的内容，这里布局还有很多属性，大家可以去试一下。一定得看，哪怕你不去手写，也要看一下那些属性的作用，因为这块太重要了，但是属性又太多了，要写起来可劲得写了，大家看不明白的，可以给我留言，我会看到给大家回复的！
浮动
浮动属性float会使元素脱离文档流，使其他内容重新排列，我们常见的文字环绕效果可以使用浮动来实现：
<html>
<head>
<title>css</title>
</head>
<body>
<div>
<div style="width: 100px;height:100px;padding:50px;border:1px solid black;float:left;left:0px;top:0px;">浮动</div>
<div>显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容
显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容
显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容
显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容
</div>
</div>
</body>
</html>我们缩小一下窗口就能看到效果。
注：布局属性很重要，大家一定要去看，去写！
相关推荐
- DNF无色流派还在继续，重力之泉龙战八荒测评
-
作者：礁石22222前言本篇为115级套装天天鉴栏目，来帮助各位读者对于新版本的装备有一个更清晰的认知。115级套装分为了稀有到太初5个品级，所有套装的稀有品级属性是一致的，从神器开始出现分歧。通过积...
- 《暗黑破坏神2重制版》常用符文之语P3
-
大家好我是游戏小白，继续补充一下《暗黑破坏神2重制版》常用的符文之语，主要给大家总结一下前期过渡常用符文之语。没看过之前关于符文之语总结的小伙伴可以翻翻前面的文章。1、钢铁符文之语钢铁造价极低但性价比...
- 魔兽怀旧服:P1一款法系BIS披风，获取方式隐蔽，需完成875个任务
-
在魔兽怀旧服WLK版本，依旧存在许多实用的制造业装备，特别是在P1阶段，制造业装备的耐用性和性价比是最高的，不仅可以帮助玩家快速过渡到团本，甚至还有个别制造业装备超越了团本掉落的强度，除了玩家近期讨论...
- 分手类型——过渡阶段
-
过度阶段一.内涵：类似于反复期，在这个阶段儿可能会出现两种可能性。1.感性想分手，但理性上舍不得。感性上我完全不想跟他相处，但理性上我又觉得他身上有很多对我有利的，对我未来有机会有利的东西。二.理性...
- 《最后的信仰》新手开局保姆级指南职业选择、属性加点与开荒策略
-
《最后的信仰》作为类魂动作游戏，开局选择直接影响开荒体验。本文针对新手玩家，从职业特性、属性分配到武器过渡，提炼高效开荒公式，助你避开陷阱，快速掌握战斗节奏。一、职业选择：斗士/盗贼优先，法系/...
- DNF回血秘方揭示，夏日前买必看篇
-
作者：辽宁吴彦祖前言（省流速览）夏日礼包购买理由：夏日礼包是DNF四大礼包之一（新春&耕耘&夏日&金秋），错过销售日期后续想获得部分道具难度极大。主打暖暖时装、特色补齐、海量打...
- DNF手游:55级粉装有大作用!强化继承大法，可节省大量幸运符
-
55级粉装的自身属性，实际上比较一般，但它可以用来作为“过渡胚子”，能够帮大家节省很多幸运符和宇宙精华！1、强化继承大法因为不断有玩家翻出了55级团本武器，这把武器肯定是当前版本毋庸置疑的版本答案，但...
- 魔兽世界50级职业任务装备如何选择，手把手教学
-
魔兽世界50级职业任务，我们装备应该如何选择，今天分身一个文章告诉你，我们知道BWL开放，也会开放50级的职业任务，那么50级的职业任务，对某些职业来说还是非常重要的，因为给的装备。有的甚至可以用到7...
- 暗牧的T5与散件如何取舍?认准自己的团队地位才最重要
-
牧师作为《魔兽世界》中的老牌职业历经许久已经收获了不少的信仰者，而在笔者看来牧师的最大特色便是风格完全不同的三系专精，在TBC时期，Raid本中的牧师大多为神牧，而戒律牧基本只活跃在竞技场和战场上，而...
- DNF:魂异界传说宝珠曝光!属性设计一般般，男枪第五转职专属
-
魂异界地下城“炒冷饭”，定位新春活动副本，奖励道具覆盖面广，涉及白金徽章、转职书、矛盾材料等等。解锁魂异界次元等级，还能兑换传说宝珠，属性也逐渐浮出水面，却比较鸡肋，“抠门”发挥的淋漓尽致！太“抠门”...
- SwiftUI入门五:让视图和过渡动起来
-
在使用SwiftUI的时候，无论效果在哪里，我们都可以单独的让视图的变化动起来，或者让视图的状态的变化动态化。SwiftUI会为我们处理那些组合的、层叠的以及可中断的动画的复杂性。在这个教程中，我们会...
- DNF:又是变强的一年?2024耕耘礼包提升率揭晓
-
作者：assddde前言国服耕耘礼包的内容已经爆料了。对去年拉满耕耘的奶系职业的而言，今年的提升点为纹章加入了1%的增益量增幅。对C而言，今年换装称号中还加入了buff换装词条。而对于错过了新春套的C...
- 魔兽世界:TBC第一阶段还有必要刷T4套吗，D3套能否过渡到T5套?
-
T4套真的不如D3套？TBC怀旧服P1阶段目前已经走过大半，作为这个阶段装备等级最高的套装T4套装，游戏中有很大争议。比如猎人玩家会选择D3套，直接跳过T4到T5阶段，而法师甚至会选择继续使用T3套装...
- 《异世界勇者》390版本开荒&毕业攻略——狂暴战
-
虽然说这个版本是防战的本命版本，但是从大家催更的频率来看，狂暴战依旧是碾压的优势，今天给大家分享一下390版本狂暴战的毕业游玩思路，希望对你有帮助。今天给大家带来的是手动速刷版的攻略，想要挂机过本需要...
- 飞飞重逢:装备属性卡全攻略,五色神卡助你战力飙升快速获取
-
在游戏中，装备属性卡是提升战斗力的关键道具，它能赋予装备特殊的元素属性，不仅大幅提升攻击力，还能针对不同怪物打出克制伤害。属性卡分为火、水、风、土、电五种元素，每种都能为装备附加独特的攻击特效。那么如...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- opacity 属性 (32)
- transition 属性 (33)