CSS_黑马基础高级技巧

2023-12-29 22:01:46

#CSS 用户界面样式

界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。

鼠标样式 cursor

选择器{cursor: pointer; }

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

CSS_黑马基础高级技巧

轮廓 outline

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

选择器{online：none；}  或者 outline: 0;

一般情况下都是去掉的

防止拖拽文本域 resize

实际开发中，我们文本域（textarea）右下角是不可以拖拽的，使用此属性可以防止火狐、谷歌等浏览器随意拖动文本域

resize: none;

#vertical-align垂直对齐

用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效，块级元素无效

CSS_黑马基础高级技巧

图片和文字对齐 

vertical-align : baseline | top | middle | bottom 

CSS_黑马基础高级技巧

通常用来控制图片或表单（行内块元素）与文字的对齐  

CSS_黑马基础高级技巧

去除图片底侧空白缝隙

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

主要解决方法有两种：

1.给图片添加 vertical-align:middle | top| bottom 等，只要不和基线对齐。 （提倡使用的）

2.把图片转换为块级元素 display: block;

#溢出的文字隐藏

word-break：自动换行

主要处理英文单词

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

break-all 允许在单词内换行

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

white-space

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

normal：默认处理

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

text-overflow文字溢出

text-overflow：clip / ellipsis；

设置或检索是否使用一个省略标记（...）标识对象内文本溢出

clip：不显示省略标记（...），而是简单的裁切

ellipsis：当对象内文本溢出时显示省略标记（...）

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

CSS_黑马基础高级技巧

#CSS 精灵技术（sprite）

精灵技术产生的背景

CSS_黑马基础高级技巧

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。

精灵技术本质

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

CSS_黑马基础高级技巧

精灵技术的使用

各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需使用CSS的background-image、background-repeat和background-position 属性进行背景定位，其中最关键的是使用background-position属性精确地定位。

CSS_黑马基础高级技巧

制作精灵图

小图拼合成一张大图

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

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

小公司，背景图片很少的情况没必要用精灵技术，维护成本高。如果背景图片比较多，可以建议使用精灵技术。

#字体图标（iconfont）

图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的“http请求”，这都会大大降低网页的性能的。更重要的是图片不能进行很好的缩放，因为会失真。很多情况下我们希望图标是可以缩放的，所以引入了字体图标。

字体图标优点

可以做出跟图片一样的效果，改变透明度、旋转度等

本质是文字，可以随意改变颜色、产生阴影、透明效果等

本身体积更小，但携带的信息并没有削减

几乎支持所有浏览器

移动端设备必备

字体图标使用流程

CSS_黑马基础高级技巧

设计字体图标

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

CSS_黑马基础高级技巧

 之后保存为svg格式，交给前端人员。

上传生成字体包

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

推荐网站

icomoon 字库  Icon Font & SVG Icon Sets ❍ IcoMoon ;

阿里 iconfont 字库 iconfont-阿里巴巴矢量图标库

下载兼容字体包

字体引入到HTML

第一步：在样式里面声明字体：告诉别人我们自己定义的字体

 @font-face {
   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> <span>

/* 或者 */

div::before {
  content:"\e91b"
}

CSS_黑马基础高级技巧

追加新图标到原来的库里

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。

把压缩包里面的 selection.json 重新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可。

所以压缩文件不能丢！

CSS_黑马基础高级技巧

#滑动门

滑动门出现的背景

制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下的感觉，但是最大的问题是里面的字数不一样。

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

核心技术

利用CSS精灵（主要是背景位置）和盒子padding撑开宽度，以便能适应不用字数的导航栏。

一般的经典布局为

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

总结：

1.a设置背景左侧，padding撑开合适宽度

2.span设置背景右侧，padding撑开合适宽度 剩下由文字继续撑开

3.之所以a包含span就是因为 整个导航栏都是可以点击的

CSS_黑马基础高级技巧

#before和after伪元素（详解）

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

类选择器 伪类选择器 是选取对象

伪元素选择器本质上是插入一个元素（标签 盒子） 只不过是行内元素 span a等

注意：

1.伪元素:before和:after添加的内容默认是inline元素，这个两个伪元素的content属性，表示伪元素的内容;设置:before和after时必须设置其content属性,否则伪元素就不起作用。
2.伪元素是不占位置的。

#过渡（CSS3）

过渡(transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
帧动画,通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片
在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有"属性"发生变化时即存在两种状态(我们用A和B代指)，就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。
 

语法格式

transition：要过渡的属性 花费时间 运动曲线 何时开始；CSS_黑马基础高级技巧

如果想所有的属性都改变，可以写all （transition-property）

CSS_黑马基础高级技巧

#2D变形transform （CSS3） 

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

transform:translate();

语法：transform：translate（x，y）；

使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动，x、y可以为负值

CSS_黑马基础高级技巧

translateX()； 只跟一个参数，就是x

translateY()； 只跟一个参数，y

若值为百分比，则为自己宽度/高度的百分比；只写一个参数则为x。

定位的盒子居中对齐的完美写法

position:absolute;
left:50%;
transform:translate(-50%);

transform:scale();

可以对元素进行水平和垂直方向的缩放。

语法：transform：scale()；

scale默认值是1；如果只写一个参数，宽度高度都缩放。

transform：rotate(deg)；

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

注意单位是deg度数

transform-origin

可以调整元素转换变形的原点，默认是中心点center center。

CSS_黑马基础高级技巧

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

如果是四个角可以用left top这些，如果想要精确的位置，可以用px像素

transform：skew(deg，deg)；

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

CSS_黑马基础高级技巧

3D变形transform （CSS3）

左手系坐标

CSS_黑马基础高级技巧

 CSS3中的3D坐标系相当于绕其X轴旋转了180度

CSS_黑马基础高级技巧

X左负右正

Y上负下正

Z里负外正

rotateX()

沿着X立体旋转

rotateY()

rotateZ()

沿着Z轴旋转相等于普通2D旋转

透视（perspective）

电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。透视可以将一个2D平面，在转换的过程当中，呈现3D效果（伪3D）。

  • 透视原理：近大远小。
  • 浏览器透视：把近大远小的所有图像，透视在屏幕上。
  • perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置注:并非任何情况下需要透视效果，根据开发需要进行设置。


perspective一般作为一个属性，设置给父元素，作用于所有3D转换的子元素理解透视距离原理。

视距越大透视效果越不明显，视距小明显

视距为0，没效果

translateX(x)

水平方向上移动

CSS_黑马基础高级技巧

translateY(y)

translateZ(z)

transformZ的直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性)。

透视是眼睛到屏幕的距离，透视只是一种展示形式，是有3D效果的意思

translateZ 是物体到屏幕的距离，Z就是来控制物体近大远小的具体情况

translateZ越大，我们看到物体越近，物体越大
 

translate3D(x，y，z)

transform：translate3d(x，y，z)；（d是小写）

x和y可以是px可以是%，但是z只能是px。

backface-visibility

定义当元素不面向屏幕时是否可见

透视是设置给父元素的，transition是给自己的，

#动画（CSS3）animation

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

引用动画语法格式：animation：动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向；

CSS_黑马基础高级技巧

div {
  width:100px;
  height:100px;
  background-color:pink;
  animation:go 2s ease 0s 2 reverse; /*引用动画*/
}

/*定义动画*/
@keyframes go {
  from {
    transform:translateX(0);
  }
  to {
    transform:translateX(600px);
  }
}

定义动画：@keyframes 动画名称 {} 

多组动画

CSS_黑马基础高级技巧

transform中如果有多组变形，可以用空格隔开。

#伸缩布局（CSS3）

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

flex

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

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

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

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

以前的布局：不能随便给边框和margin值，会容易掉下来
CSS_黑马基础高级技巧

现在的flex布局：通过flex确定份数

        section {
			width: 80%;
			height: 200px;
			border: 1px solid pink;
			margin:100px auto;
			/*给父盒子添加flex*/
			display: flex;/*伸缩布局模式*/
		}
		section div {
			height: 100%;
			
			
		}
		section div:nth-child(1) {
			background-color: pink;
			flex:1;
		}
		section div:nth-child(2) {
			background-color: lightskyblue;
			margin: 0 5px;
			flex:2;
		}
		section div:nth-child(3) {
			background-color: pink;
			flex:1;
		}

CSS_黑马基础高级技巧

但是往往不会让其缩的特别小，所以会在父盒子加上min-width ，同样也有最大宽度max-width 

flex-direction属性，设置横竖（水平和垂直）排列（row column），默认水平

取值：

CSS_黑马基础高级技巧

伸缩属性给父盒子添加

justify-content 调整主轴对齐

水平对齐

CSS_黑马基础高级技巧

 

align-items 调整侧轴对齐

垂直对齐

CSS_黑马基础高级技巧

 

flex-wrap 控制是否换行

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

CSS_黑马基础高级技巧

nowrap：强制一行展示

flex-flow

flex-flow是flex-direction、flex-wrap的简写形式

flex-flow：flex-direction，flexd-wrap；

flex-flow：排列方向 换不换行；

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

多行垂直对齐方式

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

必须对父元素设置*盒属性display：flex，并且设置排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap.wrap;这样这个属性的设置才会起作用。
CSS_黑马基础高级技巧

 

order

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

用CSS控制盒子的前后顺序

数字小的排在前面，默认为0.

语法：order：-1；

上一篇：CSS-transform/rotate


下一篇：redis主从复制