《css世界》的那些实用技巧
下面所有的内容都来至张鑫旭所著的《css世界》。
《css世界》这是一本专门写css的书,书中并没有涉及css3的知识,但是它所展现的东西很多都是我从未知道或以前未重视的。这是一本能够开阔视野的书,我把这本书推荐所有从事前端的人。
下面都是我在看这本书所记录的一些新奇但实用的布局技巧。
max-width
- max-系列的权重非常的高,甚至超越了!important。如下代码p最后的宽度是150px
p {width: 200px !important;max-width: 150px;
}
复制代码
- 当
min-width
与max-width
大小有冲突的时候会采用最大原则,即谁大取谁的值。如下代码最后的宽度是1400px
.container {min-width: 1400px;max-width: 1200px;
}
复制代码
- 当我们实现一个元素高度逐渐变大的效果,但是我们又不知道这个元素的具体高度,这个时候我们就可以用
max-height
的方式。我们不需要给以具体高度值就可以实现这个效果。当然这样做会出现元素高度达到实际高度但是动画还没结束。会有动画延迟的感觉。
.element {max-height: 0;overflow: hidden;transition: max-height 0.25s;
}
.element.active {max-height: 666px; /* 一个足够大的最大高度值 */
}
复制代码
content attr
类似于img
的 alt。
.icon:before {content: attr(data-title);
}
复制代码
padding 与 margin
这种三道扛的效果我们经常要遇到,我们可以借助 background-clip
与padding
实现这种效果。不需要任何图片。
.icon-menu {display: inline-block;width: 140px;height: 10px;padding: 35px 0;border-top: 10px solid;border-bottom: 10px solid;background-color: currentColor;background-clip: content-box;
}
复制代码
当我们要实现这种两端对齐的效果,我们给每一个列表都设置margin-right
然后去掉最后一个的margin-right
。实现这种效果需要借助css3的新增选择器,有时候还需要js,或者直接用flex
布局。但我们利用给父级margin
负值就可以轻松实现。
ul {margin-right: -20px;
}
ul > li {float: left;width: 100px;margin-right: 20px;
}
复制代码
border
- 因为 ie6 下 border 设置虚线显示的是圆点。所以用这种方法可以在ie6下实现一个圆。
.box {width: 150px;height: 150px;/* 超出区域隐藏,只显示一个圆 */overflow: hidden;
}
.dotted {width: 100%;height: 100%;border: 149px dotted #cd0000;
}
复制代码
利用边框制作三角形其实是一个广为人知的方法,还是写一下吧。
注意:边框也是css标准的上右下左的设置顺序,需要上面方向的三角形就给它相反的方向设置想要的颜色,其他方向都设为透明色。
div {width: 0;border: 10px solid;border-color: #f30 transparent transparent;
}
复制代码
ex
ex是一个被忽略的距离单位,它表示一个小写字母x(x、y、z的x)的高度。是一个相对单位,它和父元素的字号有关系。
这种图标和字垂直居中的布局我们经常见到,只要这样设置就可以简单实现,而且还不会受字号,页面高度的影响。
.icon-arrow {display: inline-block;width: 20px;height: 1ex;background: url(xxx.png) no-repeat center;
}
复制代码
vertical-align
可以利用 vertical-align 实现水平垂直居中,这种定位方法不用知道居中元素的宽高度,兼容ie6
下面模拟的是一个全屏的对话框。这种居中方法核心是父元素的text-aglin:center
,在写一个居中元素的兄弟元素给与display: inline-block;height: 100%;vertical-align: middle;
三个属性,自身设置display: inline-block; vertical-align: middle;
<div id="container"><div id="dialog">....</div>//要居中的元素<div id="assist"></div>
</div>
复制代码
#container {position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: rgba(0, 0, 0, 0.5), none;text-align: center;white-space: nowrap;font-size: 0;z-index: 99;
}
#dialog {display: inline-block;vertical-align: middle;
}
#assist {display: inline-block;height: 100%;vertical-align: middle;
}
复制代码
BFC
以前就知道overflow:hidden
一种触发BFC的方法,其实以下都能出发BFC。
<html>
根元素;- float 的值不为 none;
- overflow 的值为 auto、scroll 或 hidden;
- display 的值为 table-cell、table-caption 和 inline-block 中的任何一个;
- position 的值不为 relative 和 static。
overflow
滚动条是
html
所产生的所有想要页面禁止出现滚动条没必要拉着body
一起设置overflow:hidden
,当页面加载非常慢的时候会出现页面向左偏移的情况,因为滚动条占据了body的宽度导致body偏移。下述代码是让
body
占据整个 window 的宽度。这样不会出现页面加载慢时导致居中元素偏移的问题。(现在用户宽带大幅度提升基本上不会有这种情况了)
html {overflow-y: scroll; /* for IE8 */
}
:root {overflow-y: auto;overflow-x: hidden;
}
:root body {position: absolute;
}
body {width: 100vw;overflow: hidden;
}
复制代码
absolute
当我使用绝对定位的时候,总会老老实实的子决父相。但是无依赖的绝对定位效果会更好。
无依赖的布局,即不使用传统的子决父相的方式。不使用left
和top
控制,用 margin 或者 transform 来控制位置。
.icon-warn {position: absolute;margin-left: -20px;width: 20px;height: 20px;background: url(warn.png) no-repeat center;
}
复制代码
- absolute 与 text-align 相配合实现水平居中。
代码如下
<p > <img src="1.jpg" > </p >
复制代码
p {text-align: center;
}
img {position: absolute;margin-left: ...;
}
复制代码
虽然本示例中图片位置确实受 text-align 属性影响,但是并不是 text-align 和 absolute 元素直接发生关系,absolute 元素的 display 计算值是块状的,text-align是不会有作用的。这里之所以产生了位置变化,本质上是“幽灵空白节点”和“无依赖绝对定位”共同作用的结果
“幽灵空白节点”是内联盒模型中非常重要的一个概念,具体指的是:在 HTML5 文档声明 中,内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。这 个“空白节点”永远透明,不占据任何宽度,看不见也无法通过脚本获取,就好像幽灵一样, 但又确确实实地存在,表现如同文本节点一样,因此,我称之为“幽灵空白节点”。
当然我们是需要知道内联元素的宽度的。margin-left
的值与负的一般宽度。与父元素position:relative
然后定位元素设置left:50%
的方法类似。但不会有层级问题。
2. absolute 与 overflow 关于绝对定位元素是否会受到`overflow`的影响有如下判断
overflow 不是定位元素,同时绝对定位元素和 overflow 容器之间也没有定位元素 如果 ,则overflow 无法对 absolute 元素进行剪裁。
根据上述所言。无依赖的absolute
不会被父级的overflow
所裁剪。
注意:由于 transform 在各个浏览器对overflow
的支持不一样所以当元素还是被裁剪的话,试着找找是不是transform
的原因
3. absolute 与流体自适应
当一个绝对定位元素的相对方向都有定位的时候该元素就会拥有一种和文档流相似的流体特性如
.box {
position: absolute;
left: 0; right: 0;
}
复制代码
当一个绝对定位元素有如下的设置就能覆盖整个浏览器。注意它的宽度高度是一种"格式化宽度/高度",于width:100%
完全不同。给与margin
也不会出现超出屏幕。
.box {position: absolute;left: 0;right: 0;top: 0;bottom: 0;
}
复制代码
根据上面所说可以使用margin:auto
实现水平居中的效果,如果有没有left: 0; right: 0;
这种能够激发流体特性的属性就不会有这种居中效果。当然想要用margin:auto auto
实现垂直水平居中是不能的。毕竟在标准文档流也没有这种效果。
代码如下
.element {width: 300px;height: 200px;position: absolute;left: 0;right: 0;margin: auto;
}
复制代码
fixed
fixed也可以用无依赖布局,如下实现一个在元素内部的固定定位
<div class="father" > <div class="son" > </div >
</div >
复制代码
.father {width: 300px;height: 200px;position: relative;
}
.son {width: 40px;height: 40px;position: fixed;margin-left: -40px;
}
复制代码
与绝对定位的无依赖一样不能使用left
等定位属性。
获取滚动条宽度
如下代码可以获取滚动条宽度,避免了禁用滚动条之后的页面偏移现象。
//显示
var widthBar = 17,root = document.documentElement;
if (typeof window.innerWidth == "number") {widthBar = window.innerWidth - root.clientWidth;
}
root.style.overflow = "hidden";
root.style.borderRight = widthBar + "px solid transparent";
//隐藏
var root = document.documentElement;
root.style.overflow = "";
root.style.borderRight = "";
复制代码
z-index
z-index
在css2 中只对定位元素有用但是在 css3 中加入了对flex
的支持
font-size
这种效果也可以借助vertical-align
和font-size
实现。
p {font-size: 16px;line-height: 1.5;
}
p > img {vertical-align: -25%;vertical-align: 0.6ex;;
}
复制代码
子元素vertical-align
使用百分比可以实现图标与文字居中的问题而且不受字体大小的影响,但是会受到行高的影响。如果是 ex 不仅可以实现而且不会受到行高的影响。
text-decoration
在中文下text-decoration
有可能与下一行的字出现重叠这时候我们用边框来作为下划线,边框不要设置颜色,它会默认的和字体一个颜色。
显示与隐藏
利用visibility
和绝对定位来实现隐藏而且不占位置。或者透明度加绝对定位
.hidden {position: absolute;visibility: hidden;
}.opacity {position: absolute;opacity: 0;filter: Alpha(opacity=0);
}
复制代码
visibility 与 display 的小区别
visibility
的子元素会被隐藏但是如果设置了visibility:visible
就会显现出来,但是display:none
的元素就没有这样的效果。
这些就是我阅读《css世界》所学到的技巧,更多内容请阅读原书
引用: 《css世界》
《css世界》的那些实用技巧相关推荐
- css 动态生成圆形区域内扇形个数_CSS实用技巧总结
❝ 作者:幻灵尔依 (授权原创) https://juejin.im/post/5e0fef935188253a624a6a72 ❞ <css揭秘>中讲了47个css技巧,其中有很多日常编 ...
- CSS实用技巧第一讲:文字处理
前言 作为程序员的我们,书写代码也需要大量的技巧.一份良好的代码能让人耳目一新,让人容易理解,同时也让自己成就感满满.因此,在这里简单的整理一些CSS开发技巧,希望能让你写出耳目一新.容易理解.舒服自 ...
- 张鑫旭和他的《CSS世界》
说到本书的作者,前端圈里没见过他的人有很多,但没读过他文章的人很少,他就是很多前端同行眼中的,张老师,张大神--张鑫旭(以下简称"张") 前一段时间,去参加"前端体验大会 ...
- 《众妙之门——网站UI设计之道(修订版)》一1.3 制作有效用户界面的实用技巧...
本节书摘来自异步社区<众妙之门--网站UI设计之道(修订版)>一书中的第1章,第1.3节,作者[德]Smashing Magazine,更多章节内容可以访问云栖社区"异步社区&q ...
- Vim实用技巧pdf
下载地址:网盘下载 内容简介 · · · · · · vim是一款功能丰富而强大的文本编辑器,其代码补全.编译及错误跳转等方便编程的功能特别丰富,在程序员中得到非常广泛的使用.vim能够大大提高程序 ...
- css transparent张鑫旭,【灵感杂谈】张鑫旭和他的《CSS世界》
原标题:[灵感杂谈]张鑫旭和他的<CSS世界> 说到本书的作者,前端圈里没见过他的人有很多,但没读过他文章的人很少,他就是很多前端同行眼中的,张老师,张大神--张鑫旭(以下简称" ...
- 深度学习七个实用技巧
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达 深度学习已经成为解决许多具有挑战性的现实世界问题的方法.对目标检测 ...
- abaqus python二次开发攻略_Abaqus有限元分析常见问题解答与实用技巧 12天后上架...
Abaqus有限元分析常见问题解答与实用技巧已印刷完毕,1-2天后上架,先睹为快.现在某些网站上的售卖信息,不靠谱.温馨提示:封底无防伪标均为盗版! 序 言 Abaqus是是国际上先进的大型通用非线 ...
- Vim 实用技术,第 1 部分: 实用技巧
0. Vim 简介 作为开源世界最重要的编辑器之一(另一个是 Emacs),Vim 以其强大的功能和可定制能力被众多开发者所喜爱.不过,也许就是因为 Vim 的功能太强大了,要真正用好 Vim 并不容 ...
最新文章
- css考核点整理(十一)-响应式开发经验,响应式页面的三种核心技术是什么
- mysql常见关键字
- 小米一键上锁工具_小米智能门锁和猫眼,可女声变男声与访客隔门沟通
- highcharts如何把图多余的空白页面_如何进行前端性能测试入门篇
- xml vs db.properties
- java8 函数式编程_Java 8函数式编程:延迟实例化
- Oracle通过邀请Weaver和Chin推动JavaFX向前发展
- 聚焦效率与目标差距,数据才是远程办公的内核!
- [原创]css设置禁止中文换行
- 关于MATLAB实现的数字信号处理(四)
- hdu 1004(排序+统计)
- 教你在SQL Server数据库中设计表和字段
- python计算直角三角形斜边上的中线_怎么证明直角三角形斜边上的中线
- 《计算机网络》day01-网络的诞生和发展
- 高电平和低电平 到底是啥?
- elementUI表格中气泡位置偏移
- = =大家一起黑马忠啊
- xp获取计算机管理员权限,xp管理员权限的获取与防范
- RabbitMQ的安装
- Python开源指南
热门文章
- python lambda map reduce_python:lambda、filter、map、reduce
- Fail to find the dnn implementation. [Op:CudnnRNN]解决办法
- ASP .NET Core Web Razor Pages系列教程二:添加模型到Razor Pages网络应用程序
- linux的source命令,linux命令之Source命令
- layui时间怎么设置年月日时分秒_layui-laydate时间日历控件使用方法详解
- 如何创建 java虚拟机_Java虚拟机如何创建对象?
- C++_泛型编程与标准库(七)
- android模拟器的数据存放,Android模拟器在哪里存储SQLite数据库?
- php中的核心函数有哪些,PHP内核探索:函数的分类
- 透过源码详解Spring Security 初始化流程