CSS3新特性应用之结构与布局
时间:2022-04-22
本文章向大家介绍CSS3新特性应用之结构与布局,主要内容包括一、自适应内部元素、二、精确控制表格的列宽、三、根据兄弟元素的数量来设置样式、四、一幅背景,定宽内容居中、五、垂直居中、5.2、视口垂直居中 + translate、5.3、flexbox + margin:auto、六、紧贴底部的页脚、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
一、自适应内部元素
- 利用width的新特性min-content实现
- width新特性值介绍:
- fill-available,自动填充盒子模型中剩余的宽度,包含margin、padding、border尺寸,他让非block元素也可实现宽度100%;
- max-content:假设容器有足够的宽度,足够的空间,此时,所占据的宽度就是max-content,与display为inline不一样,max-content就像white-space:nowrap一样,不会换行的。
- min-content:采用内部元素最小宽度值最大元素的宽度作为最终容器的宽度,最小宽度:替换元素,如:图片的最小宽度就是图片呈现的宽度,文本元素,如果全是中文就是一个中文的宽度,如果包含英文,默认为英文单词不换行的宽度。
- fit-content:实现浮动元素的水平居中,因默认情况下浮动的元素元素是不能通过margin:auto实现水平居中的,这时就需要fit-content辅助实现。
- width新特性值介绍:
- min-content与max-content示例代码:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.figure01{
width: min-content;
margin: auto;
}
.figure01 img{
width: 210px;
}
.figure02{
width: max-content;
margin: auto;
}
.figure02 img{
width: 210px;
}
</style>
</head>
<body>
<figure class="figure01" >
<img src="../img/cat.png" alt="">
<p>标签规定独立的流内容(图像、图表、照片、代码等等)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。</p>
</figure>
<figure class="figure02" >
<img src="../img/cat.png" alt="">
<p>标签规定独立的流内容(图像、图表、照片、代码等等)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。</p>
</figure>
</body>
- fit-content示例代码:
<head>
<meta charset="UTF-8">
<title>float的fit-conent的实用</title>
<style>
.wrap{
}
.wrap ul{
margin: auto;
list-style: none;
width: fit-content;
}
.wrap ul li{
float: left;
margin: 0px 10px;
background: greenyellow;
padding: 4px;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li>one</li>
<li>two</li>
<li>thr</li>
<li>fou</li>
</ul>
</div>
</body>
二、精确控制表格的列宽
- 利用table的table-layout属性设置为fixed值来实现,但需要width设置为100%
- 代码如下
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.divWrap{
width: 400px;
border: 1px solid red;
}
.wrap{
table-layout: fixed;
width: 100%;
}
.wrap td.one{
width: 20%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wrap td.two{
width: 80%;
}
</style>
</head>
<body>
<div class='divWrap' >
<table class="wrap" >
<tr>
<td class='one' >one</td>
<td class='two' >這個中文假文產生器每次會產生由五個段落、每段六至八個假句組成的假文。所以,假句其實是假文的基礎。為了讓假句在視覺質地上接近真句,我準備了一個由 128 個真句組成的語料庫。每次要產生假句時就從中隨機挑選一個,然後逐字替換為隨機選出的筆畫數相同、但一般人不可能認得的低頻字。因為一般人不可能認得,實際上也算是假字了這個中文假文產生器每次會產生由五個段落、每段六至八個假句組成的假文。所以,假句</td>
</tr>
<tr>
<td class='one' >這個中文假文產生器每次會產生由五個段落、每段六至八個假句組成的假文。所以,假句</td>
<td class='two' >
<img src="../img/cat.png" alt="">
</td>
</tr>
</table>
</div>
</body>
三、根据兄弟元素的数量来设置样式
- nth-last-child和only-child、nth-child的应用
- only-child:选择只有一个子元素的元素
- nth-child:选择第几个元素
- nth-last-child:选择第几个元素,从最后一个开始计数
- odd和even:表示奇数和偶数元素
- (an+b):n表示下标从0开始,b是偏移量,(3n+0):表示3的倍数元素
- nth-of-type和nth-last-of-type的应用
- odd和even:表示奇数和偶数元素
- (an+b):n表示下标从0开始,(3n+0):表示3的倍数元素
- (-n+b):表示选择小于等于b的元素
- nth-child与nth-of-type的区别
- nth-child是以同级第一个元素开始计数
- nth-of-type是以同级指定类型的第一个元素开始计数
- 代码:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap{
width: 200px;
}
.wrap p:nth-child(2), .wrap p:nth-child(4){ /*从第一个元素开始计数*/
background: red;
}
.wrap p:nth-of-type(1), .wrap p:nth-of-type(2){ /*从第一个p元素开始计数*/
color: lightyellow;
}
</style>
</head>
<body>
<div class="wrap">
<h1>标题数据</h1>
<p>第一行内容(第一个P标签)</p>
<span>这是一个span</span>
<p>第二行内容(第二个P标签)</p>
</div>
</body>
- nth-last-child选择指定兄弟元素
li:first-child:nth-last-child(n+6):nth-last-child(-n+8)
分析:- first-child:选择第一个元素
- nth-last-child(n+6):选择从最后一个开始计数的,下标大于6的元素
- nth-last-child(-n+8):选择从最后一个开始计数的,下标小于8的元素
- 选择有6 - 8个兄弟元素的li。
- 示例代码:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
list-style: none;
overflow: hidden;
}
ul li{
float: left;
padding: 4px 10px;
border-radius: 4px;
background: greenyellow;
margin: 0px 2px;
}
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4)~li{
background: indianred;
}
li:first-child:nth-last-child(n+6):nth-last-child(-n+8),
li:first-child:nth-last-child(n+6):nth-last-child(-n+8)~li{ /*匹配li有6,7,8个的ul*/
background: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
四、一幅背景,定宽内容居中
- 可以利用margin:auto实现,但需要多一层html结构
- 利用calc可以少一层html结构,且Css更简洁
- calc(50% - 300px): -之间必须要有空格,否则会解析出错
用容器一半的宽度 - 内容块一半的宽度
- 容器的宽度可以不设置为100%,因为容器的最小宽度都为内容的宽度
- 示例代码:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
footer{
background: url("../img/cat.png") repeat-x;
height: 200px;
color: gainsboro;
padding: 1em calc(50% - 300px);
}
.wrap{
width: 600px;
}
</style>
</head>
<body>
<footer>
<div class="wrap">
這個中文假文產生器每次會產生由五個段落、每段六至八個假句組成的假文。所以,假句其實是假文的基礎。為了讓假句在視覺質地上接近真句,我準備了一個由 128 個真句組成的語料庫。每次要產生假句時就從中隨機挑選一個,然後逐字替換為隨機選出的筆畫數相同、但一般人不可能認得的低頻字。因為一般人不可能認得,實際上也算是假字了這個中文假文產生器每次會產生由五個段落、每段六至八個假句組成的假文。所以,假句
</div>
</footer>
</body>
五、垂直居中
5.1、绝对定位
- 以下两种技巧都需要使用绝对定位
- calc实现
- 内容部分必须固定宽和高
- translate实现
- 内容部分可以自适应宽和高
- 某些浏览器会导致元素模糊,可用transform-style:preserve-3d来修复,因为元素可能被放置在半个像素上
- 示例代码:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap{
position: relative;
width: 400px;
height: 150px;
border: 1px solid red;
}
.wrap .cont{
position: absolute;
top: calc(50% - 30px);
left: calc(50% - 50px);
width: 100px;
height: 60px;
background: gray;
}
.wrap02{
position: relative;
width: 400px;
height: 150px;
border: 1px solid red;
}
.wrap02 .cont{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: gray;
}
</style>
</head>
<body>
<div class="wrap">
<div class="cont">这个内容部分需要定宽和定高</div>
</div>
<div class="wrap02">
<div class="cont">这个内容部分可以实现自适应</div>
</div>
</body>
5.2、视口垂直居中 + translate
- 1vh表示视口高度的1%, 1vw表示视口的宽度的1%
- 当宽度 小于 < 高度时,1vmin = 1vm, 否则 1vmin = 1vh
- 当宽度 大于 > 高度时, 1vmax = 1vm,否则 1vmax = 1vh;
- 内容部分必须要固定宽和高
- 示例代码:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap{
width: 18em;
background: lightgreen;
padding: 1em 1.5em;
margin: 50vh auto 0;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="wrap">
这个只能做到视口居中
</div>
</body>
5.3、flexbox + margin:auto
- 在flexbox时,用margin:auto可以实现水平和垂直居中,可以用 margin:0 auto设置水平居中;margin: auto 0设置垂直居中
- 被居中元素的宽度和高度可以自适应
- 也可以通过flex的align-items和justify-content来实现水平垂直居中
- 示例代码:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap01{
display: flex;
min-height: 10vh;
border: 1px solid gray;
width: 30vw;
}
.wrap01 .main{
margin: auto;
padding: 5px;
background: lightblue;
}
.wrap02{
margin-top: 10px;
width: 28em;
height: 10em;
display: flex;
align-items: center;
justify-content: center;
background: lightblue;
}
</style>
</head>
<body>
<div class="wrap01">
<div class="main">
flex + margin:auto实现垂直居中
</div>
</div>
<div class="wrap02">
flex的align-items(垂直对齐)和justify-content(水平对齐)<br/>实现垂直水平居中
</div>
</body>
六、紧贴底部的页脚
- 用flexbox实现,对Main区域设置为flex:1,让其成为可伸缩的盒子
- min-height:100vh:至少占满屏幕
- 还有一种利用calc实现,但需要底部固定高度,应用场景太少
- flex实现示例代码:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0px;
display: flex;
flex-flow: column;
min-height: 100vh;
}
main{
flex: 1;
}
header{
background: limegreen;
}
footer{
background: lightpink;
}
</style>
</head>
<body>
<header>header</header>
<main>main</main>
<footer>footer</footer>
</body>
- 【自然框架】之 “表单控件”与“实体类”
- Android数据存储实现的5大方式
- Android实现图片异步加载操作
- (PDF.NET框架实例讲解)将存储过程映射为实体类
- 【开源】QuickPager ASP.NET2.0分页控件——使用示例、基本应用和查询功能
- 移花接木:当泛型方法遇上抽象类----我的“内存数据库”诞生记
- Android扫描多媒体文件剖析
- Android的进程与线程使用总结
- Android在WebView中加载HTML并实现交互
- 使用ASP.NET MVC2+PDF.NET 构建一个简单的新闻管理程序 示例过程
- 【开源】QuickPager ASP.NET2.0分页控件V2.0.0.3 【增加了使用说明】
- Android中Java和JavaScript交互
- Android UI控件系列:TabWidget(切换卡)
- 在Linux系统运行WinForm程序
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Android:非Activity跳转Activity时要加FLAG?
- Java自动化测试(接口鉴权 16)
- Android:Tools命名空间原来是有大用处的
- Android:无线调试就是这么简单
- Java自动化测试(回写与断言 17)
- 一篇就够——Kotlin快速入门
- 微信大牛教你深入了解数据库索引
- SqlServer 资源消耗查询
- Android:检查通知权限并跳转到通知设置界面
- OpenShift应用发布和运维设计
- Android:依赖Module的问题汇总
- Android:加载网图时精确获取图片格式
- Android:8.0中未知来源安装权限变更
- Android:RippleDrawable 水波纹/涟漪效果
- Android:Chip、ChipGroups、ChipDrawable