CSS属性复习

1：基础选择器

①标签选择器/元素选择器

标签名 {

}

②类选择器

标签内加上class="类名"

类名最好不要使用纯数字、中文等命名，尽量使用中文字母来表示

.类名 {

}

也可以使用多类名

class="类名1 类名2 类名3"

③id选择器

标签内加上id="id名"（常与JS搭配使用）

#id名 {

}

类选择器与id选择器的区别：

同一个类可以被多次调用，但同一个id只能调用一次

④通配符选择器

选取页面中的所有元素标签

* {

}

2：复合选择器

⑤后代选择器（包含选择器）

父级元素  子级元素/孙子级元素 {

}

⑥子选择器

只能选择最近一级子元素

父级元素>子级元素 {

}

⑦并集选择器

可以选择多组标签，同时为他们定义相同样式，通常用于集体声明，

元素1，元素2 {

}

⑧链接伪类选择器

a:link                /选择所有未被访问过的链接/

a:visited           /选择所有已被访问过的链接/

a:hover            /选择鼠标指针位于其上的链接/

a:active           /选择活动链接(鼠标按下未弹起的链接)/

如果写多种，要按照上述顺序来写，否则不会生效

⑨focus伪类选择器

input:focus {

}

3：字体属性(font)

①:font-family

定义文本的字体系列

font-family:'微软雅黑'/'Microsoft YaHei'/Arial;

②font-size

定义字体大小

font-size:20px;

标题标签比较特殊，需要单独指定文字大小

③font-weight

定义文本文字的粗细

font-weight:normal(正常)/bold(粗体)/bolder;

font-weight:100~900(其中normal=400,bold=700);

④font-style

定义文本的风格

font-style:normal(默认值)/italic(斜体);

一般很少给文字加斜体，反而要给斜体标签(em/i)改为不倾斜字体

⑤font复合属性写法

font:font-style  font-weight  font-size/line-height  font-family;

其中各属性位置不能改变

font-size和font-family属性不能省略，其他属性可以省略

4：文本属性

①color

定义文本颜色

(1)预定义的颜色值：red/green/blue/pink;

(2)十六进制：#FF0000,#FF6600,#29D794;

(3)RGB代码:rgb(255,0,0)或rgb(100%,0%,0%);

②text-align

定义设置元素内文本内容的水平对齐方式

text-align:left/center/right;
③text-decoration

规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等；

text-decoration:none(默认，没有装饰线)/underline(下划线)/overline(上划线)/line-through(删除线);

④text-indent

指定文本的第一行的缩进，通常是把段落的首行缩进；

text-indent:2em(缩进2个文字的距离);

⑤line-height

设置行间的距离（行高）

行间距=上间距+文本高度+下间距；

line-height:26px;

5:CSS引入方式------样式表

①内部样式表

将CSS写到HTML页面的内部，是将所有的CSS代码抽取出来，单独放到一个<style>标签中，

通常也被称为嵌入式引入

②行内样式表

在元素标签的内部的style属性中设定CSS样式

通常也被称为行内式引入

③外部样式表

样式单独写到CSS文件中，之后将文件引入到HTML页面中使用

引入方式：<link real="stylesheet" href="css文件路径">

6:元素显示模式

①：块元素

自己独占一行；

高度、宽度、外边距、内边距都可以控制；

宽度默认是容器(父级元素)的100%；

是一个容器及盒子，里面可以放行内或者块级元素。

注意：<p>标签和<h1>~<h6>标签等文字类块级标签，里面不能放其他块级元素

②行内元素

相邻的行内元素在一行上，一行可以显示多个；

高、宽度直接设置是无效的；

默认宽度就是它本身内容的宽度；

行内元素只能容纳文本或者其他行内元素。

注意：链接里面不能再放链接

③行内块元素

同时具有块元素和行内元素的特点

和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个；

默认宽度就是它本身内容的宽度

高度、行高、外边距和内边距都可以控制。

④元素显示模式的转换

把行内元素a转化为块级元素

display:block;

把块级元素div转化为行内元素

diaplay:inline;

行内元素转化为行内块元素

display:inline-block;

7:背景(background)

①backgroung-color

定义背景颜色

backgroung-color:颜色值；

一般情况下元素背景颜色默认值是transparent(透明)

②background-image

定义背景图片

background-image:none(默认值，无背景图)/url(背景图片的路径);

③background-repeat

对背景图片进行平铺

background-repeat:repeat(默认值)/no-repeat/repeat-x/repeat-y;

④background-position

定义背景位置

backgrpund-position:x    y;

x和y坐标可以使用方位名次或精确单位；

方位名次：top/center/bottom/left/center/right;

精确单位：百分数/由浮点数字和单位标识符组成的长度值；

(1)方位名次

如果指定的x和y坐标都是方位名次，则两个值前后顺序无关；

若只有一个方位名次，另一个省略，那么另一个方位名次默认为居中对齐；

(2)精确单位

两个参数中第一个肯定是x坐标，第二个是y坐标；

若只有一个精确单位，那该数值一定是x坐标，另一个是默认垂直居中；

(3)混合单位

第一个值一定是x坐标，第二个值是y坐标；

⑤background-attachment

设置背景图像是否固定或者随着页面的其余部分滚动

background:scroll(默认值，滚动)/fixed(固定)

⑥background

背景复合写法

background:背景颜色  背景图片地址  背景平铺  背景图像滚动  背景图片位置；

⑦背景颜色半透明

background:rgba(0,0,0,0.3)

最后一个参数为透明度，取值范围在0~1之间，0为100%的透明色，1为不透明；

8：CSS的三大特性

1：层叠性

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

遵循就近原则，哪个样式离结构近，即执行哪个样式

样式不冲突，不会层叠

2：继承性

子标签会继承父标签的某些样式，如文本颜色和字号

行高的继承：

行高可以写为具体的精确数值，也可以写为字号大小的倍数，此时继承更加方便；

如：body{

font:12px/1.5    Microsoft YaHei;

}

3:优先级

选择器	选择器权重
继承 或者  *	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式表style="  "	1,0,0,0
!important重要的	无穷大

其中！important的用法示例：

div {

color:pink!important;

}

(1):权重是有4组数字组成，但是不会有进位；

(2):可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推；

(3):等级判断从左向右，如果某一位数值相同，则判断下一位数值。

(4)继承的权重为0。

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

9：盒子模型

边框-border:

border:border-width  border-style   border-color;

其中border-style:solid(实线边框)/dashed(虚线边框)/dotted(点线边框);

单元格合并相邻的边框：

border-collapse:collapse;

内边距-padding

padding:5px;                                一个值，代表上下左右都有5像素的内边距；

padding:5px 10px;                        2个值，代表上下内边距是5像素，左右内边距是10像素；

padding:5px 10px 15px;                3个值，代表上内边距是5px,左右内边距是10px,下内边距是15;

padding:5px 10px 15px 20px;        4个值，依次代表上、右、下、左内边距是.........;

外边距-margin

同内边距-padding的四种情况

用margin:0  auto;将有设置有宽度的盒子居中显示；

行内元素或者行内块元素水平居中用：text-align:center;

解决嵌套块元素的塌陷问题：

①给父级元素定义上边框

②给父级元素定义上内边距

③给父级元素添加overflow:hidden;

清除内外边距

* {

padding:0;

margin:0;

}

10:圆角边框、盒子阴影与文字阴影

圆角边框：

border-radius:length;

其中length可以为具体数值，也可以为百分数；

可以设置多个值，依次代表左上角、右上角、右下角、左下角；

盒子阴影：

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

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

文字阴影：

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

同上述盒子阴影的各值的描述。

11:浮动

float:left/right;

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

11：清除浮动

清除浮动的原因：

父盒子在很多情况下，不方便给高度，但是子盒子由于浮动不占有位置，导致父盒子的高度为0，会影响父盒子后面的标准流盒子，因此要清除浮动。  

①额外标签法（隔墙法）：

在浮动元素的末尾添加一个空标  签，例如：

<div style="clear:both"></div>,或者其他块级元素标签<br/>等

②父级元素添加overflow属性

给父级添加overflow属性，将其属性值设置为hidden(最常用),auto或scroll;

③父级元素添加after元素

给父元素添加如下代码：

.clearfix:after    {

content:"";

display:block;

height:0;

clear:both;

visibility:hidden;

}

.clearfix    {

*zoom:1;

}

④父级元素添加双伪元素

给父元素添加如下代码：

.clearfix:before,.clearfix:after {

content:"";

display:block;

}

.clearfix:after {

clear:both;

}

.clearfix {

*zoom:1;

}

12:CSS属性书写顺序：

①布局定位属性：display/position/float/clear/visibility/overflow;

②自身属性：width/height/margin/padding/border/background;

③文本属性：color/text-align/text-decoration/font/vertical-align/white-space/break-word;

④其他属性：content/cursor/border-radius/box-shadow/text-shadow/background:line-gradient;

13:定位

需要定位的原因：

1：某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子；

2：当我们滚动窗口的时候，盒子是固定在屏幕某个位置的。

所以：

1：浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子；

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

定位=定位模式+边偏移。

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

定位模式，通过CSS的position属性来设置：

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

边偏移，有top、bottom、left、right4个属性：

如：top:80px;                顶部偏移量，定义元素相对于其父元素上边线的距离。

（1）：静态定位

position:static;(元素默认定位方式，无定位的意思)；

静态定位是按照标准流特性摆放位置，它没有边偏移；

(2):相对定位

position:relative;

相对定位的偏移量是相对与盒子原来的位置移动的偏移量

原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不会发生改变），会盖住后面紧挨的的盒子；（不脱标）

(3):绝对定位

position:absolute;

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

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

2：如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。（绝对定位脱标的不占有原来位置）

(4):固定定位

position:fixed;

可以在浏览器页面滚动时元素的位置不会改变；

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

2：固定定位不在占有原来的位置。

固定定位也是脱标的，可以看做是一种特殊的绝对定位。

固定定位常用：

position:fixed;

left:50%;

margin-left:版心/2px;

(5):粘性定位

到达浏览器可视页面顶部后不再移动

position:sticky;

1:以浏览器的可视窗口为参照点移动元素；

2：占有原来的位置；

3：必需添加top,left,right,bottom其中的一个才有效。

定位叠放次序

如：z-index：1；

数值可以是正整数、0或者负整数，默认是anto，数值越大，盒子越靠上。

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

数字后面不能加单位。

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

绝对定位的盒子不能通过margin:0 auto;来居中

通过：

position:absolute;

left:50%;

margin-left:-盒宽/2px;

定位的特殊特性：

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

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

定位拓展：

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

但是绝对定位（固定定位）会压住下面标准流所有的内容。

浮动最初的目的是为了做文字环绕效果的，文字会围绕浮动元素。

14：元素的显示与隐藏

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

（1）：display属性

display:none;隐藏对象

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

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

（2）visibility可见性

visibility:visible;元素可视

visibility:hidden;元素隐藏

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

（3）overflow溢出

overflow:visible;

overflow:hidden;溢出部分隐藏掉

overflow:scroll;溢出或者不溢出时都显示滚动条

overflow:auto;溢出时显示滚动条，不溢出时不显示滚动条。

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

15：精灵图

为什么需要精灵图：

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

因此，为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。

核心原理：将网页中的一些小背景图像整合到一张大图中去，这样服务器就只需要一次请求就可以了。

精灵图目的：

为了有效减少服务器接收和发送请求的次数，提高页面的加载速度。

使用精灵图的核心：

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

2：这个大图片也称为sprites精灵图 或者 雪碧图；

3：移动背景图片位置，此时可以使用background-position

4:移动的距离就是这个目标图片的x和y坐标，注意网页中的坐标有所不同

5：一般情况下都是往上往左移动，所以数值是负值。

16：字体图标

使用场景：主要用于显示网页中通用、常用的一些小图标。

精灵图是有诸多优点，但是缺点很明显：

1：图片文件还是比较大的；

2：图片本身放大和缩小会失真。

3：一旦图片制作完毕想要更换非常复杂。

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

字体图标的优点：

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

灵活级：本质是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等。

兼容性：几乎支持所有的浏览器。

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

总结：

1：如果遇到一些结构和样式比较简单的小图标，就用字体图标。

2：如果遇到一些结构和样式比较复杂一点的小图片，就用精灵图。

使用字体图标时，要把下载包里面的fonts文件夹放入到页面根目录下

字体图标的追加：

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

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

17：CSS三角的做法

倒三角：

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

.box1 {

        width:0;

        height:0;

        line-height:0;

        font-size:0;

        border:10px solid transparent;

        border-top-color:pink;

}

18:CSS用户界面样式

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

（1）更改用户的鼠标样式cursor

li {cursor:pointer;}

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

（2）轮廓线outline

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

（3）防止拖拽文本域resize

textarea  {resize:none;}

19：vertical-align属性应用

用于设置图片或者表单(行内块元素)和文字垂直对齐

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

 

图片底侧空白缝隙解决方案

1：给图片添加vertical-align:midden/top/bottom等

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

20:溢出文字省略号显示

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

1：先先强制一行内显示文本

white-space:nowrap;(默认normal自动换行)

2:超出部分隐藏

overflow:hidden;

3:文字用省略号替代超出部分

text-overflow:ellipsis;

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

overflow:hidden;

text-overflow:ellipsis;

display:-webkit-box;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;

21:常见布局技巧

1：margin负值运用

让每个盒子margin向左侧移动-1px正好压住相邻盒子边框

鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位（保留位置），如果有定位，则加z-index）

2:文字围绕浮动元素

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

3：行内块巧妙运用

给父子添加text-align会实现居中对齐；

4：CSS三角巧妙运用

将div的border的上下与左右方向设置不同的border-width，也可以设置为0；

如：

width:0;

height:0;

border-color:transparent red transparent transparent;

border-style:solid;

border-width:22px 8px 0 0;

22:CSS初始化

不同版本浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化；

简单理解：CSS初始化是指重设浏览器的样式（也称CSS reset）

每个网页都必须首先进行CSS初始化

黑体：\9ED1\4F53

宋体：\5B88\4F53

微软雅黑：\5FAE\8F6F\96C5\9ED1

23：HTML5新增

（1）：HTML5新增的语义化标签

<header>:头部标签

<nav>:导航标签

<article>:内容标签

<section>定义文档某个区域

<aside>侧边栏标签

<footer>尾部标签

（2）：新增多媒体标签

1：音频<audio>

语法：

        <audio  src="文件地址"  controls="controls"></audio>

        

        <audio controls="controls">

                <source  src="happy.mps" type="audio/mpeg">

                <source  src="happy.ogg" type="audio/ogg">

        </audio>

        属性有：autoplay/controls/loop/src;

2：视频<video>

当前<video>元素支持三种视频格式，尽量使用mp4格式。

语法：

        <video  src="文件地址"  controls="controls"></video>

        <video controls="controls"  width="300">

                <source src="move.ogg" type="video/ogg"></source>

                <source src="move.mp4" type="video/mp4"></source>

                您的浏览器暂不支持<video>标签播放视频

        </video>

常见属性：

属性	值	描述
autoplay	autoplay	视频就绪自动播放（谷歌浏览器需要添加muted来自动播放）
controls	controls	向用户显示播放控件（暂定键等）
width	像素	设置播放器宽度
height	像素	设置播放器高度
loop	loop	播放完是否继续播放该视频，循环播放
preload	auto（预先加载视频） none（不应加载市频）	规定是否加载视频，如果有了autoplay就忽略该属性
src	url	视频url地址
poster	imgurl	加载等待的画面图片
muted	muted	静音播放

3：详情与概要标签

<details>

                <summary>概要</summary>

                详情

</details>

默认为折叠样式

4：marquee标签

作用：文字或者图片滚动（跑马灯）

<marquee>内容</marquee>

属性：

behavior(滚动方式)：slide(滚动一次),scroll(连续滚动),alternate(来回滚动)；

direction(滚动方向):left(默认),right,up,down;

loop(滚动次数):默认值为无限循环；

scrollamount(滚动速度):

（3）新增的input类型

新增type属性的值：

属性值	说明
emall	输入必须为Emall类型
url	输入必须为URL类型
date	输入必须为日期类型
time	输入必须为时间类型
month	输入必须为月类型
week	输入必须为周类型
number	输入必须为数字类型
tel	手机号码
search	搜索框
color	生成一个颜色选择表单

新增的表单属性：

属性	值	说明
required	required	表单不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off/on
multiple	multiple	可以多选文件提交

24：CSS3新增

（1）新增选择器

1：属性选择器：

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

类选择器、属性选择器、伪类选择器的权重为10。

（2）结构伪类选择器

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

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

n可以是数字，关键字和公式

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

n可以是关键字，even偶数，odd奇数；

nth-child(n)直接写n，n会从0到子元素结束，即会选中所有的子元素

公式中的n会从0到子元素结束，n一次加一

常见公式：

n        2n        2n-1        5n        n+5        -n+5

E:nth-child会把所有的子元素都排序号，不会选择是否为E标签，

执行时先看：nth-child(n)，之后回去看前面的E标签

如果两者相同，则起效果，否则不起效果。

E:nth-of-type(n)执行时先看E,再看后面的nth-of-type(n)

结构伪类选择器的权重为10

（3）伪元素选择器

可以利用CSS来创建新标签元素，而不需要HTML标签，从而简化HTML结构。

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

before和after会创建一个元素，但是属于行内元素

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

语法：父元素::before{  }

before和after必须有content属性

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

（4）：盒子模型

box-sizing:content-box(默认)=width+border+padding

//border-box=width;

（5）图片模糊

filter:函数（）；

blur函数，模糊处理，数值越大，越模糊；

filter:blur(5px);

cala函数

子盒子永远比父盒子少80px;

width：calc(100% -80px);

（6）：CSS3过渡，谁做过渡给谁加

经常与：hover一起搭配使用

transition:要过渡的属性    花费时间（单位是s）   运动曲线（默认是ease）   何时开始（单位是s,默认是0）；

如果要写多个属性，属性写all就可以了，也可以用逗号分隔；