CSS小结

最新推荐文章于 2024-09-28 22:57:04 发布

SBJVHDSIFLS

最新推荐文章于 2024-09-28 22:57:04 发布

阅读量59

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/SBJVHDSIFLS/article/details/124228951

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

3.装饰文本text-decroaction

前言

CSS3小结

一、CSS是什么？

CSS是层叠样式表的简称，也是一种标记语言。

二.选择器

选择器就是根据不同的需求把不同的标签选出来这就是选择器的作用。

1.标签选择器

标签选择器是指HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

语法：

标签名{
   属性1：属性值1；
   属性2：属性值2；
   属性3：属性值3；
   ...
}

2.类选择器

2.1如果单独选择一个或几个标签，可以使用类选择器

类选择器在HTML中以class属性表示，在CSS中，类选择器以一个"."号显示

语法：

<div class='red'>变红色</div>

注意：1.类选择器使用"."进行标识，后面紧跟类名

2.尽量使用英文来命名，长名称或词组可以使用横线为选择器命名

2.2多类名的使用方式

语法：

<div class="red font20">yyds</div>

注意：在标签class属性中写多个类名，类名之间用空格隔开

3.id选择器

id选择器可以为标有特定id的HTML元素指定样式

HTML元素以id选择器，CSS中id选择器以"#"来定义

语法：

#id名 {
    属性1：属性值1；
    ...
}

特点：id选择器只能调用一次

4.通配符选择器

通配符选择器使用"*",它表示选取页面中所有元素。

语法：

* {
  属性1：属性值1；
...
}

5.后代选择器

后代选择器可以选择父元素里面的子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格隔开。当标签发生嵌套时，内层标签就成为外层标签的后代。

语法：

元素1 元素2 { 声明样式 }

6.子选择器

子元素选择器只能选择作为某元素的最近一级子元。

语法：

元素1 > 元素2 {样式声明}

7.并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式。任何形式的选择器都可作为并集选择器的一部分，之间通过英文逗号隔开。

语法：

元素1，元素2 {样式声明}

8.伪类选择器

伪类选择器用于向某些选择器添加特殊效果，伪类选择器最大的特点是用冒号（：）表示

8.1链接伪类选择器

a:link  /*选择所有未被访问的链接*/
a:visited  /*选择所有已被访问的链接*/
a:hover  /*选择鼠标指针位于其上的链接*/
a:active  /*选择活动链接（鼠标按下未弹起的链接）*/

注意：为了确保有效请按照LVHA的循顺序声明

8.2 focus伪类选择器

：focus伪类选择器用于用于获取焦点表单元素。

焦点是光标，一般情况<input>类表单元素才能获取，因此选择器也主要针对于表单元素来说。

input：focus {
  background-color: yellow;
}

9.属性选择器

属性选择器可以根据元素特定属性的来选择元素。

选择符	简介
E[att]	选择具有att属性的E元素
E[att="val"]	选择具有att属性且具有val的E元素
E[att^="val"]	选择具有att属性且以val开头的E元素
E[att$="val"]	选择具有att属性且以val结尾的E元素
E[att*="val"]	选择具有att属性且值中含有val的E元素

10.结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素

选择符	简介
E:first-chlid	匹配父元素中的第一个子元素E
E：last-child	匹配父元素中的最后一个子元素E
E：nth-child(n)	匹配父元素中的第n个子元素E
E：frist-of-type	指定类型E的第一个
E：last-of-type	指定类型E的最后一个
E：nth-of-type(n)	指定类型E的第n个

nth-child(n)选择某个父元素的一个或多个特定的子元素

n可以是数字，关键字和公式
n如果是数字，就是选择第n个子元素，里面数字从1开始...
n可以是关键字：even偶数，odd奇数
n可以是公式：常见的公式如下

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15...
n+5	从第5个开始（包含第五个）到最后
-n+5	前5个（包括第五个）...

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

11.伪元素选择器

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

选择符	简介
：：before	在元素内部的前面插入内容
：：after	在元素内部的后面插入内容

注意：1.before和after创建一个元素，但是属于行内元素

2.新创建的这个元素在文档树中找不到，所以我们称为伪元素

3.语法：element：：{}

4.before和after必须有content属性

5.before在父元素内容的前面创建元素，after在父元素内容的后面插入元素

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

三、字体属性

1.font-family设置字体系列

p { font-family:"微软雅黑"；}
div { font-family:Arial,"Microsoft yahei","微软雅黑"；}

注意：1.各种字体之间必须使用英文状态下的都好隔开

2.一般情况下，如果有空格隔开的多个单词组成字体加引号

3.尽量使用系统自带的字体

2.font-size设置字体大小

语法：

p {
   font-size: 20px;
}

注意：px（像素）大小是网页的最常用单位；不同浏览器默认字体大小可能不一，尽量设置明确值；可以body指定整个页面文字大小

3.font-weight设置字体粗细

语法：

属性值	描述
normal	默认值
bold	定义粗体
100-900	400=normal 700=bold

4.font-style设置字体样式

p {
   font-style: normal;
}

属性值	作用
normal	默认值
italic	斜体样式

5.复合属性写法

body {
  font: font-style font-weight font-size/line-height font-family;
}

注意：1.使用font属性时，必须按上面语法格式中顺序书写，不能更换顺序，并且各个属性之间用空格隔开

2.不需要的属性可以省略，但必须保留font-size和font-family属性

四、文本属性

1.文本颜色

color属性用于定义文本的颜色

div {
    color: red;
}

表示	属性值
预定义的颜色值	red green blue
十六进制	#FF0000
RGB代码	rgb（255，0，0）或rgb(100%，0%，0%)

2.对齐文本text-align

语法：

div {
  text-align: center
}

属性值	解释
left	左对齐
right	右对齐
center	居中对齐

3.装饰文本text-decroaction

语法：

div {
    text-decoration: underline;
}

属性值	描述
none	默认（没有装饰）
underline	下划线
overline	上划线
line-through	删除线

4.文本缩进text-indent

text-indent属性用来指定文本第一行的缩进

语法：

div {
  text-indent: 20px;
}
p {
  text-indent: 2em;
}

em是一个相对单位，就相当于当前元素1个文字大小

5.行间距line-height

语法：

p {
  line-height: 40px;
}

五.CSS引入方式

1.内部样式表

内部样式表是写到html页面内部，是将所有的html代码抽取出来单独放到<style>标签中。

<style>
   div {
     color: red;
     font-size: 12px;
   }
</style>

2.行内样式表

行内样式表是在元素标签内部的style属性中设定CSS样式。适于修改简单样式。

<div style="color: red;font-size: 12px;">yyds</div>

3.外部样式表

引入外部样式表分为两步：

1.新建一个后缀名为.CSS的样式文件，把所有CSS代码放到此文件中

2.在HTML页面中，使用<link>标签引入此文件。

<link rel="stylesheet" href="css文件路径">

六.元素的显示模式

1.块元素

常见的块元素有<p>、<div>、<ol>等

特点：1.独占一行，高度，宽度、外边距以及内边距都可以控制

2.宽度默认是容器的100%，里面可以放行内或块级元素

注意：1.文字类的元素不能使用块级元素

2.<p>、<h1>~<h6>标签主要用于存放文字，里面不能放其他块级元素

2.行内元素

常见行内元素有<a> <strong> <b> <em>等

特点：1.相邻的行内元素在一行，高宽设置直接无效，默认宽度是其内容的宽度

2.行内元素只能容纳文本或其他行内元素

注意：1.链接里面不能放链接

2.特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式更安全

3.行内块元素

几个特殊的标签：<img/> <input/> <td>

特点：1.和相邻行内元素在一行，他们之间有空隙，一行可以显示多个

2.默认宽度为其内容的宽度

3.高度，行高，外边距以及内边距都可以控制

4.显示模式转换

转换成块元素：display：block；
转换成行元素：display：inline；
转换成行内块：display：inline-block；

七.CSS背景

1.背景颜色

background-color属性定义了元素的背景颜色

background-color：颜色值

一般情况下元素的背景颜色默认值为transparent（透明），我们也可以手动指定颜色为透明色

2.背景图片

background-image属性描述了元素的背景图片

background-image ：none | url(url)

参数值	作用
none	无背景图
url	使用绝对或相对地址指定背景图片

3.背景平铺

语法：

background-repeat：repeat|no-repeat|repeat-x|repeat-y

参数值	作用
repeat	背景图像在纵向和横向上平铺
no-repeat	背景图片不平铺
repeat-x	背景图片在横向上平铺
repeat-y	背景图片在纵向上平铺

4.背景图片位置

background-position： x y

参数代表的意思：x坐标，y坐标，可以使用方位名词和精确单位

参数值	说明
length	百分数\|由浮点数和单位标识符组成的长度值
position	top\|center\|bottom\|left\|center\|right 方位名词

1.参数为方位名词

如果两个都是方位名词，则两个值前后顺序无关
如果只制定一个方位名词，另一个可以省略，则第二个默认居中

2.参数是精确单位

如果参数值是精确单位，那么第一个肯定是x坐标，第二个是y坐标
如果只指定一个数，那一个一定是x坐标，另一个默认居中

3.参数是混合单位

如果参数值是混合单位，那么第一个肯定是x坐标，第二个是y坐标

5.背景图像固定

语法：

background-attachment：scroll|fixed

参数	作用
scroll	背景图像随对象内容滚动
fixed	背景图像固定

6.背景复合写法

一般约定顺序：background：背景颜色背景图片地址背景平铺背景图像滚动背景图片位置；

7.背景颜色半透明

语法：

background：rgba（0，0，0，0.3）；

最后一个参数是alpha透明度，取值范围在0~1之间
我们习惯把0.3的0去掉
CSS新增属性，在IE9+版本浏览器才支持的

八.CSS的三大特性

1.层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突样式。

原则：1.样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式

2.样式不冲突，不会重叠

2.继承性

CSS中的继承：子标签会继承父标签的某些样式

注意：子元素可以继承父亲的样式（text-,font-,line-这些元素开头的属性，以及color属性）

行高的继承：

body {
  font: 12px/1.5 'Microsoft yahei';
}

注意：1.行高可以跟单位也可不跟单位，不跟单位相当于子元素大小的*1.5

2.如果子元素未设置行高，则会继承父元素的行高

3.优先级

当一个元素指定多个选择器，就会有优先级的产生。

选择器相同，则执行层叠行
选择器不同，则根据选择器的权重执行

选择器	选择器权重
继承或*	0.0.0.0
元素选择器	0.0.0.1
类选择器，伪类选择器	0.0.1.0
ID选择器	0.1.0.0
行内样式 styple=""	1.0.0.0
!important 重要的	无穷大

权重的叠加：如果是复合选择器，则会有权重的叠加，需要计算权重

九.盒子模型

CSS盒子模型本来就是一个盒子，封装周围的HTML元素，它包括：边框、外边框、内边距和实际内容

1.盒子的边框

语法：

border: border-width || border-style || border-color

属性	作用
border-width	定义边框粗细，单位为px
border-style	边框样式（solid 实线边框 dashed 虚线边框 dotted 点线边框）
border-color	边框颜色

边框的复合写法：

border: 1px solid red;//没有顺序

边框分开写法：

border:1px solid red;//只设定上边框，其他同理

border-collapse: collapse;//可以合并相邻的边框

边框会额外的增加盒子的实际大小。

解决方案：1.测量盒子不要量边框

2.如果测量的时候包括了边框，则需要width/height减去边框宽度

2.内边距

padding属性用于设置内边距，即边框与内容之间的距离

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

padding属性可以有一到四个值

值的个数	表达意思
padding：5px	代表上下左右都是5px的内边距
padding：5px 10px	代表上下的内边距5px，左右的内边距10px
padding：5px 10px 20px	代表上内边距5px,左右内边距10px，下内边距20px
padding：5px 10px 20px 50px	代表上5，右10，下20，左50

padding也会使盒子的实际大小变大（如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。

3.外边框

margin属性用于设置外边框，及控制盒子与盒子之间的距离

属性	作用
margin-left	左外边框
margin-right	右外边框
margin-top	上外边框
margin-bottom	下外边框

3.1水平居中

3.1.1块级盒子水平居中

外边距可以让块级盒子水平居中，但必须满足两个条件：

1.盒子必须制定了宽度

2.盒子左右外边距都设置为auto

.header{ width:960px; margin:0 auto;}

或margin-left：auto；margin-right：auto；或margin auto

3.1.2行内元素和行内块元素水平居中

行内元素或者行内块元素水平居中给其父元素添加text-align：center

3.2外边距盒子合并-嵌套元素塌陷

使用margin定义块元素的垂直外边距时，可能会出现外边距合并

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

解决方案：1.可以为父元素定义上边框

2.可以为父元素定义上内边距

3.可以为父元素添加overflow：hidden

3.3清除内外边距

* {
   margin：0；
   padding：0；
}

4.圆角边框

border-radius属性用于设置元素的外角框圆角

语法：

border-radius：length；

注意：1.参数值可以为数值或百分比的形式

2.如果是正方形，想要设置为一个圆，把数值修改为高度或宽度的一半即可，或直接写为50%

3.如果是长方形，设置为高度一半就可以做

4.也可以写成border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius

5.盒子阴影

语法：

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需。水平阴影的位置，允许负值
v-shadow	必需。垂直阴影的位置，允许负值
blur	可选。模糊距离
spread	可选。阴影尺寸
color	可选。阴影的颜色
inset	可选。将外部阴影（outset)改为内部阴影

注意：1.默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效

2.盒子阴影不占用空间，不会影响其他盒子排列

6.文字阴影

语法：

text-shadow： h-shadow v-shadow blur color;

值	描述
h-shadow	必需。水平阴影的位置，允许负值
v-shadow	必需。垂直阴影的位置，允许负值
blur	可选。模糊距离
color	可选。阴影的颜色

十.CSS浮动

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

网页布局第二准则：先确定块的大小，之后确定块的weizhi

1.浮动以及浮动的特性

float属性用于创建浮动框，将其移到一边，直到左边缘或右边缘触及含块或另一个浮动框的边缘

语法：

属性值	描述
none	元素不浮动（默认值）
left	元素左浮动
right	元素右浮动

特性：1.脱离标准流的控制（浮）移动到指定位置（动）
2.浮动的盒子不在保留原先的位置

3.如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列（浮动的元素是互相贴靠在一起的，如果父级的宽度转不下这些浮动的盒子，多出的盒子会另一行对齐）

4.浮动元素会具有行内块元素特性（如果块级盒子没有设置宽度，默认宽度和父级一样宽，但浮动后，他的大小由内容决定；行内元素同理）

注意：1.先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

2.浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准

2.清除浮动

为什么清除浮动?

由于浮动元素不在占有原文档流的位置，所以它会对后面的元素排版产生影响

清除浮动本质：1.清除浮动的本质是清除浮动元素造成的影响

2.如果父盒子本身有高度，则不需要清除浮动

3.清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

语法：

选择器{clear：属性值；}

属性值	描述
left	不允许左侧有浮动元素
right	不允许右侧有浮动元素
both	同时清除左右两侧浮动的影响

清除浮动方法：1.额外标签法

额外标签法会在浮动元素末尾添加一个空标签，例如<div style="clear:both"></div>

注意：要求这个新的空标签必须是块级元素

2.父级添加overflow

可以给父级添加overflow属性，将其属性设置为hidden、auto或scroll

3.after伪元素法

也是给父元素添加

.clearfix:after {
   content:""
   display:block;
   height: 0;
   clear:both;
   visibility:hidden;
}
.clearfix {  //IE6、7专有
   *zoom：1；
}

4.双伪元素

也是给父元素添加

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

十一.定位

定位可以让盒子自由的在某个盒子内移动位置或固定屏幕中某个位置，并且可以压住其他盒子

1.定位的组成

定位：将盒子定在某一个位置，所以定位也是再摆放盒子，按照定位的方式移动盒子。

定位=定位模式+边偏移

定位模式用于指定一个元素在文档中的定位方式。边偏移决定了该元素的最终位置。

边偏移属性	示例	描述
top	top:80px	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom:80px	底部偏移量，定义元素相对于其父元素下边线的距离
left	left:80px	左侧偏移量，定义元素相对于其父元素左边线的距离
right	right:80px	右侧偏移量，定义元素相对于其父元素右边线的距离

2.静态定位

静态定位是元素的默认定位方式，无定位的意思。

语法：

选择器 { position：static；}

3.相对定位

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。

语法：

选择器 { position：relative；}

特点：1.它相对于自己原来的位置来移动

2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它

4.绝对定位

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的

语法：

选择器 { position：absolute；}

特点：1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位

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

3.绝地定位不在占有原先位置

子绝父相：父级需要占有空间，因此使用相对定位，子盒不需要占有位置，则是绝对定位

盒子居中算法：left走50%父容器宽度的一半；margin负值往左走自己盒子宽度的一半

5.固定定位

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动元素位置不会改变

语法：

选择器{ position：fixed；}

特点：1.以浏览器的可视窗口为参考点移动元素（跟父元素没有任何关系；不随滚动条滚动）

2.固定定位不在占有原先的位置

固定在版心右侧位置的方法：1.让固定定位盒子：left50%.走到浏览器可视区的一般位置

2.让固定定位的盒子margin-left：版心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐

6.粘性定位

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

语法：

选择器{ position：sticky；top：10px;}

特点：1.以浏览器的可视窗口为参照点移动元素

2.粘性定位占有原先的位置

3.必须添加top、left、right、bottom其中一个才有效

7.定位叠放次序

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序

语法：

选择器{ z-index：1；}

特点：1.数值可以是正数值、负数值或0，默认是auto，数值越大，盒子越靠上

2.如果属性值相同，则按照书写顺序，后来居上

3.数值后面不能加单位

4.只有定位的盒子才有z-index属性

8.定位的特殊特性

1.行内元素添加绝对或固定定位，可以直接设置高度和宽度

2.块级元素添加绝对或固定定位，如果不给宽度或者高度，默认大小是内部的大小

3.浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并的问题

4.浮动元素只会压住它下面的标准流的盒子，但不会压住下面标准流盒子里面的文字；但是绝对定位（固定定位）会压住下面标准流所有的内容

十二.CSS高级技巧

1.精灵图

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，将多个小背景图片整合到一张大图片中主要借助于背景位置来实现--background-position，一般情况下精灵图都是负值（x轴右边走是正值）

2.字体图标

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

优点：1.一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少服务器请求

2.本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等

3.几乎支持所有浏览器，请放心使用

引入方法：1.把下载包里面的fonts文件夹放入页面根目录下

2.在CSS样式中全局声明字体：简单理解把这些字体文件通过CSS引入到我们页面中

3.html标签内添加小图标

字体追加：把压缩包里面的selection.json重新上传，然后选中自己想要的新的图标，重新下载压缩包，并替换原来的压缩包即可

3.CSS三角

div {
    width:0;
    height:0;
    line-height:0;
    font-size:0;
    border:50px solid transparent;
    border-left-color:pink;
}

4.用户界面

1.鼠标样式

li {cursor:pointer;}

属性值	描述
default	小白（默认）
pointer	小手
move	移动
text	文本
not-allowed	禁止

2.轮廓线

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

input{outline：none；}

3.文本域

textarea {resize:none;}

5.vertical-align属性应用

CSS的vertical-align属性使用场景：经常用于设置图片或表单（行内块元素）和文字垂直对齐。

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

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

解决方案：1.给图片添加vertical-align：middle|top|bottom等。

2.把图片转换成块级元素displacy：block；

6.溢出的文字省略号显示

1.单行文本溢出显示省略号--必须满足三个条件

/*1.先强制一行内显示文本*/
white-space:nowrap;(默认normal)
/*超出的部分隐藏*/
overflow：hidden；
/*文字用省略号替代超出部分*/
text-overflow：ellipsis；

2.多行文本溢出显示省略号

多行文本溢出显示省略号，有较大兼容性问题，适用于webkit浏览器或移动端（移动端大部分是webkit内核）

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

7.常用的布局机器

1.margin负值应用

让每个盒子margin往左侧移动-1px正好压住相邻盒子边框；鼠标经过某个盒子的时候，提高盒子的层级即可

2.文字围绕浮动元素

巧妙运用浮动元素不会压住文字的特性

3.行内块巧妙应用

4.css三角运用

width：0；
height：0；
border-color:transparent red transparent transparent;
border-style:solid;
border-width:22px 8px 0 0;

5.CSS初始化

CSS初始化是指重设浏览器样式，每个网页都必须首先进行CSS初始化。

8.CSS盒子模型

CSS中可以通过box-sizing来指定盒模型，有2个值：即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变

1.box-sizing：content-box盒子大小为width+padding+border（以前默认的）

2.box-sizing：border-box盒子大小为width

2不会以padding和border就会撑大盒子

9.CSS其他特性

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

filter：函数（）；例如：filter：blur(5px);blur模糊处理 数值越大越模糊

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

width：calc（100%-80px）;

括号里面可以使用+-*/来进行计算

CSS过渡

transition：要过渡的属性 花费的时间 运动曲线 何时开始

1.属性：想要变化的css属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以

2.花费时间：单位是秒必须写单位

3.曲线运动：默认是ease（可以省略）

4.何时开始：单位是秒（必须写单位）可以设置延迟触发时间默认是0s(可以省略)

10.2D转换

转换(transform)可以实现元素的位移、旋转、缩放等效果

位移语法:

transform:translate(x,y);或者分开写
transform:translateX(n);
transform:translateY(n);

重点:1.定义2D转换中的移动,沿着X和Y轴移动元素

2.translate最大的优点:不会影响到其他元素位置

3.translate中的百分比单位是相对于自生元素的translate:(50%,50%)

4.对行内标签没有效果

旋转语法:

transform:rotate(度数)

重点:1.rotate里面跟度数,单位deg

2.角度为正时,顺时针.负时,为逆时针

3.默认旋转的中心点是元素的中心点

缩放语法:

transform:scale(x,y);

重点:1.注意其中x和y用逗号分隔

2.transform:scale(1,1):宽和高都放大一倍,相当于没有放大

3.transform:scale(2):只写一个参数.第二个参数和第一个参数一样,相当于scale(2,2)

4.scale缩放最大的优势:可以设置转换中心点缩放,默认中心点缩放的,而且不影响其他盒子

2D转换中心点语法:

transform-origin:x y;

重点:1.注意后面的参数x和y用空格隔开

2.x y默认转换的中心点是元素的中心点(50% 50%)

3.还可以给x y设置像素或者方位名词 ( top bottom left right center)

2D转换综合写法

注意:1.同时使用多个转换,其格式为:transform:translate()rotate()scale()...等

2.其顺序会影响转换效果(先旋转会改变坐标轴方向)

3.当我们同时有位移和其他属性的时候,记得要将位移放到最前

11.动画

动画是CSS可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果;相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果

步骤:1.先定义动画

语法:(类似定义类选择器)

@keyframes 动画名称 {
   0%{
       width:100px;
   }
   100%{
       width:200px;
   }
}

0%是动画的开始,100%是动画的完成.这样的规则就是动画序列

在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果

动画使元素从一种样式逐渐变化为另一种样式的效果,你可以改变任意多的样式任意多的次数

请用百分比来规定变化发生的时间,或用关键词"from"和"to",等同于0%和100%

2.在使用(调用)动画

div {
      width:200px;
      height:200px;
      margin:100px auto;
      /*调用动画*/
      animation-name:动画名称;
      /*持续时间*/
      animation-duration:持续时间;
    }

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性,除了animation-play-state属性
animation-name	规定@keyframes动画名称.(必须的)
animation-duration	规定了动画完成一个周期所花费的秒或毫秒,默认是0(必须的)
animation-timing-function	规定动画的速度曲线,默认是"ease"
animation-delay	规定动画是何时开始.默认是0
animation-iteration-count	规定动画播放次数,默认是1,还有infinite
animation-direction	规定动画下一周期逆向播放,默认是"normal",alternate逆播放
animation-play-state	规定动画是否正在运行或暂停,默认是"running"还有"pause"
animation-fill-mode	规定动画结束后状态,保持forwards回到起始backwards

动画简写属性:animation:动画名称持续时间何时开始播放次数是否反方向动画起始或结束状态

animation-timing-function:规定动画的速度曲线

值	描述
linear	匀速
ease	动画以低速开始,然后加速,在结束前变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
steps()	指定了时间函数中的间隔数量(步长)

12.3D转换

3D移动在2D的基础上多加了一个可以移动的方向

transform:translateX()transform:translateY()transform:translateZ()
transform3d(x,y,z):其中xyz分别指要移动的轴的方向的距离

透视persprective写在被观察元素的父盒子上面的

视距就是一个距离人的眼睛到屏幕的距离;z轴越大我们看到的物体就越大

3D旋转rotate3d

3D旋转指可以在三维平面内沿着x轴y轴z轴或者自定义轴进行旋转

语法:1.transform:rotateX(45deg)

2.transform:rotate3d(x,y,z,deg)

3D呈现transform-style写给父级

flat子元素不开启3d立体空间 ;preserve-3d子元素开启立体空间

八、其他

1.Emmet语法

快速生成HTML结构语法

1.生成标签直接输入标签名按tab键即可

2.如果想生成多个相同标签加上*就可以了

3.如果父子级关系的标签，可以用>

4.如果兄弟关系的标签，用+即可

5.如果生成带有类名或者id名字的，直接写.demo或者#two tab键即可

6.如果生成div类名有顺序，可以用自增符合$

快速生成CSS样式语法：基本采取简写形式即可

2.单行文字垂直居中

解决方案：让文字行高等于盒子的高度

3.清除li的圆点的方法

li {
 list-style:none;
}

4.元素的显示与隐藏

让一个元素在页面中隐藏或者显示出来

1.display显示隐藏元素

display属性用于设置一个元素应如何显示

display：none；隐藏对象
display：block；出来转换为块级元素之外，同时还有显示元素的意思

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

2.visibility显示隐藏元素

如果隐藏元素想要原来的位置，就用visibility：hidden

如果隐藏元素不想要原来的位置，就用visibility：none

visibility：visible；元素可视

3.overflow溢出显示隐藏

overflow属性指定了如果内容溢出一个元素的框时，会发生什么

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条