Web开发之css

墨非墨Lg

已于 2023-08-25 21:45:59 修改

阅读量312

点赞数

分类专栏：笔记前端文章标签： css 前端

于 2023-08-25 21:39:57 首次发布

本文链接：https://blog.csdn.net/weixin_58487644/article/details/132503176

版权

笔记同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

前端

8 篇文章 2 订阅

订阅专栏

一、CSS介绍

CSS全称为层叠样式表，与HTML相辅相成，实现网页的排版布局与样式美化

CSS 指的是层叠样式表* (Cascading Style Sheets)
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
CSS 节省了大量工作。它可以同时控制多张网页的布局
外部样式表存储在 CSS 文件中

（一）CSS使用方式

1. 行内样式/内联样式（单一页面中使用）

借助于style标签属性，为当前的标签添加样式声明

<标签名 style="样式声明">

CSS样式声明 : 由CSS属性和值组成
例：

style="属性:值;属性:值;"

常用CSS属性 :

设置文本颜色 color:red;
设置背景颜色 background-color:green;
设置字体大小 font-size:32px;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jCXw9fI2-1692969229529)(assets\choice0.png)]

2. 内嵌样式（少量页面中使用）

借助于style标签，在HTML文档中嵌入CSS样式代码，可以实现CSS样式与HTML标签之间的分离,嵌入与html中的head中。同时需借助于CSS选择器到HTML 中匹配标签并应用样式
示例:

<style>
   	选择器{
   	 	属性:值;
    		属性:值;
   	}
</style>

选择器 : 通过标签名或者某些属性值到页面中选取相应的标签，为其应用样式
示例：

/*标签选择器 : 根据标签名匹配所有的该标签*/  
   p {
  color: red;
  }

注：

属性值前面，冒号后面,保留一个空格
选择器(标签)和大括号中间保留空格

3. 外链样式表（项目中使用）

创建外部样式表文件后缀使用.css
在HTML文件中使用标签引入外部样式表

<link rel="stylesheet" href="URL" type="text/css">

样式表文件中借助选择器匹配标签应用样式

在这里插入图片描述

注：在.css文件中引用其他css文件，

@import url("")

（二）样式表特征

1. 层叠性

多组CSS样式共同作用于一个标签

2. 继承性

后代标签可以继承祖先标签中的某些样式
例 : 大部分的文本属性都可以被继承

具有继承的属性有：

font(包含其所有的拆分写法)
color
cursor:default|auto|text|move|pointer|help （光标样式）
line-height
border-collapse
border-spacing
    表格样式：
      border-collapse,默认值为separate，设置值为collapse后相当于cellspacing="0";
      border-spacing,设置单元格与单元格之间的间距，设置大于0的值后相当于cellspacing="大于0的值"
          
list-style(包含其所有的拆分写法)
text-align
text-indent（缩进）
visibility(与display:none的区别:前者即使隐藏也保留空间，后者则不保留)
letter-spacing (字母或汉字间的间距)
word-spacing (单词间的间距，对中文无用)
white-space (文本换行处理，值为nowrap,则在一行内显示)

3. 样式表的优先级

优先级用来解决样式冲突问题。同一个标签的同一个样式(例如文本色)，在不同地方多次进行设置，最终选用哪一种样式？此时哪一种样式表的优先级高选用哪一种。

离标签最近的样式优先级最高（就近原则）
文档内嵌与外链样式表，优先级一致，看代码书写顺序，后来者居上
浏览器默认样式和继承样式优先级较低

在这里插入图片描述

二、CSS 选择器

1. 作用

匹配文档中的某些标签为其应用样式

2. 分类 :

(1) 标签选择器

根据标签名匹配文档中所有该标签
语法 :

标签名{
  属性:值;
}

在这里插入图片描述

(2)通配符选择器

在css中，通配符选择器使用**“*”**定义。表示选取页面中所有标签

*{
    margin:0;
}

(3) id选择器

根据标签的 id 属性值匹配文档中惟一的标签，id具有唯一性，不能重复使用，
语法 :

  #id属性值{
  
  }

注意 :id属性值自定义,可以由数字，字母，下划线，- 组成，不能以数字开头;

尽量见名知意，多个单词组成时，可以使用连接符，下划线，小驼峰表示。

在这里插入图片描述

(4)class选择器/类选择器

根据标签的class属性值匹配相应的标签,class属性值可以重复使用,实现样式的复用。
在标签属性中可以写多个类名，类名之间用空格分开
语法 :

.class属性值 {
 	
}

注意:标签与类选择器结合时,标签在前,类选择器在后例 : a.c1{ }

在这里插入图片描述

(5) 群组选择器

为一组标签统一设置样式
语法 :

selector1,selector2,selector3{	
}

(6) 后代选择器

匹配满足选择器的所有后代标签(包含直接子标签和间接子标签)
语法 :

selector1 selector2{
}

匹配selector1中所有满足selector2的后代标签

<div class="nav">
    <ul>
        <li><a href="">百度</a></li>
        <li><a href="">百度</a></li>
    </ul>
</div>

.nav a{
	color:red;
}

(7) 子代选择器

匹配满足选择器的所有直接子标签(仅查询到儿子一级，不会再往下查询了)
语法 :

selector1>selector2{
}

(8) 伪类选择器

为标签的不同状态分别设置样式,必须与基础选择器结合使用
分类 :

:link 超链接访问前的状态
:visited 超链接访问后的状态

:hover 鼠标滑过时的状态

:active 鼠标点按不抬起时的状态

:focus 焦点状态(文本框被编辑时就称为获取焦点)

注：以上伪类，按照顺序编写

选择器	例子	例子描述
:active	a:active	选择活动的链接。
:checked	input:checked	选择每个被选中的元素。
:disabled	input:disabled	选择每个被禁用的元素。
:empty	p:empty	选择没有子元素的每个元素。
:enabled	input:enabled	选择每个已启用的元素。
:first-child	p:first-child	选择作为其父的首个子元素的每个元素。
:first-of-type	p:first-of-type	选择作为其父的首个元素的每个元素。
:focus	input:focus	选择获得焦点的元素。
:hover	a:hover	选择鼠标悬停其上的链接。
:in-range	input:in-range	选择具有指定范围内的值的元素。
:invalid	input:invalid	选择所有具有无效值的元素。
:lang(language)	p:lang(it)	选择每个 lang 属性值以 “it” 开头的元素。
:last-child	p:last-child	选择作为其父的最后一个子元素的每个元素。
:last-of-type	p:last-of-type	选择作为其父的最后一个元素的每个元素。
:link	a:link	选择所有未被访问的链接。
:not(selector)	:not§	选择每个非元素的元素。
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个元素。
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个元素，从最后一个子元素计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择作为父的第二个元素的每个元素，从最后一个子元素计数
:nth-of-type(n)	p:nth-of-type(2)	选择作为其父的第二个元素的每个元素。
:only-of-type	p:only-of-type	选择作为其父的唯一元素的每个元素。
:only-child	p:only-child	选择作为其父的唯一子元素的元素。
:optional	input:optional	选择不带 “required” 属性的元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的元素。
:read-only	input:read-only	选择指定了 “readonly” 属性的元素。
:read-write	input:read-write	选择不带 “readonly” 属性的元素。
:required	input:required	选择指定了 “required” 属性的元素。
:root	root	选择元素的根元素。
:target	#news:target	选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid	input:valid	选择所有具有有效值的元素。
:visited	a:visited	选择所有已访问的链接。

注：可以通过元素的伪类选择器获取相同元素的某个元素

n如果是数字，就是选择第n个子元素，里面数字从1开始…

n可以是关键字:even偶数,odd奇数

标签:nth-child((第几个)/公式){}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LeRAc1CK-1692969229534)(assets\nth属性值.png)]

区别: E： nth-child，E:nth-of-type

nth-child对父元素里面所有孩子排序选择(序号是固定的）先找到第n个孩子，然后看看是否和E匹配
nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子

使用 :

.c1:hover{ }
.txt:focus{}
/*鼠标经过父类时，子类显示*/
.tudou:hover .mask{       
    display: block;
}

(9)属性选择器

在这里插入图片描述

input[value] {
	color:pink;
}

(10)伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTMI结构。

选择器	例子	例子描述
::after	p::after	在每个元素之后插入内容。
::before	p::before	在每个元素之前插入内容。
::first-letter	p::first-letter	选择每个元素的首字母。
::first-line	p::first-line	选择每个元素的首行。
::selection	p::selection	选择用户选择的元素部分。

before和after 创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以我们称为伪元素

语法:element::before {}

before和after 必须有content属性
before在父元素内容的前面创建元素，after在父元素内容的后面插入元素

伪元素选择器和标签选择器一样，权重为1

在这里插入图片描述

p::before {
position: absolute;right: 20px;
top: 10px;
content: " \e91e;   #添加的内容，字符
font-size: 20px;
}

#
.tudou: :before {
content: "";
/*隐藏遮罩层*/
display: none;
position: absolute;
top:0 ;
left: 0;
width: 100%;
height: 100%;
background: Orgba(0,0， 0， .4) ur1(images/arr.png) no-repeat center;

.tudou:hover::before {
/*而是显示元素*/
display: block;
}

::selection 选择器匹配被用户选取的选取是部分。

只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。

3. 选择器的优先级

选择器为标签设置样式，发生冲突时，主要看选择器的权重，权重越大，优先级越高，也可用 !important 变更。

选择器	权重
继承/*	0
标签选择器	1
(伪)类选择器	10
id选择器	100
行内样式	1000
!important	无穷大

复杂选择器(后代,子代,伪类)最终的权重为各个选择器权重值之和群组选择器权重以每个选择器单独的权重为准，不进行相加计算
例 :

/*群组选择器之间互相独立，不影响优先级*/  
body,h1,p{ /*标签选择器权重为 1 */   
 color:red;   
}   
.c1 a{ /*当前组合选择器权重为 10+1  */   
 color:green;   
}  
#d1>.c2{ /*当前组合选择器权重为 100+10 */   
 color:blue;   !important
}

三、基本属性

（一）字体/文本属性

1.字体系列

使用font-family属性定义文本的字体系列
语法：font-family：“字体类型”
‘’‘div {font-family: Arial,“微软雅黑”}’‘’

注：字体名称为中文，或名称中出现空格，使用引号

2. 字体大小

使用font-size属性定义字体大小。

语法：font-size: npx /em

W3C 建议使用 em 尺寸单位。

1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。

可以使用这个公式从像素到 em 来计算大小：pixels/16=em。

3. 字体粗细

使用font-weight属性定义字体大小。
语法：font-weihjt:normal/bold/bolder/lighter/number(正常/粗体/特粗/细体)
注：number：100|200|300|400(正常)|500|600|700(粗体)|800|900(不用带单位)

4.字体其他属性

字体间距

letter-spacing: npx/em

单词间距

word-spacing:npx/em

5. 字体样式

使用font-style属性定义文本的风格。
语法：font-style: normal(正常)/italic(斜体)

6. 字体复合

使用font属性定义字体。
语法：font: font-style font-weight font-size/line-height(行高。可省略) font-family;

7. 文本颜色

使用color属性定义文本颜色。
语法：color: #fff000(16进制)/rgb(255,0,0)/rgba(255,0,0,0.5)/red(颜色名称)

8. 对齐文本

使用text-align属性定义水平对齐方式。
语法：text-align: left/right/center
vertical-align属性使用场景∶经常用于设置图片或者表单(行内块元素）和字垂直对齐。只对行内元素或行内块元素有效

值	描述
baseline	默认。元素放置在父元素的基线上。
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。

9. 文本装饰

使用text-decoration属性定义文本的风格。
语法：text-decoration: none/underline(下划线)/overline(上划线)/line-through(删除线)

10. 文本缩进

使用text-indent属性定义文本的缩进常用于首行缩进 text-index:2em
语法：text-indent: n px/em;

注：em是一个相对单位，就是当前元素（font-size）1个文字的大小

11.文本阴影

text-shadow:x-shadow y-shadow [blur 模糊距离] color

设置文本阴影

如需在文本中添加多个阴影，您可以添加以逗号分隔的阴影列表。

多阴影：text-shadow:x y [blur color],x y [blur color] ,x y [blur color];

12.文本大小写

text-transform: uppercase/lowercase/capitalize(首字母大写)

13.文字换行

强制让文字换行

/*超出则自动换行，可能保留原有单词的完整性，可能会有留白*/
word-wrap:break-word;//溢出强行换行  --用得多写
word-wrap:normal;//溢出也不会换行，默认的方式
-----第二个属性-----
/*该属性也是让文字换行，直接折断文字，只要文字溢出就折行，*/
word-break:break-all; /*让文字换行*/

强制让中文文字不换行

white-space:nowrap|normal;
        不换行| 正常的，该换行自动换

----小技巧---让文字在一行显示超过父级后自动变省略号---！！！！-最有用
.cutFont{
   overflow: hidden;
   text-overflow: ellipsis; /*文本溢出用省略号代替*/
   white-space: nowrap;/*强行不换行*/
}
//注意：需要给标签添加一个宽度

13. 行间距

使用line-height属性定义行高。
语法：line-height: npx

注：文字垂直居中 -让文字行高等于盒子的行高

在这里插入图片描述

（二）颜色

指定颜色是通过使用预定义的颜色名称，或 RGB、HEX、HSL、RGBA、HSLA 值。

rgb(red, green, blue)

每个参数 (red、green 以及 blue) 定义了 0 到 255 之间的颜色强度。

例如，rgb(255, 0, 0) 显示为红色，因为红色设置为最大值（255），其他设置为 0。

要显示黑色，请将所有颜色参数设置为 0，如下所示：rgb(0, 0, 0)。

要显示白色，请将所有颜色参数设置为 255，如下所示：rgb(255, 255, 255)。
rgba(red, green, blue, alpha)

alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字
HEX 值

在 CSS 中，可以使用以下格式的十六进制值指定颜色

#rrggbb

其中 rr（红色）、gg（绿色）和 bb（蓝色）是介于 00 和 ff 之间的十六进制值（与十进制 0-255 相同）。

例如，#ff0000 显示为红色，因为红色设置为最大值（ff），其他设置为最小值（00）。

（三）背景

属性	作用	值	备注
background	复合写法	color img rep attach position
background-color	背景颜色	颜色英文/16进制/rgb（）/rgba/transprent透明
background-image	背景图片	url（“url地址”）
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y	默认/不平铺/横向/纵向
background-position	背景位置	x,y	center/top/left/right/bottom/n px
background-attachment	背景附着	scroll/fixed	背景图片滚动/固定

注：

(1) x,y的值：百分数/长度值，top/center/bottom/left/center/right 方位名词

(2) 背景色半透明-background: rgba()

1. 背景颜色

background-color: red;

2. 背景图片

1）设置背景图片/渐变效果

background-image : url("路径");

设置背景图片，指定图片路径，如果路径中出现中文或空格，需要加引号

线性渐变 （Linear Gradients）

语法，background-image: linear-gradient(direction/angle, color-stop1, color-stop2, ...);                             direction：to bottom、to top、to right、to left、to bottom right

从上到下的线性渐变：

#grad {
    background-image: linear-gradient(#e66465, #9198e5);
}

线性渐变 - 从左到右

#grad {
  height: 200px;
  background-image: linear-gradient(to right, red , yellow);
}

使用角度
```
#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}
```
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lyJIYMk0-1692969229537)(assets\angle.png)]

径向渐变

语法

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

颜色节点均匀分布的径向渐变：
#grad {
  background-image: radial-gradient(red, yellow, green);
}
颜色节点不均匀分布的径向渐变：
#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
形状为圆形的径向渐变：circle 表示圆形，ellipse 表示椭圆形。
#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

2）设置背景图片的重复方式

默认背景图片从元素的左上角显示，如果图片尺寸与元素尺寸不匹配时，会出现以下情况：

如果元素尺寸大于图片尺寸，会自动重复平铺，直至铺满整个元素
如果元素尺寸小于图片尺寸，图片默认从元素左上角开始显示，超出部分不可见

background-repeat:repeat/repeat-x/repeat-y/no-repeat

取值 ：
	repeat  默认值，沿水平和垂直方向重复平铺
	repeat-x 沿X轴重复平铺
	repeat-y 沿Y轴重复平铺
	no-repeat 不重复平铺

3）设置背景图片的显示位置

默认显示在元素左上角

background-position:x y;

取值方式：

1. 像素值
	设置背景图片的在元素坐标系中的起点坐标
2. 方位值
	水平：left/center/right
	垂直：top/center/bottom
	注：如果只设置某一个方向的方位值，另外一个方向默认为center

精灵图技术：为了减少网络请求，可以将所有的小图标拼接在一张图片上，一次网络请求全部得到；借助于background-position 进行背景图片位置的调整，实现显示不同的图标

sp{
    border: suild 1px red;
    /* 显示背景图片的宽高*/
    width:25px;
    height: 25px;
    background-image: url{}
}
sp1{
    border: suild 1px red;
    /* 显示背景图片的宽高*/
    width:25px;
    height: 25px;
    background-image: url{}
    background-position:0 -25px;
}

4）设置背景图片的尺寸

background-size:width height;

取值方式：

1. 像素值
	1. 500px 500px; 同时指定宽高
	2. 500px;  指定宽度，高度自适应
2. 百分比
	百分比参照元素的尺寸进行计算
	1. 50% 50%; 根据元素宽高,分别计算图片的宽高
	2. 50%; 根据元素宽度计算图片宽高,图片高度等比例缩放
3.
auto： 背景图像的真实大小。 
cover： 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。 
contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

5）背景图像固定

background-attachment属性设置背景图片是否固定或随着页面的其他部分滚动。

值	描述
scroll	背景图片随着页面的滚动而滚动，这是默认的。
fixed	背景图片不会随着页面的滚动而滚动。
local	背景图片会随着元素内容的滚动而滚动。

6）CSS 多重背景

CSS 允许您通过 background-image 属性为一个元素添加多幅背景图像。

不同的背景图像用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者。

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

3. 背景属性简写

background:color url("") repeat position;

/*在一个盒子中可以放多张背景图；*/
background:背景属性1,背景属性2,..;
背景属性：可以写我们学过的所有的背景属性，即可以是完整的背景属性。
background:url() no-repeat center,#f2f2f2 url() no-repeat right bottom;

注意：

如果需要同时设置以上属性值，遵照相应顺序书写
background-size 单独设置

4.背景透明度

使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。

opacity: ;  /*改变透明度0-1*/

如果您不希望对子元素应用不透明度，如上面的例子，请使用 RGBA 颜色值。

RGBA 颜色值指定为：rgba(red, green, blue, alpha)。 alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

5.背景模糊

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。

filter:函数();例如: filter: blur(5px); blur模糊处理数值越大越模糊

（四）边框

属性	描述
border	简写属性，在一条声明中设置所有边框属性。
border-color	简写属性，设置四条边框的颜色。
border-radius	简写属性，可设置圆角的所有四个 border-*-radius 属性。
border-style	简写属性，设置四条边框的样式。
border-width	简写属性，设置四条边框的宽度。
border-bottom	简写属性，在一条声明中设置所有下边框属性。
border-bottom-color	设置下边框的颜色。
border-bottom-style	设置下边框的样式。
border-bottom-width	设置下边框的宽度。
border-left	简写属性，在一条声明中设置所有左边框属性。
border-left-color	设置左边框的颜色。
border-left-style	设置左边框的样式。
border-left-width	设置左边框的宽度。
border-right	简写属性，在一条声明中设置所有右边框属性。
border-right-color	设置右边框的颜色。
border-right-style	设置右边框的样式。
border-right-width	设置右边框的宽度。
border-top	简写属性，在一条声明中设置所有上边框属性。
border-top-color	设置上边框的颜色。
border-top-style	设置上边框的样式。
border-top-width	设置上边框的宽度。

1) 边框实现

语法：

border:width style color;

边框样式为必填项，分为：

样式取值	含义
solid	实线边框
dotted	点线边框
dashed	虚线边框
double	双线边框

border-collapse:collapse; 控制浏览器绘制表格边框的方式，控制相邻单元格的边框。

CSS 边框宽度

border-width 属性指定四个边框的宽度。

可以将宽度设置为特定大小（以 px、pt、cm、em 计）
特定边框的颜色

border-color 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。
```
p.one {
  border-style: solid;
  border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}
```
圆角边框

border-radius 属性用于向元素添加圆角边框

2) 单边框设置

分别设置某一方向的边框，取值：width style color;

属性	作用
border-top	设置上边框
border-bottom	设置下边框
border-left	设置左边框
border-right	设置右边框

3) 网页三角标制作

标签设置宽高为0
统一设置四个方向透明边框

调整某个方向边框可见色

        test2{
            width: 0px;       /* 将宽高设为0*/
            height: 0px;      
            margin: 0 auto;   /* 居中*/
            border: 50px solid blue; /*100长边框，可以看成由4个三角形组成  */
            border-bottom-color: transparent; /*将下左右三角形透明，形成倒三角*/
            border-left-color: transparent;
            border-right-color: transparent;
        }

4) 圆角边框

在这里插入图片描述

属性：border-radius 指定圆角半径
取值：像素值或百分比
取值规律：

一个值 	表示统一设置上右下左
四个值 	表示分别设置上右下左
两个值 	表示分别设置上下 左右（对角线）
三个值 	表示分别设置上右下，左右保持一致

/*实现一个圆*/
#text3{      
            width: 100px;        /*一个正方形的元素*/
            height: 100px;
            background-color: green;
            margin: 0 auto;
            border: 2px solid blue;
            border-radius: 50px 50px; /*将半径设置为边的一半*/
        	}

5) 轮廓线

属性	描述
outline	简写属性，在一条声明中设置 outline-width、outline-style 以及 outline-color。
outline-color	设置轮廓的颜色。
outline-offset	指定轮廓与元素的边缘或边框之间的空间。
outline-style	设置轮廓的样式。
outline-width	设置轮廓的宽度。

属性：outline
取值：width style color
区别：边框实际占位，轮廓不占位
特殊：取none可以取消文本输入框默认轮廓线
outline-style 属性指定轮廓的样式，并可设置如下值：
- dotted - 定义点状的轮廓。
- dashed - 定义虚线的轮廓。
- solid - 定义实线的轮廓。
- double - 定义双线的轮廓。
- groove - 定义 3D 凹槽轮廓。
- ridge - 定义 3D 凸槽轮廓。
- inset - 定义 3D 凹边轮廓。
- outset - 定义 3D 凸边轮廓。
- none - 定义无轮廓。
- hidden - 定义隐藏的轮廓。

（五）盒子模型

1. 基础概念

盒子模型分别由外边距、边框、内边距和标签内容组成。

1)在模型中，它规定了标签处理内容、内边距、边框和外边距的方式

2)最内是内容，包围内容的是内边距，内边距的边缘是边框

3)边框以外是外边距，外边距默认是透明的

4)标签最终尺寸的计算

盒模型相关的属性会影响标签在文档中的实际占位，进而影响布局
标签设置width/height指定的是内容框的大小
最终尺寸 = width/height+padding+border

内外默认边距清除

padding: 0;

margin: 0

在这里插入图片描述

注：

CSS3中可以通过 box-sizing来指定盒模型，有2个值:即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况∶

box-sizing:content-box 盒子大小为width + pa dding + border（以前默认的)

box-sizing: border-box盒子大小为width

2.高度和宽度

属性	描述
height	设置元素的高度。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。

使用 width、max-width 和 margin: auto;

设置块级元素的 width 将防止其延伸到其容器的边缘。然后，您可以将外边距设置为 auto，以将元素在其容器中水平居中。元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配;

当浏览器窗口小于元素的宽度时，上面这个 <div> 会发生问题。浏览器会将水平滚动条添加到页面。在这种情况下，使用 max-width 可以改善浏览器对小窗口的处理。

3. 外边距

在这里插入图片描述

属性：margin
作用：调整标签与标签之间的距离
特殊：
1）margin:0; 取消默认外边距
2）**margin:0 auto;**左右自动外边距，实现标签在父标签范围内水平居中
3）margin:-10px;标签位置的微调负值相反方向移动
单方向外边距：只取一个值

 margin-top
 margin-right
 margin-bottom
 margin-left

注：固定宽度元素的居中实现方式：margin: 0 auto;

外边距合并：
1）垂直相遇

子标签的margin-top作用于父标签上

标签之间同时设置垂直方向的外边距，最终取较大的值 (自动合并)

在这里插入图片描述

2）包含合并

当一个标签包含在另一个标签中时，它们的上面和包含上面的父标签

下面和包含下面的外标签的边距之间也会发生合并

在这里插入图片描述

3）嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

注：浮动的盒子不会又外边距塌陷的问题

解决方案: （使父子元素的margin边距分离，不合并）

可以为父元素定义上边框。
可以为父元素定义上内边距。
可以为父元素添加overflow:hidden。

4. 内边距

在这里插入图片描述

属性：padding
作用：调整标签内容框与边框之间的距离
取值：单位是 px 或百分比，但不允许使用负值

20px;			 一个值表示统一设置上右下左
20px 30px;		 两个值表示分别设置(上下) (左右)
20px 30px 40px;	三个值表示分别设置上右下，左右保持一致
20px 30px 40px 50px;	表示分别设置上右下左

单方向内边距,只能取一个值：

padding-top
padding-right
padding-bottom
padding-left

注：若标签没指定width，height则padding无效

5. 盒阴影

在这里插入图片描述

属性：box-shadow
取值：h-shadow v-shadow blur spread color ;
使用：不管是浏览器窗口还是标签自身都可以构建坐标系，统一以左上角为原点，向右向下为X轴和Y轴的正方向

h-shadow 	取像素值，阴影的水平偏移距离
v-shadow 	取像素值，阴影的垂直偏移距离
blur 		取像素值，表示阴影的模糊程度，值越大越模糊
spread 		选填，取像素值，阴影的尺寸
color 		设置阴影颜色,默认为黑色
inset       可选。从外层的阴影（开始时）改变阴影内侧阴影

在一个盒子中也允许有多个阴影。逗号隔开一套属性。 div{ box-shadow:属性1,属性2; } 属性1：可以最多写6个属性，也可以只写2个。

（六）列表与表格样式

1.列表

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image	将图像设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。

list-style

简写属性在一个声明中设置所有的列表属性。

可以设置的属性（按顺序）： list-style-type, list-style-position, list-style-image.

可以不设置其中的某个值，比如 “list-style:circle inside;” 也是允许的。未设置的属性会使用其默认值。

list-style-image

值	描述
URL	图像的路径。
none	默认。无图形被显示。

list-style-position

list-style-position属性指示如何相对于对象的内容绘制列表项标记。

在这里插入图片描述

值	描述
inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。

list-style-type

值	描述
none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。
decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek	小写希腊字母(alpha, beta, gamma, 等。)
lower-latin	小写拉丁字母(a, b, c, d, e, 等。)
upper-latin	大写拉丁字母(A, B, C, D, E, 等。)
hebrew	传统的希伯来编号方式
armenian	传统的亚美尼亚编号方式
georgian	传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic	简单的表意数字
hiragana	标记是：a, i, u, e, o, ka, ki, 等。（日文平假名字符）
katakana	标记是：A, I, U, E, O, KA, KI, 等。（日文片假名字符）
hiragana-iroha	标记是：i, ro, ha, ni, ho, he, to, 等。（日文平假名序号）
katakana-iroha	标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名序号）

注：设置列表样式时，margin或padding的默认值不能为零

删除默认设置

list-style-type:none属性也可以用于删除标记/项目符号。请注意，列表还拥有默认的外边距和内边距。要删除此内容，请在 <ul> 或 <ol> 中添加margin:0和padding:0

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

2.表格

表格边框

border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框,即合并相邻单元格的边框。

table,td，th{
    border: 1px soild red;
    border- collapse: collapse
}

全宽表格

如果您需要一个可以覆盖整个屏幕（全宽）的表格，请为

元素添加 width: 100%

table {
  width: 100%;
}

（七）字体图标

字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

注意:字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

（1）使用

1．字体图标的下载

icomoon字库http://icomoon.io

阿里iconfont字库http://www.iconfont.cn/

bootstrap-icon库

2．字体图标的引入（引入到我们html页面中)

把下载包里面的fonts文件夹放入页面根目录下

通过css引用

/*css*/
font-face {
	font-family : "icomoon ' ;
	src:ur1 ( ' 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?7kkyc2s format ( " woff" ),
url ('fonts/icomoon.svg? 7kkyc2#icomoon ') format ( "svg ");
	font-weight : normal;
	font-style: normal;
	font-display:block;
    }

span{
    font-family : "icomoon '   /*此属性必须有*/
}
/*
<span> </span>
*/

//更对采用以下格式
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<i class="bi bi-car"></i>

在这里插入图片描述

3．字体图标的追加（以后添加新的小图标)

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

四、布局方式

在这里插入图片描述

1. 普通文档流

默认布局方式，按照代码书写顺序及标签类型从上到下，从左到右依次显示。

在这里插入图片描述

2. 浮动布局

主要用于设置块元素的水平排列

在这里插入图片描述

1）属性

float

2）取值

可取 left 或 right，设置元素向左浮动或向右浮动

float:left/right/none;
clear:left/right/both /*清楚浮动*/

3）特点

元素设置浮动会从原始位置脱流，向左或向右依次停靠在其他元素边缘，在文档中不再占位
元素设置浮动，就具有块元素的特征，可以手动调整宽高
“文字环绕”：浮动元素遮挡正常元素的位置，无法遮挡正常内容的显示，内容围绕在浮动元素周围显示

4）常见问题

a.子元素全部设置浮动，导致父元素高度为0，影响父元素背景色和背景图片展示,影响页面布局

在这里插入图片描述

解决方法

清除浮动的本质是清除浮动元素脱离标准流造成的影响
对于内容固定的元素，如果子元素都浮动，可以给父元素固定高度(例:导航栏)
在父元素的末尾添加空的块元素。设置 clear:both/left/right; 清除浮动
为父元素设置 overflow:hidden; 解决高度为0
父类添加after伪元素

.clearfix::after {
	content: "";  #伪元素必须写的案例 
	display: block; #插入的元素必须是块
	height: 0;  #不要看到这个元素
	clear: both; #清除浮动
	visibility: hidden;
}
.clearfix{   /*IE6-7专有*/  #不要看到这个元素
 zooe: l;
}

父类添加双伪类元素

.clearfix :before, .clearfixtafter {
	content :"" ;
	display:table;
}
.clearfix:after{ 
	clear:both;
	}
.clearfix {
	zoom:l;
	}

b.左侧盒子的边框压住了右侧盒子的边框

在这里插入图片描述

解决

1.让每个盒子margin往左侧移动-1px 正好压住相邻盒子边框
2.鼠标经过某个盒子的时候，提高当前盒子的层级即呵（如果没有有定位，则加相对定位（保留位置)，如果有定位，则加z-index)



#css
ul li{
	position: relative;
	float: left;
	list-style: none;
	width: 15epx;
	height: 200px;
	border: 1px solid red;
	margin-left: -1px;
}
/*ul li:hover {
1．如果盒子没有定位，则鼠标经过添加相对定位即可
position: relative;
border: 1px solid blue;
}*/
ul li:hover {
/*如果盒子有定位*/
z-index: 3
border: 1px solid blue;}

c. 文字围绕浮动元素

在这里插入图片描述

#html

<div class="box">
	<div class="pic">
		<img src="images/img.png" alt="">
	</div>
	<p>【集锦】热身赛-巴西0-1秘鲁内马尔替补两人血染赛场</p>

</div>


#css
<style>
margin-inline-start
.box {
	width: 300px;
	height:70px;
	background-color:pink;
	margin: 0 auto;

}
.box>.pic{
	float:left
	width: 120px;
	height: 60px;
	margin-right: 5px
}
.box>.pic>img{
	width: 100%;
	
}
</style>

5）注意点

浮动和标准流的父盒子搭配

先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置
一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题,浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流.

3. 定位布局

结合偏移属性调整元素的显示位置

属性	说明	值	CSS
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。	auto length % inherit	2
clip	剪辑一个绝对定位的元素	shape auto inherit	2
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。	auto length % inherit	2
position	指定元素的定位类型	absolute fixed relative static inherit	2
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。	auto length % inherit	2
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。	auto length % inherit	2
z-index	设置元素的堆叠顺序	number auto inherit	2

1）属性

position

2）取值

static 无定位
relative 相对定位
fixed 固定定位
absolute 绝对定位

sticky 根据用户的滚动位置进行定位

粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。

/*
Safari 需要 -webkit- 前缀（请参见下面的实例）。您还必须至少指定 top、right、bottom 或 left 之一，以便粘性定位起作用。
在此例中，在到达其滚动位置时，sticky 元素将停留在页面顶部（top: 0）
*/
div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

3）偏移属性

设置定位的元素可以使用偏移属性调整距离参照物的位置

top   	距参照物的顶部
right	距参照物的右侧
bottom	距参照物的底部
left	距参照物的左侧

4）分类

relative 相对定位

元素设置相对定位,可参照元素在文档中的原始位置进行偏移,不会脱离文档流

absolute 绝对定位

绝对定位的元素参照离他最近的已经定位的祖先元素进行偏移,如果没有,则参照窗口进行偏移

绝对定位的元素会脱流,在文档中不占位,可以手动设置宽高

使用绝对定位 : 父元素设置相对定位,子元素绝对定位，参照已定位的父元素偏移

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位(Document文档)。

如果祖先元素有定位〔相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置.

绝对定位的盒子水平居中

1.让固定定位的盒子left: 50%，走到浏览器可视区（也可以看做版心）的一半位置,

2.让固定定位的盒子margin-left: -(盒子一半)

绝对定位的盒子垂直居中

1.让固定定位的盒子top: 50%，走到浏览器可视区（也可以看做版心）的一半位置,

2.让固定定位的盒子margin-top: -(盒子一半)

绝对定位会完全压住盒子

浮动元素只压住它下面标准流的盒子，不会压住下面标准流盒子里面的文字（图片）。

绝对定位会压住下面标准流所有的内容。

在这里插入图片描述

fixed 固定定位

参照窗口进行定位,不跟随网页滚动而滚动
脱离文档流使界面不滚动
在设置位置时，需与偏移量一起用

固定在版心右侧位置：

1.让固定定位的盒子left: 50%，走到浏览器可视区（也可以看做版心）的一半位置,

2.让固定定位的盒子margin-left:版心宽度的一半距离。多走版心宽度的一半位置

sticky 粘性定位

粘性定位可以被认为是相对定位和固定定位的混合。

粘性定位的特点∶
1.以浏览器的可视因口为参照点移动元素〔固定定位特点}

2．粘性定位占有原先的位置〔相对定位特点)
3，必须忝加 top . left、right、bottorm其中一个才有效

4.ie不支持

语法：

选择器 [ position: sticky top: 1px; ]

5）堆叠次序

元素发生堆叠时可以使用 z-index 属性调整已定位元素的显示位置，值越大元素越靠上：

属性 : z-index
取值 : 无单位的数值,数值越大，越靠上
堆叠：

定位元素与文档中正常元素发生堆叠，永远是已定位元素在上
同为已定位元素发生堆叠，按照 HTML 代码的书写顺序，后来者居上
元素的默认z-index值：1

5.display/visibility

(1)display

display.none ;隐藏对象
display : block ;除了转换为块级元素之外，同时还有显示元素的意思

display隐藏元素后，不再占有原来的位置。

(2)visibility

visibility : visible;元素可视

visibility : hidden;元素隐藏

隐藏元素后，占有原来的位置。

6.溢出

overflow	设置当元素的内容溢出其区域时发生的事情。	auto hidden scroll visible inherit	2
overflow-y	指定如何处理顶部/底部边缘的内容溢出元素的内容区域	auto hidden scroll visible no-display no-content	2
overflow-x	指定如何处理右边/左边边缘的内容溢出元素的内容区域	auto hidden scroll visible no-display no-content	2

属性

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。溢出会自动显示滚动条

但是如果有定位的盒子，请慎用overflowc.hidden因为它会隐藏多余的部分。

溢出省略号显示

单行文本

/*1．先强制一行内显示文本*/
white-space: nowrap;(默认normal自动换行)
/*2．超出的部分隐藏*/
overflow: hidden;
/*3．文字用省略号替代超出的部分*/

text-overflow : ellipsis;

多行

适合于webKit浏览器或移动端

overflow : hidden ;
text-overflow: ellipsis;/*弹性伸缩盒子模型显示*/
display: -webkit-box
/*限制在一个块元素显示的文本的行数*/-webkit-line-clamp: 2;
/*设置或检素伸缩盒对象的子元素的排列方式*/-webkit-box-orient : vertical;

7.其他

行内块运用

在这里插入图片描述

#html
<div class="box">
	<a href="#">&lt;&lt;上一页</a>
	<a href="#">2</a>
	<a href="#">3</a>
	<a href="#">4</a>
	<a href="#">5</a>
	<a href="#">6</a>
	<a href="#">...</a>
	<a href="#>&gt;&gt;下一页</a>
	到第
	<input type="text"></input>页
	<button>确定</button>
</div>

#css
*{
	margin: 0;
	padding: 0;
}
.box{
	tex-align:center;
}
.box a {
	display: inline-block;
	width: 36px;
	height: 36px;
	background-color:#f7f7f7;
	border: 1px solid#ccc;
	text-align: center;
	line-height: 36px;
	text-decoration: none;
	color:#333;
}
.box a:nth-child(1),.box a:nth-child(8){
	width: 85px;
}
.box a:nth-child(2),.box a:nth-child(7){
 	border:none;
 	background-color: white;
}
.box>input{
	height: 36px;
	width: 45px;
	border: 1px soild #ccc;
	outline:none;
}
.box>button{
	height: 36px;
	width: 60px;
	border: 1px soild #ccc;
	background-color: white;
	
}

css三角强化

在这里插入图片描述

#css
.box1 {    #长三角
	width: 0;
	height: 0;
	border-top: 100px solid transparent;
	border-right: 5opx solidskyblue;
	border-bottom: 0 solid blue;
	border-left: 0 solid green;
}
#html

五、动画

（一）过渡

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

过渡动画︰是从一个状态渐渐的过渡到另外一个状态

可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持( ie9以下版本）但是不会影响页面布局。
我们现在经常和:hover一起搭配使用。

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。
transition-delay	规定过渡效果何时开始。默认是 0。

transition:要过渡的属性 花费时间 运动曲线 何时开始;
1.属性︰想要变化的css属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以。默认是all,key
⒉花费时间:单位是秒（必须写单位）比如0.5s
3.运动曲线:默认是ease(可以省略)
4.何时开始︰单位是秒(必须写单位）可以设置延迟触发时间默认是0s（可以省略)

<div> </div>
div{
	width: 200px;
	height:100px;
	background-color: pink;
	transition: all 1s ease 1s;
	/* transition: width 1s ease 1s ,height 1s ease 1s;*/
	
}
div:hover{
	width: 400px;
	height: 200px;
}

transition-timing-function

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

在这里插入图片描述

#进度条
#html
<div class="bar">
	<div class="bar_in"> <div>
</div>
#css
.bar{
	width: 150px;
	height:15px;
	border: 1px soild red;
	border-radio:7px;
	padding: 1px;
}
.bar_in{
	width:50%;
	height:100%;
	background-color:red;
	transition: all 1s;#谁做过渡给谁加
}
.bar:hover>.bar_in{
	weight:100%
}

（二）2D转换 transform

转换( transform )是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(360deg)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。
transform-origin: x y;	设置元素转换的中心点

translate

定义2D转换中的移动，沿着×和Y轴移动元素

translate最大的优点:不会影响到其他元素的位置
translate中的百分比单位是相对于自身元素的translate:(50%,50%);

对行内标签没有效果

transform-origin

注意后面的参数x和y用空格隔开
xy默认转换的中心点是元素的中心点(50%50%)
还可以给xy设置像素或者方位名词( top bottom left right center )

默认原点是左上角

scale

注意其中的x和y用逗号分隔
transform:scale(1,1):宽和高都放大一倍，相对于没有放大

transform:scale(2.2):宽和高都放大了2倍
transform:scale(2):只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)

transform:scale(0.5,0.5):缩小
sacle缩放最大的优势:可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

注：

同时使用多个转换，其格式为:transform: translate() rotate( scale) …等，

其顺序会影转换的效果。(先旋转会改变坐标轴方向)
当我们同时有位移和其他属性的时候，记得要将位移放到最前

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}
#盒子居中
p{
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 20epx;
background-color:purple;
/*margin-top: -108px;
margin-left: -10epx;*/
transform: translate(-50%,-50%);
}

#三角动画
div {
position: relative;
width: 249px;
height: 35px;
border: 1px solid #eee;
}
div: :after {
content:"";
position: absolute;
top: 0;
right: 0;
width: 15px;
height: 15px;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
transform: rotate(45deg);

}

（三）3D转换

在这里插入图片描述

转换属性

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。
transform-style	规定被嵌套元素如何在 3D 空间中显示。
perspective	规定 3D 元素的透视效果。
perspective-origin	规定 3D 元素的底部位置。
backface-visibility	定义元素在不面对屏幕时是否可见。

3D 转换方法 transform

函数	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。只能npx
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

透视写在被观察元素的父盒子上面的,透视我们也称为视距:视距就是人的眼睛到屏幕的距离,距离视觉点越近(值越小)的在电脑平面成像越大，越远成像越小(值越大),透视的单位是像素.一般取值为800-1200

z轴，物体距离屏幕的距离。z轴越大(正值）我们看到的物体就越大。（下图表示为正值）

transform:rotate3d

transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度（了解即可)
xyz是表示旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标示旋转的角度。
transform:rotate3d(1,0,0,45deg)就是沿着x轴旋转45deg
transform:rotate3d(1,1,0,45deg)就是沿着对角线旋转45deg

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0oNSrjpT-1692969229551)(E:\компьютер\web\web\assets\左手准则.png)]

3D呈现transform-style

控制子元素是否开启三维立体环境。。
transform-style:flat子元素不开启3d立体空间默认的transform-style: preserve-3d;子元素开启立体空间代码写给父级，但是影响的是子盒子

<style>
        body {
            perspective: 500px;
        }
        
        .box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transition: all 2s;
            /* 让子元素保持3d立体空间环境 */
            transform-style: preserve-3d;
        }
        
        .box:hover {
            transform: rotateY(60deg);
        }
        
        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: pink;
        }
        
        .box div:last-child {
            background-color: purple;
            transform: rotateX(60deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div></div>
        <div></div>
    </div>
</body>

在这里插入图片描述

#两面翻转的盒子
<div class="box">
	<div class="front"">你好，朋友</ div>
	<div class=""back">很高兴认识你</div>
</ div>

.box{
	position:relative;
	width: 300px;
	height:300px;
	margin: 100px auto;
	transiton: all 0.6s;
	transform-style: preserve-3d;
}

.box:hover{
transform: rotateY(180deg)
}
.font,
.back{
	position: absolute;
	top: 0;
	left: 0;
	width:100%;
	height: 100%
	border-radius:50%;
	font-size: 30px;
	color: white;
	text-align: center;
	line-height: 300px
}

.font{
	background-color:red;
	z-index:1;
}
.back{
	background-color: purple;
	#背靠背
	transform: rotateY(180deg);
}

#3D导航栏
<ul>
	<li>
		<div class=box>
			<div class="front"">你好，朋友</ div>
			<div class=""back">很高兴认识你</div>>
		</ div>

	</li>
</ul>

ul{
	margin: 100px;
}
ul>li{
	width: 120px;
	height:35px;
	perspective: 500px;
}
.box{
	position:relative;
	width: 100%;
	height: 100%;
	#让其孩子保留3d效果
	transform-style: preserve-3d;
	transition: all .4s;
}
.box:hover{
	transform: rotateX(90deg);
}
.front,
.back{
	position:absolute;
	left:0;
	top: 0;
	weith: 100%;
	height: 100%;
}
.font{
	background-color:red;
	z-index:1;
	transform:translateZ(17.5px);
}
.back{
	background-color: purple;
	transform:translateY(17.5px) rotateX(-90deg);
	
}

#旋转木马
 body {
            perspective: 1000px;
        }
        
        section {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 150px auto;
            transform-style: preserve-3d;
            /* 添加动画效果 */
            animation: rotate 10s linear infinite;
            background: url(media/pig.jpg) no-repeat;
        }
        
        section:hover {
            /* 鼠标放入section 停止动画 */
            animation-play-state: paused;
        }
        
        @keyframes rotate {
            0% {
                transform: rotateY(0);
            }
            100% {
                transform: rotateY(360deg);
            }
        }
        
        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(media/dog.jpg) no-repeat;
        }
        #让其绕
        section div:nth-child(1) {
            transform: rotateY(0) translateZ(300px);
        }
        
        section div:nth-child(2) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(60deg) translateZ(300px);
        }
        
        section div:nth-child(3) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(120deg) translateZ(300px);
        }
        
        section div:nth-child(4) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(180deg) translateZ(300px);
        }
        
        section div:nth-child(5) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(240deg) translateZ(300px);
        }
        
        section div:nth-child(6) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(300deg) translateZ(300px);
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

（四）动画

动画( animation)是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

属性	描述
@keyframes	定义动画。
animation	所有动画属性的简写属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 “ease”。
animation-delay	规定动画何时开始。默认是 0。
animation-fill-mode	规定动画结束后状态,保持forwards 回到起始backwards
animation-iteration-count	规定动画被播放的次数。默认是 1。infinite 无限次
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。alternate 逆向地播放
animation-play-state	paused为暂停，通常配合:hover使用

animation :动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态;
animation: myfirst 5s linear 2s infinite alternate;

注：margin和transform:translate会影响动画效果

animation-timing-function

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
steps(int,start\|end)	指定了时间函数中的间隔数量（步长）。有两个参数，第一个参数指定函数的间隔数，该参数是一个正整数（大于 0）。第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。含义分别如下：start：表示直接开始。end：默认值，表示戛然而止。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

#动画的使用
#1.定义动画
#用keyframes定义动画(类似定义类选择器)
@keyframes 动画名称{
	0%{
		width: 100px;
	}
	50%{
		width: 150px;
	}
	100%{
		width: 200px;
	}
}

0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词"from"和"to”，等同于0%和100%。

#2.使用动画
/*调用动画*/
animation-name:动画名称;
/*持续时间*/
animation-duration:持续时间;


#css
div{
width:200px;
height: 200px;
background-color:green
animation-name: move;
animation-duration: 2s
}
@keyframes move{
	0%{
		transform: translateX(0px)
	}
	100%{
		transform: translateX(1000px)
	}
}

#html
<div></div>

#热点图
<div class="map">
	<div class="city">
		<div class="dotted">
		
		</div>
		<div class="pulse1">
		
		</div>
		<div class="pulse2">
		
		</div>
		<div class="pulse3">
		
		</div>
	</div>
</div>
body{
	background-color: #ccc
}
.map{
	position: relative;
	width: 747px;
	height: 616px;
	background:url("") no-repeat
}
.city{
	position: absolute;
	top: 227px;
	right: 193px;
}
.dotted{
	width: 8px;
	height: 8px;
	border-radio: 50%;
	background-color: blue;
}
.city div[class^="pulse"]{
	#保证水平垂直居中
	position: absolute;
	top: 50%;
	left: 50%
	transform: translate(-50%,-50%)
	
	width:8px;
	height: 8px;
	box-shadow: 0 0 12px blue;
	border-radio: 50%;
	
	animation: pulse 1.2s linear infinite;	
	
}
.city .pulse2{
	animation-delay: 0.4s;
}
.city .pulse3{
	animation-delay: 0.8s;
}
@keyframes pulse{
	0%{
		
	}
	70%{
		width: 40px;
		height: 40px;
		opacity:1; #透明度
		
	}
	100%{
		width: 70px;
		height: 70px;
		opacity:0;
	}
}

在这里插入图片描述

#奔跑的小熊

#html
<div> </div>
#css
div{
	position: absolute;
	width:200px;
	height: 100px;
	background: url() no-repeat;
	#可以添加多个动画，用逗号分割
	animation:bear 1s steps(8) infinite,move 2s forwords;
}

@keyframes bear{
	0%{
		
	}

	100%{
		backgrount-position: -1600px 0;
	}
}
@keyframes move{
	0%{
		left:0;
	}

	100%{
		left:50%;
		transform: translanteX(-50%);
	}
}

在这里插入图片描述

六、其他属性

1.object-fit 属性

CSS object-fit 属性用于指定应如何调整或的大小以适合其容器。

这个属性告诉内容以不同的方式填充容器。比如“保留长宽比”或者“展开并占用尽可能多的空间”。

object-fit 属性可接受如下值：

fill - 默认值。调整替换后的内容大小，以填充元素的内容框。如有必要，将拉伸或挤压物体以适应该对象。
contain - 缩放替换后的内容以保持其纵横比，同时将其放入元素的内容框。
cover - 调整替换内容的大小，以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪以适应。
none - 不对替换的内容调整大小。
scale-down - 调整内容大小就像没有指定内容或包含内容一样（将导致较小的具体对象尺寸）

//使用 object-fit: cover;，它会剪切图像的侧面，保留长宽比，并填充空间
img {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

2.CSS 变量

var() 函数用于插入 CSS 变量的值。

CSS 变量可以访问 DOM，这意味着您可以创建具有局部或全局范围的变量，使用 JavaScript 来修改变量，以及基于媒体查询来修改变量。

var() 函数的语法

var(name, value)

值	描述
name	必需。变量名（以两条破折号开头）。
value	可选。回退值（在未找到变量时使用）。

变量名称必须以两个破折号（–）开头，且区分大小写！

全局变量可以在整个文档中进行访问/使用，而局部变量只能在声明它的选择器内部使用。

如需创建具有全局作用域的变量，请在 :root 选择器中声明它。 :root 选择器匹配文档的根元素。

如需创建具有局部作用域的变量，请在将要使用它的选择器中声明它。

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

body { background-color: var(--blue); }

使用 JavaScript 更改变量

// 获取根元素
var r = document.querySelector(':root');

// 创建获取变量值的函数
function myFunction_get() {
  // Get the styles (properties and values) for the root
  var rs = getComputedStyle(r);
  // Alert the value of the --blue variable
  alert("The value of --blue is: " + rs.getPropertyValue('--blue'));
}

// 创建设置变量值的函数
function myFunction_set() {
  // Set the value of variable --blue to another value (in this case "lightblue")
  r.style.setProperty('--blue', 'lightblue');
}

2.less语法

使用less语法快速编译生成css代码，less是一个css预处理器，后缀是.less，扩充了css语言，使css具备一定的逻辑性、计算能力；浏览器不识别less代码。

注释
- 单行
  
  //内容（ctrl+/）
- 多行
  
  / * 内容* /
运算
- 加减乘直接书写表达式 width: 4+4px;
- 除法需要加小括号
嵌套-后代选择器
```
.父选择器{
	
	.子选择器{
	
	}
}
```
注：&不生成后代选择器，表示当前选择器，配合伪类或伪元素使用
变量

把属性值提前存储到一个容器，设置属性值为这个容器名
- 语法
  
  定义变量：@变量名：值；
  
  使用变量：css属性：@变量名;
导入其他less文件

@import “文件路径”；
```
@import 'base.less';
```
导出位置

在这里插入图片描述

代码：

"less.compile":{
	"out":"../css/"
}

方法二

/*在文件内第一行写*/
// out:../css/

禁止导出
```
// out:f
```

3.精灵图

(1)使用精灵图核心∶

1．精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。

2．这个大图片也称为sprites精灵图或者雪碧图
3.移动背景图片位置，此时可以使用background-position.
4.移动的距离就是这个目标图片的×和y坐标。注意网页中的坐标有所不同

5.因为一般情况下图片都是往上往左移动，所以数值是负值。
6.使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。

（2）代码例子

#html
<div class="box1"></div>

#css
<style>
.box1 {
	width: 60px;
	height: 60px;
	margin: 100px auto;
	background: url(images/sprites.png) no-repeat -182px 0;

}
</style>

5. 界面样式

(1)鼠标样式 cursor

显示光标移动到指定的类型

属性值

值	描述
url	需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
not-allowed	禁止
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。

(2)表单轮廓 outline

给表单添加outline: 0;或者 outline: none;样式之后，就可以去掉默认的蓝色边框。

(3)防止表单域拖拽 resize

textarea{ resize: none;}

6.图片底部空隙

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

主要解决方法有两种:
1．给图片添加vertical-align:middle | top/ bottom等。（提倡使用的)

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

7.calc函数

calc()此CSS函数让你在声明CSS属性值时执行一些计算。

width: calc(100% - 80px);  /*在父盒子的宽度减去80px*/
width: calc(100px - 80px);

墨非墨Lg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web开发之css

CSS全称为层叠样式表，与HTML相辅相成，实现网页的排版布局与样式美化
复制链接

扫一扫

专栏目录

Web开发之css

一、CSS介绍

（一）CSS使用方式

1. 行内样式/内联样式（单一页面中使用）

设置背景颜色 background-color:green;

2. 内嵌样式（少量页面中使用）

3. 外链样式表（项目中使用）

（二） 样式表特征

1. 层叠性

2. 继承性

3. 样式表的优先级

二、CSS 选择器

1. 作用

2. 分类 :

(1) 标签选择器

(2)通配符选择器

(3) id选择器

(4)class选择器/类选择器

(5) 群组选择器

(6) 后代选择器

(7) 子代选择器

(8) 伪类选择器

(9)属性选择器

(10)伪元素选择器

3. 选择器的优先级

三、基本属性

（一）字体/文本属性

1.字体系列

2. 字体大小

3. 字体粗细

4.字体其他属性

5. 字体样式

6. 字体复合

7. 文本颜色

8. 对齐文本

9. 文本装饰

10. 文本缩进

11.文本阴影

12.文本大小写

13.文字换行

13. 行间距

（二）颜色

rgb(red, green, blue)

rgba(red, green, blue, alpha)

HEX 值

（三）背景

1. 背景颜色

2. 背景图片

1）设置背景图片/渐变效果

2）设置背景图片的重复方式

3）设置背景图片的显示位置

4）设置背景图片的尺寸

5）背景图像固定

6）CSS 多重背景

3. 背景属性简写

4.背景透明度

5.背景模糊

（四） 边框

1) 边框实现

2) 单边框设置

3) 网页三角标制作

4) 圆角边框

5) 轮廓线

（五）盒子模型

1. 基础概念

2.高度和宽度

3. 外边距

4. 内边距

5. 盒阴影

（六）列表与表格样式

1.列表

2.表格

（七）字体图标

四、布局方式

1. 普通文档流

2. 浮动布局

1）属性

2）取值

3）特点

4）常见问题

（二）样式表特征

（四）边框