内容简介:本系列文章,主要是围绕css3属性,实现我们常见的各种效果,这些效果都是我们实战开发中经常可以用到的效果:首先,我们看一下想要得到的效果:基本的html结构如下:
本系列文章,主要是围绕css3属性,实现我们常见的各种效果,这些效果都是我们实战开发中经常可以用到的效果:
- css揭秘实战技巧- 背景与边框 [一]
- css揭秘实战技巧- 形状 [二]
- css揭秘实战技巧 - 视觉效果[三]
- css揭秘实战技巧 - 字体排印[四]
- css揭秘实战技巧 - 用户体验[五]
- css揭秘实战技巧 - 结构与布局[六]
- css揭秘实战技巧 - 过渡与动画[七]
前言
- 自适应内部元素
- 精确控制表格列宽
- 根据兄弟元素的数量来设置样式
- 满幅的背景,定宽的内容
- 紧贴底部的页脚
一:自适应内部元素
首先,我们看一下想要得到的效果:
基本的html结构如下:
<div> <img src="./img/kobe3.png" alt=""> <p>科比布莱恩特,一个伟大的时代,一个伟大的球员,还有一群伟大的球迷</p> </div> 复制代码
如果没有设置任何样式时,效果如下:
如何让文字去自适应图片的宽度呢?这就是问题的关键点了,如何让元素去自适应内部元素?而不是去自适应它的父元素呢?答案就是 width: min-content: 表示该元素的宽度将被解析为它内部最大的不可断行的元素的宽度(例如:最宽的单词,图片,或者具有固定宽度的盒元素)
代码如下:
div { width: min-content;//表示该div的宽度是由内部最大的不可断行元素的宽度所决定 } 复制代码
由于min-content是css3特性,部分浏览器可能不支持,所以我们需要一个平稳的回退方案,那就是提供一个固定的max-width值
div { max-width: 300px; max-width: min-content; } div img{ max-width: inherit; } 复制代码
二:精确控制表格列宽
大家在实际开发的过程中,尤其是后台管理系统,表格的使用会非常频繁,但是对于,表格的宽的控制,可能有时候并没有达到我们想要的效果,原因可能还是我们对于表格的相关属性不是很清楚,尤其是table-layout:auto/fixed;
- auto为默认值,表示自适应单元格中的内容,此时设置宽度无效。
- fixed表示均等分割,即宽度是等分均分的,当然,我们也可以设置宽度。
首先,我们看一下auto的效果:
代码如下:
//html <table> <tr> <th>序号</th> <th>文案1</th> <th class="third">文案2</th> <th>操作</th> </tr> <tr> <td>1</td> <td>科比布莱恩特,一个伟大的时代,一个伟大的球员,还有一群伟大的球迷</td> <td class="third">科比布莱恩特,一个伟大的时代,一个伟大的球员,还有一群伟大的球迷科比布莱恩特,一个伟大的时代,一个伟大的球员,还有一群伟大的球迷科比布莱恩特,一个伟大的时代,一个伟大的球员,还有一群伟大的球迷</td> <td> <a href="">编辑</a> </td> </tr> </table> 复制代码
//css table{ width: 800px; border-collapse: collapse; width: 100px;// 此时设置了宽度也不会生效,因为此时table-layout为auto。 } table tr td, table tr th { border: 1px solid #ddd; } 复制代码
那我们在上面的基础上,给table加一个table-layout:fixed,效果如下:
此时,我们看到部分单元格文本较多,如何隐藏呢?这时,我们可以用text-overflow:ellipsis , 该属性要同时配合:overflow:hidden;white-space:nowrap;以及一个指定的宽度才可以生效。 代码如下:
table{ width: 800px; border-collapse: collapse; table-layout: fixed; } table tr td, table tr th { border: 1px solid #ddd; } table tr th:nth-child(3) { width: 100px; } table tr td:nth-child(3) { width: 100px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } 复制代码
最终的效果如下:
此时,有个细节要注意:我们直接设置td的宽度为100px,效果是没有生效的,必须设置th的宽度为100px,单元格的宽度才生效。
这是因为table渲染的时候,一般是根据第一行的样式去渲染,此时第一行是th构成的,所以此时th没有设置宽度,即使td设置了宽度,渲染的时候同一列的其他单元格还是根据th去渲染,所以此处,我们直接设置td的宽度是无效的,当然大家也可以把th构成的这一行删掉,然后再设置td的宽度,这时就可以生效了,因为此时第一行就是td构成的
三:根据兄弟元素的数量来设置样式
我们在实际开发过程中,也会遇到下面这种场景:我们需要根据兄弟元素的数量去设置不同的样式。
那么我们就来看看这种效果到底该如何通过css去实现呢?
html结构如下:
<ul> <li></li> <li></li> <li></li> //可能有更多或者更少 </ul> 复制代码
- 首先我们看一下:only-child
li:only-child { //表示只有一个子元素的时候的样式 } 复制代码
- :first-child:last-child
li:first-chlid:last-chlid { //表示元素是第一个元素,同时又是最后一个元素,说明此时只有一个子元素 } 复制代码
- 接着上面的思路:
li:first-child:nth-last-child(4){ //表示第一个元素又是倒数第四个元素,说明此时有四个子元素。 } 复制代码
好啦,这个时候,我们就知道了,怎么样在css判断兄弟元素的数量。
- 接下来,我们实现一个效果: 有四个或者四个以上元素,且第一个为绿色,从第二个开始其他为红色
ul li { display: inline-block; width: 50px; height: 60px; background: green; margin: 10px; } ul li:first-child:nth-last-child(n + 4) ~ li{ background: red; } 复制代码
实现的效果如下:
- 再进一步,指定一下范围,有2个到4个子元素的时候,设置为红色 代码如下:
ul li { display: inline-block; width: 50px; height: 60px; background: green; margin: 10px; } ul li:first-child:nth-last-child(n + 2):nth-last-child(-n + 4) ~ li{ background: red; } 复制代码
此时,如果ul下面有2到4个li时,就会应用我们的样式,否则不会。
四:满幅的背景,定宽的内容
首先,我们看一下一个最常见的页脚的效果:背景铺满整个宽度,内容居中
上面的效果就是我们标题所说的:满幅的背景,定宽的内容,通常遇到这种效果,我们最直接的解决方案可能就是:外面一层div设置背景,里面再嵌套一个div显示内容,然后设置里面的div居中显示,就这样实现了,这可能也是大多数人的思路,那么,如果只是用一层div去实现呢? 代码如下:
div { backgroud: #333; padding: 10px;//部分浏览器不支持calc回退方案 padding: 10px calc(50% - 450px); // 此时,我们设置的中间内容区域定宽是900px } 复制代码
五:紧贴底部的页脚
首先,html结构如下:
<header> <p>头部1</p> <p>头部2</p> </header> <main> 内容 </main> <footer> <p>尾部1</p> <p>尾部3</p> </footer> 复制代码
1. 固定高度的页脚
header { height: 60px; background: green; } main { min-height: calc(100% - 60px - 100px); background: #ddd; } footer { height: 100px; background: cornflowerblue; } 复制代码
2. 高度不固定,根据内容自适应高度的页脚
body { display: flex; flex-direction: column; min-height: 100vh; } header{ background: green; } main { background: #ddd; flex: 1; } footer{ background: cornflowerblue; } 复制代码
以上所述就是小编给大家介绍的《css揭秘实战技巧 - 结构与布局[六]》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 4个小时实战木桶布局
- Flutter 完整开发实战详解(十六、详解自定义布局实战)
- 不一样的 vue 实战 (3): 布局与组件
- css经典布局系列三——三列布局(圣杯布局、双飞翼布局)
- 四种方法实现──三栏布局(圣杯布局、双飞翼布局)
- 浅谈CSS三栏布局(包括双飞翼布局和圣杯布局)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
About Face 2.0
Alan Cooper、Robert M. Reimann / Wiley / March 17, 2003 / USD 35.00
First published seven years ago-just before the World Wide Web exploded into dominance in the software world-About Face rapidly became a bestseller. While the ideas and principles in the original book......一起来看看 《About Face 2.0》 这本书的介绍吧!