<p>Let’s assume we have some text here. Bacon ipsum dolor sit amet turkey veniam shankle, culpa short ribs kevin t-bone occaecat.</p>
<figure>
<img src="http://csssecrets.io/images/adamcatlace.jpg" />
<figcaption>
这个小猫特别可爱,她的名字叫做镜心。按时发发发发发生发发的方法发发发
</figcaption>
</figure>
<p>We also have some more text here. Et laborum venison nostrud, ut veniam sint kielbasa ullamco pancetta.</p>
CSS(下)
历史
CSS 支持多种设备,例如手机、电视、打印机、幻灯片等。但是 CSS 在浏览器上得到了更好的推广。
回顾
用到的知识点
【CSS布局】左边定宽右边自适应
https://codepen.io/AlexZ33/pen/PowGpGj
CSS其他重要知识
BFC
BFC
全称:Block Formatting Context,BFC
翻译过来就是块级格式化上下文。说白了,他就是一个规则。
具体戳这篇文章: 什么是BFC?
IFC(行级格式化上下文)
GFC(网格布局格式化上下文)
FFC(自适应格式化上下文)
层叠上下文和层叠顺序
z-index
思考:
尺寸单位及使用场景
长度单位:相对和绝对。
CSS中的尺寸单位
外边距折叠
外边距折叠
重绘&回流
渲染机制及重绘和回流
渲染引擎
好用的工具
https://imgbin.com/
形状
正方形
https://codepen.io/AlexZ33/pen/rNaWJrL
长方形
https://codepen.io/AlexZ33/pen/wvBoyXN
圆
https://codepen.io/AlexZ33/pen/JjobpBJ
三角形
https://codepen.io/AlexZ33/pen/qBEqEvZ
弯箭头符号
https://codepen.io/AlexZ33/pen/jOEVZQN
椭圆
border-radius:50%
实现https://codepen.io/AlexZ33/pen/WNbGZMe
半椭圆
/
分隔开水平和垂直方向上的圆角值特性来分别设置不同方式上的圆角半径https://codepen.io/AlexZ33/pen/vYEXeQQ
1/4椭圆
https://codepen.io/AlexZ33/pen/GRgjMPe
平行四边形
transform:skew()
变形。(注意:行内元素无效)https://codepen.io/AlexZ33/pen/yLyazrV
平行四边形伪元素方案
https://codepen.io/AlexZ33/pen/OJPRxKL
菱形图片裁切
https://codepen.io/AlexZ33/pen/MWYjOwm
菱形裁切方案二
clip-path
裁切路径属性,设置其值为polygon()
多边形来实现https://codepen.io/AlexZ33/pen/mdyrqVZ
元素切角
https://codepen.io/AlexZ33/pen/QWwKOKG
元素弧形切角
https://codepen.io/AlexZ33/pen/ZEYpaBX
border-image实现切角
https://codepen.io/AlexZ33/pen/KKwgyaW
裁切路径实现切角
https://codepen.io/AlexZ33/pen/RwNGjKX
梯形导航tab效果
transform:perspective()
实现穿透变形https://codepen.io/AlexZ33/pen/abzmVJj
静态饼图
https://codepen.io/AlexZ33/pen/abzmVwa
动态饼图
https://codepen.io/AlexZ33/pen/jOEMamB
svg 实现饼图
https://codepen.io/AlexZ33/pen/povEdrr
视觉效果
单侧投影
https://codepen.io/AlexZ33/pen/YzPpwGy
邻边投影
https://codepen.io/AlexZ33/pen/gObLPLg
对侧投影
https://codepen.io/AlexZ33/pen/rNaWxmP
字体排版
连字符断行
hyphens: none // 隐藏连字符
hyphens: manual //显示连字符
hyphens: auto //自动
https://codepen.io/AlexZ33/pen/YzPwMWE
插入换行
0x000A
,在CSS中即为\000A
(简写为\A
)来作为伪元素的content值,同时注意保留换行符和空白符white-space:pre
https://codepen.io/AlexZ33/pen/povgBEM
文本行斑马条纹
条纹背景
实现条纹,再利用背景em
值作为条纹大小https://codepen.io/AlexZ33/pen/KKwVYWO
调整tab的宽度
tab-size:2;
来设置每个tab占2个字符宽度https://codepen.io/AlexZ33/pen/BayjEZv
为某些字符单独设置字体(华丽的&符号)
自定义文本下划线
波浪下划线
凸版印刷效果
空心字效果/文字外发光效果/文字凸起效果
文字发光效果
环形文字
用户体验
选用合适的鼠标指针
原理:在不同场景下选用不同的鼠标指针。
cursor
属性设置隐藏光标:
cursor:none
,对于老版本浏览器可以通过cursor:url(transparent.gif)
来传入一张1*1的透明gif模拟隐藏扩大可点击区域
原理:通过伪元素扩大按钮范围
自定义复选框
原理:利用checkbox的
:checked
属性区分选中状态,再结合相邻label元素控制,通过伪元素实现想要的效果,再隐藏掉原复选框开关式按钮
CSS遮罩层
原理:通过box-shadow实现。缺陷:遮罩层下还是可以操作
原生modal遮罩层
原理:通过
::backdrop
伪类实现遮罩模糊背景弱化
原理:通过滤镜模糊
filter:blur()
模糊背景自定义滚动条样式
https://codepen.io/AlexZ33/pen/WdvrZz
https://codepen.io/AlexZ33/pen/QWwKpNr
https://codepen.io/AlexZ33/pen/abzmJNe
结构布局
自适应内部元素
min-content
让元素宽度最大宽度为其内部不可断行的元素宽度如果没有设置任何样式时,效果如下:
由于min-content是css3特性,部分浏览器可能不支持,所以我们需要一个平稳的回退方案,那就是提供一个固定的max-width值
https://codepen.io/AlexZ33/pen/rNaeNbB
精准控制表格列表
table-layout:fixed
把表格更多的控制权交到开发者手里,而不是让浏览器决定内容多少时变更理想的渲染宽度首先,我们看一下auto的效果:
那我们在上面的基础上,给table加一个table-layout:fixed,效果如下:
此时,我们看到部分单元格文本较多,如何隐藏呢?这时,我们可以用text-overflow:ellipsis , 该属性要同时配合:overflow:hidden;white-space:nowrap;以及一个指定的宽度才可以生效。 代码如下:
最终的效果如下:
此时,有个细节要注意:我们直接设置td的宽度为100px,效果是没有生效的,必须设置th的宽度为100px,单元格的宽度才生效。
这是因为table渲染的时候,一般是根据第一行的样式去渲染,此时第一行是th构成的,所以此时th没有设置宽度,即使td设置了宽度,渲染的时候同一列的其他单元格还是根据th去渲染,所以此处,我们直接设置td的宽度是无效的,当然大家也可以把th构成的这一行删掉,然后再设置td的宽度,这时就可以生效了,因为此时第一行就是td构成的
https://codepen.io/AlexZ33/pen/mdyPyOx
全背景等宽内容居中
绝对底部 (Stricky Footer)
效果图:
过渡动画
动画调速函数
ease,linear,ease-in,ease-out,ease-in-out
外,还提供了cubic-bezier()
用于开发者定定义调速函数。https://codepen.io/AlexZ33/pen/mdyOJOx
https://codepen.io/SebL/pen/pqJzn
https://codepen.io/AlexZ33/pen/yLyVEJW
弹性过渡变色效果
逐帧动画-CSS实现Loading动态图
原理:通过把所有帧全部拼合到一张PNG图中,以一个一帧大小元素来容纳,变换background-position值实现帧过度,通过animation的steps()函数实现不平滑过度,从而显示每帧动画
https://codepen.io/AlexZ33/pen/NWPbzVQ
3D翻转
https://codepen.io/AlexZ33/pen/xJEYGX
上下循环滚动效果
https://codepen.io/AlexZ33/pen/MWYjpKz
实战技巧
使用CSS复位
CSS复位可以在不同的浏览器上保持一致的样式风格。您可以使用CSS reset 库Normalize等,也可以使用一个更简化的复位方法:
现在元素的 margin 和 padding 已为0,
box-sizing
可以管理您的CSS盒模型布局。https://codepen.io/AlexZ33/pen/VwwoJGJ
注意:如果你遵循接下来继承
box-sizing
讲解的这个技巧, 你不需要在以上代码中添加box-sizing
属性。继承
box-sizing
从
html
元素继承box-sizing
:如此在插件或其它组件里改变
box-sizing
变得简单。每日一拓展(长期学习目标)
https://juejin.im/post/5cf5f358e51d45778f076ce5
https://codepen.io/AlexZ33/pen/xxbVbKV
实战技巧
1、适配技巧
2、不同浏览器兼容
3、不同设备兼容
4、业务中常见样式bug和解决
常用组件
CSS导航栏下划线跟随效果
纯CSS实现简单骨骼动画
扫二维码CSS动画
https://codepen.io/AlexZ33/pen/WNbQKez
拓展阅读
《CSS揭秘》