C4笔记（提高）*

最新推荐文章于 2023-06-10 15:53:41 发布

东瀛神兽Kawasaki

最新推荐文章于 2023-06-10 15:53:41 发布

阅读量625

点赞数

本文链接：https://blog.csdn.net/weixin_48116269/article/details/106725074

版权

CSS高级技巧

CSS用户界面样式

所谓的界面样式就是更改一些用户操作样式比如更改用户的鼠标样式表单轮廓等但是比如滚动条的样式改动收到了很多浏览器的抵制因此我们就放弃了防止表单域拖拽

鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定意义的光标形状

cursor : default 小白 | pointer 小手 | move 移动 | text 文本

鼠标放我身上查看效果哦:

<ul>
	<li style="cursor : default">我是小白</li>
	<li style="cursor : pointer">我是小手</li>
	<li style="cursor : move">我是移动</li>
	<li style="cursor : text">我是文本</li>
</ul>

尽量不要用 hand 因为火狐不支持 poinder IE6以上都支持的尽量用

轮廓 outline

是绘制元素周围的一条线位于边框边缘的外围可起到突出元素的作用

outline: outline-color || outline-style || outline-width

但是我们都不关心可以设置多少我们平时都是去掉的

最直接的写法是: outline : 0 ;

防止拖拽文本域 resize

resize: none 这个单词可以防止火狐谷歌等浏览器随意的拖动文本域

右下角可以拖拽

<textarea></textarea>

右下角不可以拖拽:

<textarea style="resize: none;"></textarea>

vertical-align 垂直对齐

以前我们讲过让带有宽度的块级元素居中对齐是 margin: 0 auto;

以前我们还讲过让文字居中对齐是 text-align: center;

但是我们从来没有讲过有垂直居中的属性我们的妈妈一直很担心我们的垂直居中怎么做;

vertical-align 垂直对齐这个看上去很美好的一个属性实际有着不可捉摸的脾气否则我们也不会那么晚来讲解

在这里插入图片描述

vertical-align: baseline | top | middle | bottom

设置或检索对象内容的垂直对齐方式

vertical-align 不影响块级元素中的内容对齐他只针对于行内元素或者行内块元素特别是行内块元素 通常用来控制图片和表单与文字的对齐

在这里插入图片描述

图片、表单这些行内块元素和文字对齐

所以我们知道我们可以通过 vertical-align 控制图片和文字的垂直关系默认的图片会和文字基线对齐

去除图片底测空白缝隙

有个很重要的特性要记住: 图片或者表单等行内块元素他的底线会和父级盒子的基线对齐这样会造成一个问题就是图片底测会有个空白缝隙

在这里插入图片描述

解决方法就是 :

1 : 给 img vertical-align: middle | top 让图片不要和基线对齐

在这里插入图片描述

2 : 给img 添加 display: block; 转换为块级元素就不会存在问题了

在这里插入图片描述

溢出的文字隐藏

word-break: 自动换行

normal 使用浏览器默认的换行规则

break-all 允许在单词内换行

keep-all 只能在半角空格或连字符处换行

主要用于处理英文单词

white-space

white-space设置或检索对象内文本显示方式通常我们使用强制一行显示内容

normal: 默认处理方式

nowrap: 强制在同一行内显示所有文本直到文本结束或遭遇br标签对象才换行

text-overflow : 文字溢出

text-overflow: clip | ellipsis

设置或检索是否使用一个省略标记(…)标示对象内文本的溢出

clip : 不显示省略标记(…) 而是简单的裁切

ellipsis : 当对象内文本溢出是显示省略标记(…)

注意一定要首先强制一行内显示再次和 overflow 属性搭配使用

css精灵技术 (sprite) 小妖精雪碧图

精灵技术产生的背景

在这里插入图片描述
图所示为网页的请求原理当用户访问一个网站时需要向服务器发送请求网页上的每张图片都需要经过一次请求才能展现给用户

然而一个网页中往往会应用很多小的背景图像作为修饰当页面中的图像过多时服务器就会频繁的接受和发送请求这将大大降低页面的加载速度为了有效的减少服务器接受和发送请求的次数提高页面的加载速度出现了CSS精灵技术(也称CSS Sprites、CSS雪碧)

精灵技术的本质

简单的说,CSS精灵是一种处理网页背景图像的方式它将一个页面涉及到的所有零星背景图像都集中到一张大图中去然后将大图应用于页面这样当用户访问该页面时只需要向服务器发送一次请求网页中的背景图像即可全部展示出来通常情况下这个由很多小的背景图像合成的大图被称作精灵图如下图所示为京东网站中的一个精灵图

在这里插入图片描述

精灵技术的使用属性

CSS精灵图其实是将网页中的一些背景图像整合到一张大图中(精灵图),然而,各个网页元素通常只需要精灵图中不同位置的某个小图想要精确定位到精灵图中的某个小图就需要使用CSS的background-image background-repeat和background-position属性进行背景定位其中最关键的是使用 background-position属性精准定位

制作精灵图

CSS精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图) 那我们要做的就是把小图拼合成一张大图

大部分情况下精灵图都是网页美工做

我们精灵图上放的都是小的装饰性质的背景图片  插入图片不能往上放
我们精灵图的宽度取决于最宽的那个背景
我们可以横向摆放也可以纵向摆放 但是每个图片之间 间隔至少隔开偶数像素合适
在我们精灵图的最低端 留一片空隙 方便我们以后添加其他精灵图

结束语: 小公司背景图片很少的情况下没有必要使用精灵技术维护成本太高如果是背景图片比较多可以建议使用精灵技术

字体图标

图片是有诸多优点的但是缺点很明显比如图片不但增加了总文件的大小还增加了很多额外的"http请求",这都会大大降低网页性能更重要的是图片不能很好的进行"缩放", 因为图片放大和缩小会失真我们后面学习移动端响应式,很多情况下希望我们的图标是可以缩放的此时一个非常重要的技术出现了 … emmmm…不是出现了是以前就有是被新"宠幸"啦这就是字体图标(iconfont)

字体图标的优点

可以做出跟图片一样可以做的事情 改变透明度 旋转度等....
但是本质其实是文字 可以随意的改变颜色 产生阴影 透明效果等 ....
本身体积更小 但携带的信息并没有削减 
几乎所有的浏览器都支持
移动端设备必备良药

字体图标使用流程

总体来说字体图标按照如下流程 :

在这里插入图片描述
设计字体图标

假如图标是我们公司单独设计那就需要第一步了这个属于UI设计人员的工作他们在 illustrator 或 Sketch 这类矢量图形软件里创建 icon图标比如下图 :

在这里插入图片描述
之后保存为svg格式然后给我们前端人员就OK

其实第一步我们不需要关心只需要给我们这些图标就好了如果图标是大众的网上本来就有的可以跳过第一步进入第三步

上传生成字体包

当UI设计人员给我们svg文件的时候我们需要转换成我们页面能使用的字体文字而且需要生成的是兼容性的适合个各个浏览器的

推荐网站: http://icomoon.io

icomoon字库

IcoMoon成立于2011年推出的第一个自定义图标字体生成器它允许用户选择他们所需要的图标是他们成一字型内容种类繁多非常全面唯一遗憾的是国外服务器打开网速比较慢

推荐网站: http://www.iconfont.cn

阿里 icon font 字库

http://www.iconfont.cn

这个是阿里妈妈M2UX的一个icon font 字体图标字库包含了淘宝图标和阿里妈妈图标库可以使用AI制作图标上传生成一个字免费免费!!!

fontello

http://fontello.com/

在线定制自己的 icon font 字体图标字体库也可以直接从 GitHub 下载整个图标集该项目也是开源的

Font-Awesome

http://fortawesome.github.io/Font-Awesome

这是我最喜欢的字体库之一了更新比较快目前已经有369个图标了

下载兼容字体包

我们需要自己专门的图标是想网上找几个图标使用直接到刚才的网站上找喜欢的下载使用

字体引入到HTML

首先把一下4个文件夹放到fonts文件夹中通俗的做法

在这里插入图片描述
第一步: 在样式里面声明字体 : 告诉别人我们自己定义的字体

@font-face { /* 声明字体 电脑中没有的字体 我们需要声明 写在 style 中*/
	font-family: 'icomoon';
	src: url('fonts/icomoon.eot?7kkyc2');
	src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
		 url('fonts/icomoon.ttf?7kkyc2') format('truetype')		 
		 url('fonts/icomoon.woff?7kkyc2') format('woff')		 
		 url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg')
	font-weight: normal;
	font-style: normal;
}

第二步 : 给盒子使用字体

span {
	font-family: 'icomoon';
	}

第三步: 盒子里面添加结构

span::before {
	content: "\e900";
	}
或者
<span> </span>

追加新图标到原来的图标库里面

如果工作中, 原来的字体图标不够用了我们需要添加新的字体图标但是原来的不能删除继续使用此时我们需要这样做把压缩包里面的selection.json重新上传然后选中自己想要的新的图标然后重新下载压缩包替换原来文件即可

滑动门

滑动门又叫推拉门

在这里插入图片描述

滑动门出现的背景

制作网页时 , 为了美观常常需要为网页元素设置特殊形状的背景比如微信导航栏有凸起和凹下去的感觉最大的问题可能就是里面的字数不一样那我们怎么办呢?

在这里插入图片描述

为了使各种特殊形状的背景能够自适应元素中文本内容的多少出现了CSS滑动技术他从全新的角度构建页面使各种特殊形状的背景能够自由拉伸滑动以适应元素内部的文本内容可用性更强最常见于各种导航栏的滑动

核心技术

核心技术就是利用CSS精灵(主要是背景位置) 和盒子 padding 撑开宽度以便适应不同字数的导航栏

一般经典布局都是这样的 :

<li>
	<a href="#">
		<span>导航栏内容</span>
	</a>
</li>

总结:

a设置背景左侧 padding撑开合适宽度
span设置背景右侧 padding撑开合适宽度剩下由文字继续撑开宽度
之所以a包含span就是因为整个导航栏都是可以点击的

在这里插入图片描述

before和after伪元素(详解)

之所以被称为伪元素是因为他们不是真正的页面元素 HTML没有对应的元素但是其所有用法和表现行为与真正的页面元素一样可以对其使用诸如页面元素一样的CSS样式表面上看上去貌似是页面的某些元素来展现实际上是CSS样式展现的行为因此被称为伪元素是伪元素在HTML代码机构中的展示可以看出伪元素的结构无法查询

注意:

伪元素:before和:after添加的内容默认是 inline 元素这两个伪元素的 content 属性表示伪元素的内容设置:before和:after时必须设置其content属性否则伪元素就不起作用
伪元素是不占位置的
鼠标经过显示边框
4.

伸缩布局(CSS3)

CSS3在布局方面做了非常大的改进使得我们对块级元素的布局排列变得十分灵活适应性非常强其强大的伸缩性在响应式开发中可以发挥极大的作用

主轴: Flex容器的主轴主要用来配置Flex项目默认是水平方向

侧轴: 与主轴垂直的轴称作侧轴默认是垂直方向

过度(CSS3)

过度(transition) 是CSS中具有颠覆性的特征之一我们可以在不使用Flash动画或JS的情况下当元素从一种样式变换为另一种样式时添加效果

帧动画: 通过一帧一帧的画面按照固定顺序和速度播放如电影胶片

在CSS里使用 transition 可以实现补间动画(过渡效果) 并且当前元素只要有"属性"发生变化时即存在两种状态(我们用A和B代指) 就可以实现平滑的过度为了方便演示采用hover切换两种状态但是并不仅仅局限于hover状态来实现过度

语法格式 :

transition : 要过度的属性 花费的时间  运动曲线  何时开始
如果有多组属性变化  还是用逗号(,)隔开

在这里插入图片描述
如果想要所有的属性都变化过渡写一个 all 就可以

transition-duration 花费时间单位是秒 s 比如0.5s 这个s 必须写

运动曲线默认是 ease

何时开始默认是 0s 立马开始

运动曲线示意图:

在这里插入图片描述

注意 : transtion 写到div中谁过度给谁写不能写在hover中

2D变形(CSS) transform

transform是css中具有颠覆性的特征之一可以实现元素额位移旋转倾斜缩放甚至支持矩阵方式配合过度和即将学习的动画知识可以取代大量之前只能靠Flash才可以实现的效果

变形转换 transform transform 变换变形的意思 <transformers 变形金刚>

移动 translate(x,y) translate 移动平移的意思

在这里插入图片描述

translate(50px,50px);

使用translate方法来将文字或图片在水平方向和垂直方向上分别垂直移动50像素

可以改变元素的位置 x , y 可为负值

translate(x,y)水平方向和垂直方向同时移动 (也就是X轴和Y轴同时移动)
translateX(x)仅水平方向移动(X轴移动)
translateY(y)仅垂直方向移动(y轴移动)

.box {
	width: 499.9999999px;
	height : 400px;
	background: pink;
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%) /* 走的自己的一半 */
}

让盒子的水平居中

缩放scale(x,y)

在这里插入图片描述

transform: scale(0.8,1);

可以对元素进行水平和垂直方向的缩放.该语句使用scale方法使该元素在水平方向上缩小了20% 垂直方向上不缩放

scale(X,Y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)
scaleX(X)使元素水平方向缩放(也就是X轴缩放)
scaleY(Y)使元素垂直方向缩放(也就是Y轴缩放)

scale()的取值默认的值为1 当值设置为0.01~0.99之间的任意值,作用使一个元素缩小而任何大于或等于1.01的值,作用是让元素放大

旋转 rotate(deg)

可以对元素进行旋转, 正值为顺时针负值为逆时针

在这里插入图片描述

transform:rotate(45deg)

注意单位是 deg 度数

transform-origin 可以调整元素转换的原点

在这里插入图片描述

div{transform-origin: left top; transform: rotate(45deg);}/* 改变元素原点到左上角 然后进行顺时针旋转45度 */

如果是4个角可以使用 left top 这些如果想要精确的位置可以使用 PX 像素

div{transform-origin: 10px 10px;transform: rotate(45deg);}/* 改变元素原点到x为10 y为10 然后进行顺时针旋转45度*/

案例旋转的盒子

body {
	background-color: skyblue;
	.container {
		width: 100px;
		height: 150px;
		border: 1px solid gray;
		margin: 300px auto;
		position:relative;
	}
}

课上案例做一个旋转的图片给6张图然后改变旋转点需要过渡效果

倾斜 skew (deg,deg)

在这里插入图片描述

transform: skew(30deg,0deg)

改实例通过skew方法把元素水平方向上倾斜30度处置方向保持不变

可以是元素按照一定的角度进行倾斜可为负值第二个参数不写默认为0

3D变形(CSS3) transform

左手坐标系

伸出左手让拇指和食指成"L"型大拇指向右食指向上中指指向前方这样我们就建立了一个左手坐标系拇指食指中指分别代表X Y Z 轴的正方向如下图

在这里插入图片描述

CSS3中的3D坐标系与上述的3D坐标系是有一定区别的相当于其围绕着X轴旋转了180度如下图

在这里插入图片描述
简单记住他们的坐标:

X 左边是负的右边是正的

Y 上面是负的下面是正的

Z 里面是负的外面是正的

rotateX()

就是沿着X轴立体旋转

在这里插入图片描述

img {
	transition: all 0.5s ease 0s;
}
img:hover {
	transform: rotateX(180deg);
}

rotateY()

沿着Y轴进行旋转

在这里插入图片描述
透视(perspective)

电脑显示屏是一个2D平面图像之所以具有立体感(3D效果),其实只是一种视觉呈现通过透视可以实现此目的

透视可以将一个2D平面在转换的过程中呈现3D效果

透视原理 : 近大远小

浏览器透视 : 把近大远小的所有图像透视在屏幕上

perspective : 视距, 表示视点距离屏幕的长短. 视点, 用于模拟透视效果时人眼的位置

注: 并非任何情况下都需要透视效果根据开发需要进行设置

perspective 一般作为一个属性设置给父元素作用于所有的3D转换的子元素

理解透视距离原理 :

在这里插入图片描述

translateX(x)

仅水平方向移动 ** (X轴移动)

在这里插入图片描述

translateZ(z)

transformZ的直观表现形式就是大小变化实质是XY平面相对于视点的远近变化(说远近就一定会说到离什么参照物远或近在这里参照物就是perspective属性),比如设置了 perspective为200px 那么 transformZ的值越接近200 就是离的越近看上去也就越大超过200 就看不到了因为相当于跑到后面去了我相信正常情况下是看不到自己的后脑勺的

translate3d(x,y,z)

[注意]其中 x和y可以是长度值也可以是百分比百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和 z只能设置长度值

开门案例:

两面翻转的盒子:

在这里插入图片描述
重点代码在这几行中:

在这里插入图片描述
注意 : 谁做动画给谁过渡 backface-visibility: hidden /* 不是正面对向屏幕就隐藏*/

动画(CSS3) animation

动画是CSS中具有颠覆性的特征之一可通过设置多个节点来精确控制一个或一组动画常用来实现复杂的动画效果

语法格式:

animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;

CSS动画属性

下面表格列出了@keyframes规则和所有动画属性

在这里插入图片描述

infinite 无限循环

关于几个值除了名字动画时间延时有严格顺序要求其他随意

多组动画

在这里插入图片描述

伸缩布局(CSS3)

CSS3在布局方面做了非常大的改进是的我们对块级元素的布局排列变得十分灵活适应性非常强其强大的伸缩性在响应式开发中可以发挥极大的作用

主轴 : Flex 容器的主轴主要用来配置 Flex 项目默认是水平方向

侧轴 : 与主轴垂直的轴称为侧轴默认是垂直方向

方向 : 默认主轴从左到右侧轴默认从上到下

主轴和侧轴并不是固定不变的通过flex-direction可以互换

在这里插入图片描述
Flex布局的语法规范经过几年发生了很大的变化也给Flexbox的使用带来了一定的局限性因为语法规范版本众多浏览器支持不一样只是Flexbox布局使用不多

各属性详解****

flex子项目在主轴的缩放比例不指定flex属性则不参与伸缩分配

min-width 最小值 min-width: 280px ; 最小宽度不能小于280px

max-width 最大值 max-width: 1280px ; 最大宽度不能大于1280px
flex-direction 调整主轴方向 (默认为水平方向) (参照开发手册)

flex-direction : row ; 水平方向

flex-direction : column ; 垂直方向
justify-content 调整主轴对齐 (水平对齐)

在这里插入图片描述
4. align-items 调整侧轴对齐 (垂直对齐)

子盒子如何在父盒子里面垂直对齐 ( 单行 )

在这里插入图片描述

flex-wrap 控制是否换行

当我们子盒子内容宽度多于父盒子的时候如何处理

在这里插入图片描述
6. flex-flow 是 flex-direction、flex-wrap 的简写形式

flex-flow: flex-direction flex-wrap;

白话记 : flex-flow: 排列方式换不换行;

两个中间用空格

例如:

display: flex;
/* flex-direction: row; */
/* flex-wrap: wrap; 这两句话等价于下面的这句话 */
flex-flow : row wrap; /* 两者的综合 */

align-content 堆栈 ( 由flex-wrap 产生的独立行 ) 对齐

align-content是针对flex容器里面多轴(多行)的情况, align-items是针对一行的情况进行排列

必须对父元素设置自由盒子属性 display:flex; 并且设置排列方式为横向排列flex-direction:row;并且设置换行,flex-wrap: wrap; 这样的属性设置才会起到作用

在这里插入图片描述

order控制子项目的排列顺序正序方式排列从小到大

order:1; 
盒子默认排序 都是0 想要盒子排到前面  那数值就要给小 数值越小盒子的位置越靠前 可为负值

此知识点重在理解要明确找出主轴侧轴方向各属性对应的属性值

C4笔记（提高）*

CSS高级技巧

CSS用户界面样式

鼠标样式cursor

轮廓 outline

防止拖拽文本域 resize

vertical-align 垂直对齐

图片、表单 这些行内块元素 和文字对齐

去除图片底测空白缝隙

溢出的文字隐藏

word-break: 自动换行

white-space

text-overflow : 文字溢出

css精灵技术 (sprite) 小妖精 雪碧图

精灵技术产生的背景

精灵技术的本质

精灵技术的使用属性

制作精灵图

字体图标

字体图标的优点

字体图标使用流程

上传生成字体包

阿里 icon font 字库

Font-Awesome

下载兼容字体包

字体引入到HTML

追加新图标到原来的图标库里面

滑动门

滑动门出现的背景

核心技术

before和after伪元素(详解)

伸缩布局(CSS3)

过度(CSS3)

2D变形(CSS) transform

3D变形(CSS3) transform

translateX(x)

动画(CSS3) animation

伸缩布局(CSS3)

图片、表单这些行内块元素和文字对齐

css精灵技术 (sprite) 小妖精雪碧图