CSSnote

CSS

1.选择器

1.基础选择器

1.1 标签选择器

也称为元素选择器，使用HTML标签作为选择器的名称

1.2 类选择器

使用自定义的名称，以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器

以标签的class属性作为样式应用的依据

注意事项：

调用时不能添加 . 号
同时调用多个类选择器时，以 空格 分隔
类选择器名称不能以 数字 开头

1.3 ID选择器

使用自定义名称，以 # 作为前缀，然后通过HTML标签的id属性进行名称匹配

以标签的id属性作为样式应用的依据，一对一的关系

2.复杂选择器

1.复合选择器

标签选择器和类选择器、标签选择器和ID选择器，一起使用

必须同时满足两个条件才能应用样式

标签选择器和类选择器合起来使用

2.组合选择器

使用,号

将多个具有相同样式的选择器放在一起声明，使用逗号隔开

3.嵌套选择器

使用空格

在某个选择器内部再设置选择器，通过空格隔开

只有满足层次关系最里层的选择器所对应的标签才会应用样式

注意：使用 空格 时不区分父子还是后代，使用CSS-3中新增的 > 时必须是父子关系才行

4 .伪类选择器

根据不同的状态显示不同的样式，一般多用于 标签

四种状态：

• :link 未访问的链接
• :visited 已访问的链接
• :hover 鼠标悬浮到连接上，即移动在连接上
• :active 选定的链接，被激活

5.伪元素选择器

• :first-letter 为第一个字符的样式
• :first-line 为第一行添加样式
• :before 在元素内容的最前面添加的内容，需要配合content属性使用
• :after 在元素内容的最后面添加的内容，需要配合content属性使用

div::first-letter{
    color: red;;
}
div::first-line{
    color: blue;;
}
div::selection{
    color: aquamarine;
}
input::placeholder{
    color: aquamarine;
}
p::before{
    content: "￥";
}
p::after{
    content:".00"
}

6.父子选择器

使用>符号

父选择器>子选择器{
    样式属性:属性值;
    样式属性:属性值;
    ......
}

7.相邻选择器

使用+号

选择器1+选择器2 {
    样式属性:属性值;
    样式属性:属性值;
    ......
}

8.属性选择器

使用[]选择具有某属性的

标记名称[属性选择符] {
    样式属性:属性值;
    样式属性:属性值;
    ......
}

9.伪类选择器_结构伪类

first-child()

an+b的形式

div>:nth-child(5-n){
    color: red;
}

//常用
div>:nth-child(3){
    color: red;
}
div:first-child{
    color: green;
}
div>p:first-of-type{
    color: blue;
}
div>p:last-of-type{
    color: blueviolet;
}
div>p:last-child{
    color: aquamarine;
}
div>p:nth-last-child(3){
    color: cyan;
}
div>p:nth-last-of-type(4){
    color: chocolate;
}

//不太常用的结构伪类

//选择的是没有兄弟元素的span标签
span:only-child{
    color: aqua;
}
//选择的是没有同类型兄弟的span标签
span:only-of-type{
    color: coral;
}
//选中的是根元素
:root{
    background-color: brown;
}
//选中的是没有内容的div，不能包含空格
div:empty{
    //无效果
    background-color: aqua;
}

10.否定伪类

div>p:not(.fall)
{
    color: red;
}

11.UI选择器

//选中的是被选中的input
input:checked{
width: 100px;
height: 100px;
}
//选中的是被禁用的input
input:disabled{
    background-color: green;;
}

12.目标伪类

选择的是目标选中元素

div{
background-color: red;
height: 200px;
}
div:target{
background-color: green;
}

13.语言伪类

div:lang(en)
{
background-color: red;
}        
div:lang(ZH-cn)
{
background-color: green;
}

优先级

行内 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器

格式

(a,b,c)

a: ID选择器的个数

b: 类、伪类、属性选择器的个数

c: 元素、伪元素 选择器的个数

2 CSS基本属性

1.CSS三大特性

1.层叠性：如果发生样式冲突，会根据一定规则（选择器的优先级，进行样式的层叠）

2.继承性：元素会自动拥有其父元素，或祖上元素的某些样式

• 规则：优先继承离得近的
• 常见的可继承属性：text-?? ,font-?? ,line-??,color

3.优先级：

行内 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器>继承的样式

2.颜色属性

表示方式

1.颜色名

p{
    color: red;
}

2.RGB

p{
color:rgb(138,43,226);
}

p{
color: rgb(0%,0%,100%);
}

3.RGBA

A表示的是透明度

p{
color: rgba(255, 0, 0, 0.5);
}

4.HEX

每两位表示RGB,可以大写也可以小写，最好统一

p{
color: #87ce87;
}

5.HEXA

后两位是透明度,IE浏览器不支持.

p{
    color: #87ce8788;
}

6.HSL

色相环

p{
color: hsl(色相，饱和度，亮度);
}
//饱和度 -加上灰色
p{
    color: hsl(230,50%,30%);
}

7.HSLA

p{
color: hsl(0,100%,50%,50%);
}

3. 字体属性

1.字体属性及说明

属性 说明
font 简写属性。把所有针对字体的属性设置在一个声明中

font-size 设置字体的尺寸。常用单位为像素(px)

font-style 设置字体风格。Normal 为正常; italic 为斜体; oblique 为倾斜

font weight 设置字体的粗细。Normal 为正常; lighter 为细体; bold 为粗体; bolder 为特粗体

font- family 设置字体系列。例如“隶书”等，当指定多种字体时，用逗号分隔，如果浏览器不支持第一个字体，则会尝试下一个字体;当 字体由多个单词组成时由双引号括起来

2.字体大小

font-size

字体在chrome浏览器显示的最小文字为12px，默认为16px

3.字体族

font-family

如果写了多个字体，选择前面能够使用的字体

所写的字体必须属于同一个字体族（衬线字体，和非衬线字体）

• 衬线字体 () serif
• 非衬线字体 () sans-serif

.c1{
font-size: 12px;
font-family:"隶书";
}
//当前两个字体都失效会选择一个衬线字体
.c2{
font-size: 50px;
font-family: "华文彩云","楷体",serif;
}
//当前两个字体都失效会选择一个非衬线字体
.c3{
    font-family: "Bradley Hand ITC","Microsoft YaHei",sans-serif;
}

4.字体风格

font-style

italic 斜体 自动转成倾斜字体

oblique 斜体 字体设计的倾斜值（设计好的倾斜字体）

normal 普通

5.字体粗细

font weight

关键词

lighter 细

normal 正常

bold 粗

bolder 很粗 (很多字体不支持)

数值

100~1000

100~300 = lighter 400-500=normal 600以上=bold

.c4{
    //关键字
    font-weight: bolder;
    font-weight: bold;
    //数值
    font-weight:200;
}

6.字体复合属性

字体大小和字体组在最后两位，其他属性用空格隔开

.cc{
    font:bold  italic  100px "2华文彩云","华文琥珀";
}

4.常用文本属性

1.文本颜色

color

2.文本间距

letter-spacing 字母间的距离

word-spacing 单词之间的空隙 根据空格判断，对中文不起作用

属性值为像素值（px） 正的距离增加，负的距离减小

.c1{
    letter-spacing: 10px;
    word-spacing: 10px;
}

3.文本修饰

增加去掉划线，或者更改划线的样式

可选值

none 无装饰线(常用)

underline 下划线-常用(常用)

overline 上划线

line-through 删除线

dotted 虚线

wavy 波浪线

也可以指定颜色

.c2{
	/*上划线*/
	text-decoration: overline;
	/*下划线*/
	text-decoration: underline;
	/*中间划线*/
	text-decoration: line-through;
	/*去掉划线*/
	text-decoration: none;
    /*wavy*/
    text-decoration: overline wavy red;
}

4.文本缩进

indent缩进，每个字是40px，缩进80px，即缩进两个字符

font-size: 40px;
text-indent: 80px;

5.文本对齐

text-align

align对齐

center 居中

left 左对齐

right 右对齐

由于字体设计原因，文字最终呈现的大小，并不一定与font-size的值一致，可能大，也可能小

通常情况下，文字相对字体设计框，并不是垂直居中的，通常要靠下一些

6.行高

line-height

不能太小，并且不能小于等于font-size

1.normal

2.px

3.数字 参考自身font-size的倍数（常用）

4.百分比

div {
	line-height:60px;
	line-height:1.5;
	line-height:150%;
}

• 行高为0会重叠，不能小于0

• 行高是可以继承的

• height与line-height的关系

设置了height，高度就是height

没有设置height，高度就是line-heigh*行数

应用场景：

调整多行文字之间的间距

单行文字垂直居中

.c{
    font-size: 20px;
    line-height: 1.5;
}

.c{
    font-size: 20px;
    height: 400px;
    background-color: skyblue;
    line-height: 400px;
}

7.文本对齐_垂直

对于单行元素

• 顶部 默认
• 居中

让height= line-height

• 底部

line-height = (height x 2) - font - size -x

8.vertical-align

默认基线对齐

top 顶部

bottom 底部

middle 基线加上x的一半对齐

一行的高度由最高的元素决定，并依照它对齐

vertical-align不能控制块级元素，操作行内元素(或操作表格)

5.列表属性

列表符号

none(不显示前面的符号，常用)

list-style-type: upper-roman

列表符号的位置

<style>
ul{
    list-style-position: outside;
}
li{
    background-color: orange;
}
</style>

自定义列表符号

list-style-image: url("目录") ;

复合属性

没有顺序和数量的要求

list-style: upper-roman outside;

6.表格相关属性

1.边框属性

border-width 边框宽度

• CSS中可用的长度值

border-color 边框颜色

• CSS中可用的颜色值

border-style 边框风格

• none 默认值
• solid 实线
• dashed 虚线
• dotted 点线
• double 双实线

border 边框复合属性 没有数量、顺序的要求

2.表格独有属性

table-layout 设置列宽度

• auto 自动，列宽根据内容计算（默认值）
• fixed 固定列宽，平均分

border-spacing 单元格的间距

• CSS中可用的长度值
• 生效的前提：单元格边框不能合并

border-collapse 合并单元表格

• collapse 合并
• separate 不合并

empty-cells 隐藏没有内容的单元格

• show 显示，默认
• hide 隐藏

生效前提：单元格不能合并

caption-side 设置表格标题的位置

• top 上面（默认）
• bottom 表格下面

/* 混合属性 */
border: 2px green solid;
/* 控制表的列宽 */
table-layout: fixed;
/* 单元格的间距 */
border-spacing: 0px;
/* 合并单元表格 */
border-collapse: separate;
/* 隐藏没有内容的单元格 */
empty-cells: hide;
/* 设置表格标题的位置 */
caption-side: top;

3.背景相关属性

背景颜色

transparent 默认值透明

background-color: transparent;

背景图片

小图片会一张一张拼接起来

background-image: url("文件目录");
/* 控制图片是否重复repeat是重复，no-repeat是不重复*/
/* 控制图片是否重复repeat-x是水平方向重复，repeat-y是垂直方向重复*/
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
/* 控制背景图片的位置*/
/* 左上 */
background-position: left top;
/* 右中 */
background-position: right center;
/* 中中 */
background-position: center center
/* 两个相同可以简写 */
background-position: center;
/* 控制背景图片的位置 用具体大的像素值*/
background-position: 300;

background: skyblue url("文件目录");

right left center 水平方向上

bottom center top 垂直方向上

控制背景图片的位置 用具体大的像素值

以左上角为基准，做xy轴

7.鼠标相关属性

pointer:小手

move:移动图标

text:文字选择器

crosshair 十字架

wait 等待

help 帮助

cursor: pointer; (自定义鼠标的图标，pointer->小手)
/* 设置鼠标样式 */
cursor: url("文件目录"),pointer;

3.盒子模型

1.常用的长度单位

1.第一种单位是px

2.第二种是em（相当于font-size的倍数）

3.第三种是rem（相当于根元素的font-size的倍数）（默认html标签）

4.第四种是% （相当于其父元素的font-size的倍数）

.c2{
    width: 50%;
    height: 25%;
    /* font-size: 150%; */
    background-color: red;
}

2.元素的显示模式

块元素（block）

独占一行，

默认宽度，排满父元素

默认高度：由内容撑开

可以通过CSS设置宽高

行内元素 （inline）

不独占一行，一行不能容纳下的行内元素，会在下一行继续从左到右排列

默认宽度：由内容撑开

默认高度：由内容撑开

无法通过CSS设置宽高

3.行内块元素 （inline-block）

img

在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行从左到由排列

默认宽度：由内容撑开

默认高度：由内容撑开

可以通过CSS设置宽高

3.总结各元素的显示模式

块级元素

主体结构标签：html,body

2.排版标签：h1~h6 hr p pre(按原文显示) div

3.列表标签：ul ol li dl dt dd

4.表格相关标签：table tbody thead tfoot tr caption

form,option

行内元素

文本标签：br em strong sup sub del ins

a label

行内块元素

图片 img

单元格 td th

表单控件 input textarea select button

框架标签 iframe

4.修改显示模式

display

none 元素会被隐藏

block 元素会作为块级元素隐藏

inline 元素会作为内联元素隐藏

inline-inline元素会作为行内块元素元素隐藏

<style>
    div{
        display: inline-block;
    }
    .c1{
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .c2{
        width: 200px;
        height: 200px;
        background-color: orange;
    }
    .c3{
        width: 200px;
        height: 200px;
        background-color: skyblue;
    }
</style>

3.盒子的组成部分

外面为外边距，中间是内边距（补白），里面则是内容区

外边距

margin（不会影响大小，只影响位置）

边框

border

内边距

padding

内容

content

1.content

设置内容区域的最大宽度

不写宽度，可以使用min-width设置最小的宽度，用max-width设置最宽宽度

min-width：600px;

max-width：1000px

不写高度，可以使用min-height设置最小的宽度，用max-height设置最宽宽度

当文字比较少时，高度不会低于min-height，当文字过多时，高度不会超过max-height

min-height: 200px;

max-height: 800px;

2.默认宽度

不设置width属性时，元素所呈现出来的宽度

总宽度=父的content - 自身的左右margin

内容区的宽度 = 父的content - 自身的左右margin-自身的左右border - 自身的左右padding

3.padding

<style>
    div{
        /*width: 200px;
        height: 200px; */
        /* 左侧内边框 */
        padding-left: 20px;
        /* 上内边框 */
        padding-top: 30px;
        /* 右侧内边框 */
        padding-right: 40px;
        /* 底内边框 */
        padding-bottom: 50px;
        /* 复合属性 四边都是20px*/
        padding: 20px;
        /* 复合属性写两个值 上下 左右 */
        padding: 20px 30px;
        /* 复合属性写三个值 上 左右 下 */
        padding:10px 20px 30px;
        /* 复合属性写四个值 上 右 下 左 */
        padding: 10px 20px 30px 40px;
        background-color: red;
    }
</style>

padding的值不能为负数

行内元素的左右边距没有问题，但是上下内边距不能完美调整

块级元素、行内元素，四个方向内边距都可以完美设置

4.border

border-style

border-width

border-color

border

left right-top-bottom与style width color搭配使用

5.margin

调整与padding类似

margin-left

margin-right

margin-top

margin-bottom

margin 一个参数

margin 两个参数

margin 三个参数

margin 四个参数

margin的注意事项

1.子元素的margin，是参考父元素的content计算的。（因为是父亲的content中承载着子元素）

2.上margin、左margin：影响自己的位置；下margin、右margin：影响兄弟元素的位置

3.块级元素、行内元素、均可以完美设置四个方向的margin；但行内元素，左右margin可以完美设置，上下margin设置无效

4.margin的值也可以是auto（margin-left:auto 为能多右就往多右移动），如果给一个块级元素设置左右margin都为auto，该块级元素会在父元素中水平居中

5.margin的值可以是负数

margin塌陷问题

第一个子元素的上margin会作用在父元素上，最后一个子元素的margin会作用在父元素上

<style>
    #c1{
        height: 400px;
        width: 400px;
        background-color: gray;
    }
    .box1{
        height: 100px;
        width: 100px;
        background-color: orange;
        margin-top: 50px;
    }
    .box2{
        height: 100px;
        width: 100px;
        background-color: red;
    }
</style>

解决措施

border: 1px solid red;

padding: 10px;

超出的隐藏

overflow: hidden;

margin合并问题

margin合并问题

上下兄弟之间top和bottom的合并，相同合并，不相同取大值

左右兄弟之间left和right不会合并

<style>
	.c1{
        width: 100px;
        height: 100px;
        background-color: deepskyblue;
        margin-bottom: 50px;
       }
	.c2{
		width: 100px;
		height: 100px;
		background-color: deeppink;
		margin-top: 60px;
	}
</style>

4.处理内容的溢出

overflow

overflow-x 横向

overflow-y 纵向

• scroll 滚动条 （不论是否溢出）
• visible 默认（显示）
• hidden 隐藏
• auto 如果溢出则显示滚动条

5.隐藏元素的两种方式

display 不占位

visibility 占位

<style>
	.c1{
        width: 100px;
        height: 100px;
        background-color: red;
        margin-bottom: 100px;
        /* 不占位 */
        display: none;
        /* 占位 */
        visibility: hidden;
	}
    .c2{
        width: 100px;
        height: 100px;
        background-color: orange;
	}
</style>

6.样式的继承

会继承的CSS样式

字体属性、文本属性、文字颜色等

不影响布局，不影响盒子模型

不会继承的CSS样式

边框、背景、内边距、外边距、宽高、溢出方式

7.元素的默认样式

浏览器设置的默认样式

a

h1~h6

p

ul、ol

body 8px的外边距

8.布局技巧

1.行内元素，行内块元素，可以被父元素当作文本处理

text-align line-height text-indent

9.元素之前的空白问题

1.去掉换行和空格

2.给父元素设置font-size:0，再给需要显示文字的元素，单独设置字体大小（推荐）

10.行内块的幽灵空白问题

1.vertical-align: top;

2.display: block;

3.font-size:0 然后再选中字体再设置字体大小

4.浮动

1.简介

文字环绕图片

用来布局

float:left right

2.特点

浮动之后

1.脱离文档流

2.不管浮动前是什么元素，默认宽高都由内容撑开，而且可以设置宽高

3.不会独占一行，可以与其他元素共用一行

4.不会margin合并，也不会margin塌陷，能够完美设置四个方向的margin和padding

5.不会像行内块一样被当作文本处理

3.浮动后的影响

对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响

对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素

4.消除浮动产生的影响

1.设置父元素的height

2.给父元素也设置浮动

3.overflow-hidden

4.在所有浮动元素的最后面加块元素，并设置clear: both

.box4{
	clear: both;
}

5.（推荐使用）

.outer::after{
    content: "";
    display: block;
    clear: both;
}

5.定位

1.相对定位

给元素设置position：relative 即可实现相对定位。

可以使用 left、right、top、bottom 四个属性调整位置。

参考点

相对自己原来的位置

特点:
1.不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
2.定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
默认规则是:
定位的元素会盖在普通元素之上。
都发生定位的两个元素，后写的元素会盖在先写的元素之上。

3.left不能和right—起设置，top和bottom不能一起设置。
4.相对定位的元素，也能继续浮动，但不推荐这样做。
5.相对行为的元素，也能通过margin调整位置，但不推荐这样做。

注意：绝大多数情况下，相对定位，会与绝对定位配合使用。

2.绝对定位

给元素设置 position：absolute 即可实现绝对定位。

可以使用 left、right、top、bottom 四个属性调整位置。

参考它的包含块

1.对于没有脱离文档流的元素：包含块就是父元素;

2.对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包含块就是整个页面)

绝对定位元素的特点:

1.脱离文档流，会对后面的兄弟元素、父元素有影响。

2.left不能和right一起设置，top和bottom不能一起设置

3.绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。

4.绝对定位的元素，也能通过margin调整位置，但不推荐这样做。

5.无论是什么元素（行内、行内块、块级）设置为绝对定位之后，

何为定位元素？ – 默认宽、高都被内容所撑开，且能自由设置宽高。

3.固定定位

给元素设置 position：fixed 即可实现固定定位。

可以使用left、right、top、bottom 四个属性调整位置。

参考它的视口

固定定位元素的特点

1.脱离文档流，会对后面的兄弟元素、父元素有影响。

2.left不能和right一起设置，top和bottom不能一起设置。

3.固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。

4.固定定位的元素，也能通过margin调整位置，但不推荐这样做。

5.无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素

一对于 PC浏览器来说，视口就是我们看网页的那扇“窗户”。

4.粘性定位

给元素设置 position：sticky 即可实现粘性定位。

可以使用left、right、top、bottom四个属性调整位置，不过最常用的是top值。

离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先。

粘性定位元素的特点

不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。

最常用的值是top值。

粘性定位和浮动可以同时设置，但不推荐这样做。

粘性定位的元素，也能通过margin调整位置，但不推荐这样做。

• 粘性定位和相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置时将其固定。

5.定位的层级

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>定位的层级</title>
    <style>
        .outer{
            background-color: gray;
            height: 400px;
            width: 400px;
            padding: 20px;
            border: 1px solid black;
            position: relative;
        }
        .box{
            font-size: 20px;
            height: 100px;
            width: 100px;
        }
        .box1{
            background-color: aqua;
        }
        .box2{
            background-color: red;
            position: relative;
            left:25px;
            top: -75px;
        }
        .box3{
            background-color: skyblue;
            position: absolute;
            left: 75px;
            top:75px;
        }
        .box4{
            background-color: chocolate;
            position: fixed;
            left:110px;
            top: 110px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div class="box box4">4</div>
        
    </div>
</body>
</html>

z-index

z-index:数值

1.定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。

2.如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上。

3.可以通过css属性 z-index 调整元素的显示层级

4.z-index的属性值是数字，没有单位，值越大显示层级越高。

5.只有定位的元素设置z-index才有效。

6.如果z-index值大的元素，依然没有覆盖掉z-index值小的元素，那么请检查其包含块的层级。

6.定位的特殊应用

注意：

1.发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，且依然可以设置宽高。

2.发生相对定位后，元素依然是之前的显示模式。

3.以下所说的特殊应用，只针对 绝对定位 和 固定定位的元素，不包括相对定位的元素。

让定位元素的宽充满包含块

1.块宽想与包含块一致，可以给定位元素同时设置left和right为0。

2.高度想与包含块一致，top和bottom设置为0。

让定位元素在包含块中居中

1.方案一

left:0;right:0.top:0;bottom:0;margin:auto;

2.方案二:

left:50%;

top:50%;

margin-left：负的宽度一半

margin-top：负的高度一半;

注意：该定位的元素必须设置宽高！！!

6.布局

1.版心

1.版心
在PC端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页的版心。
版心的宽度一般是960~1200像素之间。
版心可以是一个，也可以是多个。版心png

2.常见布局名词

顶部导航条 topbar

页头 header、page-header

导航 nav、navigator.、navbar

搜索框 search、search-box

横幅、广告、宣传图 banner

主要内容 content main

侧边栏 aside、 sidebar

页脚 footer.page-footer

3.重置默认样式

1.通配选择器

* {
	padding:0;
	margin:0;
}

2.reset.css

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

3.Normalize.css

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

 html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
  }
  
  /* Sections
     ========================================================================== */
  
  /**
   * Remove the margin in all browsers.
   */
  
  body {
    margin: 0;
  }
  
  /**
   * Render the `main` element consistently in IE.
   */
  
  main {
    display: block;
  }
  
  /**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
  
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
  
  /* Grouping content
     ========================================================================== */
  
  /**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
  
  hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /* Text-level semantics
     ========================================================================== */
  
  /**
   * Remove the gray background on active links in IE 10.
   */
  
  a {
    background-color: transparent;
  }
  
  /**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
  
  abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
  }
  
  /**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
  
  b,
  strong {
    font-weight: bolder;
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  code,
  kbd,
  samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /**
   * Add the correct font size in all browsers.
   */
  
  small {
    font-size: 80%;
  }
  
  /**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
  
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  
  sub {
    bottom: -0.25em;
  }
  
  sup {
    top: -0.5em;
  }
  
  /* Embedded content
     ========================================================================== */
  
  /**
   * Remove the border on images inside links in IE 10.
   */
  
  img {
    border-style: none;
  }
  
  /* Forms
     ========================================================================== */
  
  /**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
  
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
  }
  
  /**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
  
  button,
  input { /* 1 */
    overflow: visible;
  }
  
  /**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
  
  button,
  select { /* 1 */
    text-transform: none;
  }
  
  /**
   * Correct the inability to style clickable types in iOS and Safari.
   */
  
  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    appearance: none;
    -webkit-appearance: button;
  }
  
  /**
   * Remove the inner border and padding in Firefox.
   */
  
  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  
  /**
   * Restore the focus styles unset by the previous rule.
   */
  
  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  
  /**
   * Correct the padding in Firefox.
   */
  
  fieldset {
    padding: 0.35em 0.75em 0.625em;
  }
  
  /**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
  
  legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
  }
  
  /**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
  
  progress {
    vertical-align: baseline;
  }
  
  /**
   * Remove the default vertical scrollbar in IE 10+.
   */
  
  textarea {
    overflow: auto;
  }
  
  /**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */
  
  [type="checkbox"],
  [type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
  }
  
  /**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
  
  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
    height: auto;
  }
  
  /**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
  
  [type="search"] {
    appearance: none;
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }
  
  /**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
  
  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  
  /**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
  
  ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }
  
  /* Interactive
     ========================================================================== */
  
  /*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
  
  details {
    display: block;
  }
  
  /*
   * Add the correct display in all browsers.
   */
  
  summary {
    display: list-item;
  }
  
  /* Misc
     ========================================================================== */
  
  /**
   * Add the correct display in IE 10+.
   */
  
  template {
    display: none;
  }
  
  /**
   * Add the correct display in IE 10.
   */
  
  [hidden] {
    display: none;
  }

7.HTML5

1.HTML5简介

HTML5是新一代的 HTML标准，2014年10月由万维网联盟（W3C）完成标准制定。

1.官网地址:

W3C 提供：https://www.w3.org/TR/html/index.html

WHATWG 提供：https://whatwg-cn.github.io/html/multipage

HTML5 在狭义上是指新一代的 HTML标准，在广义上是指：整个前端。

HTML5优势

1.针对Javascript，新增了很多可操作的接口。

2.新增了一些语义化标签、全局属性。

3.新增了多媒体标签，可以很好的替代flash。

4.更加侧重语义化，对于 SEO更友好。

5.可移植性好，可以大量应用在移动设备上。

3.HTML5兼容性

支持:Chrome、Safari、Opera、Firefox等主流浏览器。

IE 浏览器必须是9及以上版本才支持HTML5，且IE9仅支持部分HTML5新特性。

2.新增语义化标签

1.新增布局标签

header 整个页面，或部分区域的头部 双标签

footer 整个页面，或部分区域的底部 双标签

nav 导航 双标签

article 文章、帖子、杂志、新闻、博客、评论等。 双标签

section 内面中的某段文字，或文章中的某段文字（里面文字通常里面会包含标题）。 双标签

aside 侧边栏 双标签

main 文档的主要内容（WHATWG没有语义，IE不支持)，几乎不用。 双标签

hgroup 包裹连续的标题，如文章主标题、副标题的组合（W3C将其删除） 双标签

关于 article和section:

1.artical里面可以有多个section。

2.section强调的是分段或分块，如果你想将一块内容分成几段的时候，可使用section元素。

3.article比section 更强调独立性，一块内容如果比较独立、比较完整，应该使用article元素。

2.新增状态标签

meter标签

语义：定义已知范围内的标量测量。也被称为gauge(尺度），双标签，例如：电量、磁盘用量等。
常用属性如下:
high 规定高值
low 规定低值
max 规定最大值
min 规定最小值
optimum 规定最优值
value 规定当前值

progress 标签
语义：显示某个任务完成的进度的指示器，一般用于表示进度条，双标签，例如：工作完成进度等
常用属性如下:

max 规定目标值。

value 规定当前值。

	<span>电量:</span>
    <meter max="100" min="0" value="10" low="20" high="80" optimum="90"></meter>
    <br>
    <span>当前进度:</span>
    <progress max="100"></progress>

3.新增列表标签

detalist 用于搜素框的关键字提示

details 用于展示问题和答案，或对专有名词进行解释

summary 写在details的里面，用于指定问题或专有名词

<form action="#" >
    <input type="text" list="mylist">
    <button>搜素</button>
</form>
<datalist id="mylist"> 
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</datalist>
<hr>
<details>
    <summary>如何</summary>
	<p>123</p>
</details>

4.新增文本标签

ruby 包裹需要注音的文字

rt 写注音，rt标签写在ruby的里面

mark 标记

<body>
    <ruby>
        <span>魑魅魍魉</span>
        <rt>chi mei wang lia</rt>
    </ruby>
    <hr>
    <div>
        <ruby>
            <span>魑</span>
            <rt>chi</rt>
        </ruby>
    </div>
    <hr>
    <p>Lorem ipsum dolor sit amet <mark>consectetur</mark> adipisicing elit. Nemo, voluptatum magnam temporibus incidunt ad, soluta, ex molestiae sequ</p>
</body>

3.新增表单功能

1.表单控件新增属性

placeholder 提示文字（注意：不是默认值，yalue 是默认值），适用于文字输入类的表单控件。

required 表示该输入项必填，适用于除按钮外其他表单控件。

autofocus 自动获取焦点，适用于所有表单控件。

autocomplete 自动完成，可以设置为on或off，适用于文字输入类的表单控件。

注意：密码输入框、多行输入框不可用

pattern 填写正则表达式，适用于文本输入类表单控件。

注意：多行输入不可用，且空的输入框不会验证，往往与required 配合。

<body>
    <form action="#">
        账号：<input type="text" placeholder="请输入账号" required autofocus autocomplete="on" pattern="\w{6}">
        <br>
        密码：<input type="password" placeholder="请输入密码" required >
        <br>
        性别：
            <input type="radio" value="male" name="gender">男
            <input type="radio" value="famale" name="gender" >女
        <br>
        爱好
            <input type="checkbox" name="hobby" value="sing">唱
            <input type="checkbox" name="hobby" value="jump">跳
            <input type="checkbox" name="hobby" value="rap" >rap
        <br>
        其他：
        <textarea name="text" cols="30" rows="10"></textarea>
        <button >提交</button>
    </form>
</body>

2.input新增属性值

email 邮箱类型的输入框，表单提交时会验证格式，输入为空则不验证格式。

url url类型的输入框，表单提交时会验证格式，输入为空则不验证格式。

number 数字类型的输入框，表单提交时会验证格式，输入为空则不验证格式。

search 搜索类型的输入框，表单提交时不会验证格式。

tel 电话类型的输入框，表单提交时不会验证格式，在移动端使用时，会唤起数字键盘.

range 范围选择框，默认值为50，表单提交时不会验证格式。

color 颜色选择框，默认值为黑色，表单提交时不会验证格式。

date 日期选择框，默认值为空，表单提交时不会验证格式。

month 月份选择框，默认值为空，表单提交时不会验证格式。

week 周选择框，默认值为空，表单提交时不会验证格式。

time 时间选择框，默认值为空，表单提交时不会验证格式。

datetime-loca 日期+时间选择框，默认值为空，表单提交时不会验证格式。

3.form标签新增属性

novalidate

如果给form标签设置了该属性，表单提交的时候不再进行验证。

4.视频标签

video标签用来定义视频，它是双标签。

src URL地址 视频地址

width 像素值 设置视频播放器的宽度

height 像素值 设置视频播放器的高度

controls 向用户显示视频控件 （比如播放/暂停按钮）

muted 视频静音

autoplay 视频自动播放

loop 循环播放

poster 视频封面

preload auto / metadata/ none 视频预加载，如果使用autoplay，则忽略该属性。

none：不预加载视频。

metadata：仅预先获取视频的元数据（例如长度）

auto：下载整个视频文件，即使用户不希望使用它。

5.音频标签

audio标签用来定义音频，它是双标签。

src URL地址 音频地址

controls 向用户显示音频控件 （比如播放/暂停按钮）

muted 音频静音

autoplay 音频自动播放

loop 循环播放

preload 音频预加载，如果使用autoplay，则忽略该属性。

auto / metadata / none

none：不预加载音频。

metadata：仅预先获取音频的元数据（例如长度)

auto：可以下载整个音频文件，即使用户不希望使用它。

6.新增全局属性

contenteditable

表示元素是否可被用户编辑，可选值如下:

true：可编辑

false：不可编辑

draggable

表示元素可以被拖动，可选值如下:

true：可拖动

false：不可拖动

hidden 隐藏元素

spellcheck

规定是否对元素进行拼写和语法检查，可选值如下:

true：检查

false：不检查

contextmenu

规定元素的上下文菜单，在用户鼠标右键点击元素时显示。

data-*

用于存储页面的私有定制数据。

六、HTML5兼容性处理

添加元信息，让浏览器处于最优渲染模式
<！--设置IE总是使用最新的文档模式进行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<！--优先使用 webkit(Chromium）内核进行渲染，针对360等壳浏览器-->
<meta name="renderer" content="webkit">
 
使用html5shiv让低版本浏览器认识H5的语义化标签
<!--[if lt ie 9]>
<script src="../sources/js/html5shiv.js"></script>
<![endif]-->

扩展
1t 小于1te 小于等于gt大于gte大于等于！逻辑非

8.CSS3

1.CSS3概述

CSS3是CSS2的升级版本，它在CSS2的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题。

CSS3 在未来会按照模块化的方式去发展： https://www.w3.org/Style/CSS/current-work.html

CSS3的新特性如下：

新增了更加实用的选择器，例如：动态伪类选择器、目标伪类选择器、伪元素选择器等等

新增了更好的视觉效果，例如：圆角、阴影、渐变等

新增了丰富的背景效果，例如：支持多个背景图片，同时新增了若干个背景相关的属性

新增了全新的布局方案—一弹性盒子

新增了Web字体，可以显示用户电脑上没有安装的字体

增强了颜色，例如： HSL、HSLA、RGBA几种新的颜色模式，新增opacity 属性来控制透明度

增加了2D和3D变换，例如：旋转、扭曲、缩放、位移等

增加动画与过渡效果，让效果的变换更具流线性、平滑性

2.CSS3私有前缀

W3C标准所提出的某个CSS特性，在被浏览器正式支持之前浏览器厂商会根据浏览器的内核，使用私有前缀来测试该 CSS特性，在浏览器正式支持该 CSS特性后，就不需要私有前缀了

·举个例子:

-webkit-border-radius:20px;

-moz-border-radius: 20px;

-ms-border-radius:20px;

-o-border-radius: 20px;

border-radius: 20px;

·查询 CSS3兼容性的网站：https://caniuse.com/

常见浏览器私有前缀

Chrome 浏览器：-webkit-

Safari浏览器：-webkit-

Firefox 浏览器:-moz-

Edge 浏览器:-webkit-

旧 IE浏览器：-mS-

3.CSS3新增长度单位

1.rem根元素字体大小的倍数，只与根元素字体大小有关。

2.vw 视口宽度的百分之多少 10vw 就是视口宽度的10%

3.vh 视口高度的百分之多少 10vh就是视口高度的10%。

4.vmax视口宽高中大的那个的百分之多少。

5.vmin 视口宽高中小的那个的百分之多少。

4.CSS3新增颜色设置方式

CSS3新增了三种颜色设置方式，分别是：rgba、hsl、hsla，由于之前已经详细讲解，此处略过。

5.CSS3新增选择器

css3 新增的选择器有：动态伪类、目标伪类、语言伪类、 UI 伪类、结构伪类、否定伪类、伪元素：

6.新增盒子模型相关属性

box-sizing

box-sizing: content-box;

box-sizing: border-box;

resize（加上overflow使用）

resize: horizontal; 水平可调整

resize: vertical; 竖直可调整

box-shadow(阴影)

    <style>
        .box1{
            height: 400px;
            width:  400px;
            background-color: orange;
            margin: 0 auto;
            margin-top: 100px;
            /* 水平位置 垂直位置 */
            box-shadow: 10px 10px;
            /* 水平位置 垂直位置 阴影颜色*/
            box-shadow: 10px 10px blue;
            /* 水平位置 垂直位置  阴影的模糊程度*/
            box-shadow: 10px 10px 20px;
            /* 水平位置 垂直位置  阴影的模糊程度 阴影颜色*/
            box-shadow: 10px 10px 20px blue;
            /* 水平位置 垂直位置  阴影的模糊程度 阴影的外沿 阴影颜色*/
            box-shadow: 10px 10px 20px 10px blue;
            /* 水平位置 垂直位置  阴影的模糊程度 阴影的外沿 阴影颜色*/
            box-shadow: 10px 10px 20px 10px blue inset;
			/* inset：内部阴影 不填：外部阴影*/
        }
    </style>
<body>
    <div class="box1">
        你好
    </div>
</body>

opacity(不透明度)

0~1的数

7.新增背景属性

1.background-origin

设置背景图的原点

• padding-box 从padding区域开始显示背景图像默认值
• border-box 从border区域开始显示背景图像
• content-box 从content区域开始显示背景图像

2.background-clip

设置背景图的向外裁剪的区域

• border-box 从border区域开始向外裁剪背景 默认
• padding-box 从padding-区域开始向外裁剪背景
• content-box 从content区域开始向外裁剪背景
• text 背景图只呈现在文字上

3.background-size

设置背景图的尺寸

1.用长度指定背景图片的大小,不允许负值

background-size:200px 300px;

2.用百分比指定背景图片的大小,不允许负值

background-size:100% 100%;

3.auto ： 背景图的真实大小 默认值

4.contain 将背景图片等比例缩放，使背景图片的宽或高，与容器的宽或高相等，再将完整背景图片包含在容器内，但要注意：可能会造成容器里部分区域没有背景图片

background-size:contain;

5.cover:将背景图片等比例缩放直到完全覆盖容器，图片会尽可能全的显示在元素上，但要注意：背景图片可能显示不完整 相对较好

background-size:cover;

4.background-复合属性

background:背景颜色 背景url 是否重复 位置 大小 / 原点 裁剪方式

如果origin和clip值一样，只写一个值，则clip和origin都设置;如果设置了两个值，前面的是origin，后面的是clip

size的值必须写在position值的后面，并且用/分开

5.多背景图

利用background复合属性

background: url() no-repeat left top,
            url() no-repeat left bottom,
            url() no-repeat right bottom,
            url() no-repeat right bottom;

8.新增边框属性

1.边框圆角

border-radius: 200px;
border-radius: 50%;

在CSS3中，使用border-radius 属性可以将盒子变为圆角。

同时设置四个角的圆角:

border-radius:10px;

分开设置每个角的圆角（几乎不用)

border-top-left-radius

设置左上角圆角半径
1.一个值是正圆半径

2.两个值分别是椭圆的×半径、y半径。

border-top-right-radius

设置右上角圆角半径:

1.一个值是正圆半径,

2.两个值分别是椭圆的×半径、y半径。

border-bottom-right-radius

设置右下角圆角半径：

1.一个值是正圆半径.

2.两个值分别是椭圆的×半径、y半径。

porder-bottom-left-radius

设置左下角圆角半径:

1.一个值是正圆半径

2.两个值分别是椭圆的×半径、y半径。

border-raidus：左上角x右上角x右下角x左下角x /左上y 右上y 右下y 左下y

2.边框外轮廓

outline-width：外轮廓的宽度。

outline-color：外轮廓的颜色。

outline-style：外轮廓的风格

​ none：无轮廓

​ dotted：点状轮廓

​ dashed：虚线轮廓

​ solid:实线轮廓

​ double：双线轮廓

outline-offset 设置外轮廓与边框的距离，正负值都可以设置

注意：outline-offset不是outline的子属性，是一个独立的属性。

outline复合属性

outline:50px solid blue;

9.新增文本相关属性

1.文本阴影

在CSS3中，我们可以使用text-shadow 属性给文本添加阴影。

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

​ h-shadow 必需写，水平阴影的位置，允许负值

​ v-shadow 必需写，垂直阴影的位置，允许负值

​ blur 可选，模糊的距离。

​ color 可选，阴影的颜色

默认值：text-shadow：none表示没有阴影

2.文本换行

在CSS3中，我们可以使用white-space 属性设置文本换行方式。

normal 文本超出边界自动换行，文本中的换行被浏览器识别为一个空格。（默认值)

pre 原样输出，与pre标签的效果相同

pre-wrap 在pre效果的基础上，超出元素边界自动换行

pre-line 在pre效果的基础上，超出元素边界自动换行，且只识别文本中的换行，空格会忽略

nowarp 强制不换行

3.文本溢出

在CSS3中，我们可以使用text-overflow 属性设置文本内容溢出时的呈现模式。

clip 当内联内容溢出时，将溢出部分裁切掉。（默认值)

ellipsis 当内联内容溢出块容器时，将溢出部分替换为.….。

注意：要使得text-overflow 属性生效，块容器必须显式定义overflow 为非visible值，white-space 为nowrap值。

4.文本修饰

CSS3升级了text-decoration属性，让其变成了复合属性

text-decoration: text-decoration-line || text-decoration-style || text-decoration-color

子属性及其含义:

text-decoration-line 设置文本装饰线的位置none：指定文字无装饰（默认值）

underline：指定文字的装饰是下划线

overline：指定文字的装饰是上划线

line-through：指定文字的装饰是贯穿线

text-decoration-style 文本装饰线条的形状

solid：实线（默认）

double：双线

dotted：点状线条

wavy：波浪线

text-decoration-color文本装饰线条的颜色

5.文本描边

颜色

-webkit-text-stroke-color: aqua;

宽度

-webkit-text-stroke-width: 1px;

复合属性，设置宽度和颜色

-webkit-text-stroke: aqua 1px;

10.新增渐变

1.线性渐变

background-image : linear-gradient()

默认从上到下

to top

deg角度

调整渐变的位置

    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .box{
            height: 200px;
            width: 200px;
            border: 1px solid black;
            float: left;
        }
        .box1{
            background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%)
        }
        .box2{
            background-image: linear-gradient(to right, #e0c3fc 0%, #8ec5fc 100%)
        }
        .box3{
            background-image: linear-gradient(red 50px,yellow 100px , green 150px);
        }
        .box4{
            font-size: 80px;
            text-align: center;
            line-height: 200px;
            font-weight: 200;
            color: transparent;

            background-clip: text;
            background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%)
        }
    </style>


<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box box4">你好</div>
</body>

2.径向渐变

background-image : radial-gradient()

    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .box{
            height: 200px;
            width: 200px;
            border: 1px solid black;
            float: left;
        }
        .box1{
            
            background-image: radial-gradient( #e0c3fc 0%, #8ec5fc 100%);
        }
        .box2{
            /* 关键词 */
            background-image: radial-gradient(at left top,#e0c3fc 0%, #8ec5fc 100%);
        }
        .box3{
            /* 通过像素值 */
            background-image: radial-gradient(at 50px 100px,#e0c3fc 0%, #8ec5fc 100%);
        }
        .box4{
            /* circle关键字 设置为正圆*/
            background-image: radial-gradient(circle,#e0c3fc 0%, #8ec5fc 100%);
        }
        .box5{
            /* 通过设置像素值，设置为正圆 */
            background-image: radial-gradient(at 200px 200px,#e0c3fc 0%, #8ec5fc 100%);
        }
        .box6{
            /* 设置区域 */
            background-image: radial-gradient(#e0c3fc 0% 50px, #8ec5fc 100% 150px);
        }
        .box7{
            /* 综合写法 */
            background-image: radial-gradient(100px 50px at 150px 150px,#e0c3fc 0% 50px, #8ec5fc 100% 150px);
        }
    </style>


<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box box4"></div>
    <div class="box box5"></div>
    <div class="box box6"></div>
    <div class="box box7"></div>
</body>

3.重复渐变

background-image: repeating-linear-gradient()

background-image: repeating-radial-gradient()

11.Web字体和字体图标

1.Web字体

    <style>
        @font-face {
            font-family: 'c';
            src: url(../font/Rainbow-Party-2.ttf);
        }
        .h{
            font-family: 'c';
        }
    </style>


<body>
    <h1 class="h">
        ABDC
    </h1>
</body>

2.字体图标

• 相比图片更加清晰
• 灵活性高，更方便改变大小，颜色，风格
• 兼容性好

https://www.iconfont.cn/

    <style>
        @font-face {
            font-family: 'iconfont';
            src: url('../font/font_img/iconfont.woff2t=1714807215615') format('woff2'),
            url('../font/font_img/iconfont.woff?t=1714807215615') format('woff'),
            url('../font/font_img/iconfont.ttf?t=1714807215615') format('truetype');
        }
        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>



<body>
    <div class="box iconfont">
        &#xe88d;
        &#xe891;
    </div>
    <span class="iconfont">&#xe88c;</span>
</body>

<link rel="stylesheet" href="../font/font_img/iconfont.css">


<body>
    <span class="iconfont icon-sousuo"></span>
</body>

<script src="../font/font_img/iconfont.js"></script>

<svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-sousuo"></use>
</svg>

4.在线使用

@font-face {
	font-family: 'iconfont';
	src: url('//at.alicdn.com/t/c/font_4532917_3e3p56tm3wy.woff2?t=1714808277434') format('woff2'),
	url('//at.alicdn.com/t/c/font_4532917_3e3p56tm3wy.woff?t=1714808277434') format('woff'),
	url('//at.alicdn.com/t/c/font_4532917_3e3p56tm3wy.ttf?t=1714808277434') format('truetype');
}
	.iconfont{
    font-family: 'iconfont';
}

<span class="iconfont">&#xe89b;</span>

<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4532917_3e3p56tm3wy.css">

<span class="iconfont icon-sousuo"></span>

<script src="//at.alicdn.com/t/c/font_4532917_3e3p56tm3wy.js"></script>

<svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-sousuo"></use>
</svg>

可以使用i标签引入

12.2D变换

transform

设置水平方向位移，需指定长度值；若指定的是百分比，是参考自身宽度的百分比。设置垂直方向位移，需指定长度值；若指定的是分比，是参考自身高度的百分比。一个值代表水平方向，两个值代表：水平和垂直方向。

1.位移

以左上位坐标原点

translate() translateX() translateY()

transform: translateX(50px) translateY(50px);

translateX(50%)位移自己宽度的50%

1.位移与相对定位很相似，都不脱离文档流，不会影响到其它元素。

2.与相对定位的区别：相对定位的百分比值，参考的是其父元素；定位的百分比值，参考的是其自身。

3.浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高。

4.transform 可以链式编写，例如:

transform: translateX(30px) translateY(40px);

5.位移对行内元素无效。

6.位移配合定位，可实现元素水平垂直居中

.box{
	position:absolute;
    left:50%;
	top:50%;
	transform: translate(-50%,-50%);
}

2.缩放

transform: scale(1.5);

2D缩放是指：让元素放大或缩小

按比例缩放

scaleX 设置水平方向的缩放比例，值为一个数字，1表示不缩放，大于1放大，小于1缩小。

scaleY 设置垂直方向的缩放比例，值为一个数字，1表示不缩放，大于1放大，小于1缩小。

scale 同时设置水平方向、垂直方向的缩放比例，一个值代表同时设置水平和垂直缩放；两个值分别代表：水平缩放、垂直缩放。

scale的值，是支持写负数的，但几乎不用，因为容易让人产生误解。

借助缩放，可实现小于 12px的文字。

3.旋转

2D旋转是指：让元素在二维平面内，顺时针旋转或逆时针旋转

1.先给元素添加 转换属性transform

2.编写transform的具体值，相关可选值如下：

设置旋转角度，需指定一个角度值（deg)，正值顺时针，负值逆时针。

注意：rotateZ(20deg)相当于rotate(20deg），当然到了3D变换的时候，还能写：rotate(x，X，x)

4.扭曲

2D扭曲是指：让元素在二维平面内被“拉扯”，进而“走形”，实际开发几乎不用，了解即可

1.先给元素添加 转换属性 transform

2.编写transform的具体值，相关可选值如下:

skewX 设置元素在水平方向扭曲，值为角度值，会将元素的左上角、右下角 拉扯

skewY 设置元素在垂直方向扭曲，值为角度值，会将元素的左上角、右下角拉扯。

skew 一个值代表 skewX，两个值分别代表：skewX、skewY

5.多重变换

建议最后进行旋转，因为旋转会破坏坐标原点

6.变换原点

默认原点在中间，位移变换不参考原点

元素变换时，默认的原点是元素的中心，使用transform-origin可以设置变换的原点。

修改变换原点对位移没有影响，对旋转和缩放会产生影响。

如果提供两个值，第一个用于横坐标，第二个用于纵坐标。

如果只提供一个，若是像素值，表示横坐标，纵坐标取50%；若是关键词，则另一个坐标取50%

transform-origin：50%50%，变换原点在元素的中心位置，百分比是相对于自身

transform-origin：left top，变换原点在元素的左上角。

transform-origin:50px50px，变换原点距离元素左上角50px 50px的位置。

transform-origin:0，只写一个值的时候，第二个值默认为50%。

13.3D变换

transform

1.空间与景深

1.开启3D空间

重要原则：元素进行 3D变换的首要操作：父元素必须开启 3D空间!

使用transform-style开启3D空间

flat：让子元素位于此元素的二维平面内（2D空间)

preserve-3d：让子元素位于此元素的三维空间内（3D空间)

2.设置景深

何为景深？—— 指定观察者与Y=0平面的距离，能让发生3D变换的元素，产生透视效果，看来更加立体。

使用perspective 设置景深，可选值如下:

• none：不指定透视–（默认值）

• 长度值：指定观察者距离z=0平面的距离，不允许负值.

注意：perspective 设置给发生3D变换元素的父元素!

2.透视点位置

所谓透视点位置，就是观察者位置；默认的透视点在元素的中心。

使用perspective-origin设置观察者位置（透视点的位置）

相对坐标轴往右偏移400px，往下偏移300px（相当于人蹲下300像素，然后向右移动400像素看元素）

perspective-origin: 400px 300px;

注意：通常情况下，我们不需要调整透视点位置。

3.位移

3D位移是在2D位移的基础上，可以让元素沿z轴位移

1.先给元素添加 转换属性transform

2.编写transform的具体值，3D相关可选值如下：

设置z轴位移，需指定长度值，正值向屏幕外，负值向屏幕里，且不能写百分比。

第1个参数对应×轴，第2个参数对应y轴，第3个参数对应z轴，且均不能省略。

4.旋转

3D 旋转是在20旋转的基础上，可以让元素沿×轴和y轴旋转，具体使用方式如下:

1.先给元素添加 转换属性 transform

2.编写transform的具体值，3D相关可选值如下：

设置×轴旋转角度，需指定一个角度值(deg)，面对×轴正方向：正值顺时针，负值逆时针。

设置y轴旋转角度，需指定一个角度值(deg)，面对y轴正方向：正值顺时针，负值逆时针。

前3个参数分别表示坐标轴：×，y，2，第4个参数表示旋转的角度，参数不允许省略。

例如：transform：rotate3d(1，1,1,30deg），意思是：x、y、z分别旋转30度。

5.缩放

3D缩放是在2D缩放的基础上，可以让元素沿z轴缩放

1.先给元素添加转换属性transform

2.编写transform 的层体值，3D相关可选值

​ scaleZ

​ scale3d

设置z轴方向的缩放比例，值为一个数字，1表示不缩放，大于1放大，小于1缩小。第1个参数对应×轴，第2个参数对应y轴，第3个参数对应z轴，参数不允许省略。

6.多重变换

多个变换，可以同时使用一个transform来编写

transform: translateZ(100px) scaleZ(3) rotateY(40deg);

注意点：多重变换时，建议最后旋转

7.背部

backface-visibility

backface-visibility:hidden

14.过渡

1.基本

过渡可以在不使用Flash动画，不使用JavaScript的情况下，让元素从一种样式，平滑过渡为另一种样式。

transition-property

作用：定义哪个属性需要过渡，只有在该属性中定义的属性（比如宽、高、颜色等）才会以有过渡效果。

1.none：不过渡任何属性

2.all：过渡所有能过渡的属性

3.具体某个属性名，例如：width若有多个以逗号分隔

常见的支持过渡的属性有：颜色、长度值、百分比、z-index、opacity、2D变换属性、3D变换属性、阴影

transition-duration

作用：设置过渡的持续时间，即：一个状态过渡到另外一个状态耗时多久。

默认值。

0：没有任何过渡时间

s或ms：秒或毫秒。

如果想让所有属性都持续一个时间，那就写一个值。

如果想让每个属性持续不同的时间那就写一个时间的列表。

transition-delay 延迟时间

transition-delay : 2s;

2.高级

transition-delay

作用：指定开始过渡的延迟时间，单位：s或ms

transition-timing-function

作用：设置过渡的类型

1.ease:平滑过渡 --默认值

2.linear:线性过渡

3.ease-in: 慢→快

4.ease-out：快→慢

5.ease-in-out:慢→快→慢

6.step-start：等同于 steps(1，start)

7.step-end:等同于steps(1, end)

8.steps( integer,?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数默认值为end。

9.cubic-bezie(number,number,number,number):特定的贝塞尔曲线类型

在线制作贝赛尔曲线：https://cubic-bezier.com

3.复合属性

transition 复合属性

• 如果设置了一个时间，表示duration；如果设置了两个时间，第一个是duration，第二个是delay；其他值没有顺序要求

transition: 1s 1s linear all;

4.案例

15.动画

1.使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width: 1000px;
            height: 200px;
            border: 1px solid black;
        }
        @keyframes yidong{
            /* 第一帧 */
            form{

            }
            /* 最后一帧 */
            to{
                background-color: blue;
                transform: translateX(800px);
                border-radius: 50%;
            }
        }

        .inner{
            width: 200px;
            height: 200px;
            background-color: orange;
            /* 应用动画到元素 */
            animation-name: yidong;
            /* 持续时间 */
            animation-duration: 3s;
            /* 延迟时间 */
            animation-delay: 0.5s;
            /* 其他属性 */
            /* 播放方式 */
            animation-timing-function: linear;
            /* 次数 */
            /* animation-iteration-count: infinite; */
            /* 方向 */
            animation-direction: alternate;

            /* forwards 最后一帧停住  不发生动画的状态*/
            animation-fill-mode: forwards;
        }
        .outer:hover .inner{
            animation-play-state: paused;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

animation-name：给元素指定具体的动画（具体的关键帧)

animation-duration：设置动画所需时间

animation-delay：设置动画延迟
.box {
/* 指定动画 */
animation-name: testKey;/*设置动画所需时间 */animation-duration:5s;/*设置动画延迟 */animation-delay:0.5s;

}

animation-iteration-count，指定动画的播放次数，常用值如下:

number：动画循环次数

infinite：无限循环

animation-direction，指定动画方向，常用值如下:

normal: 正常方向（默认)

reverse : 反方向运行

alternate：动画先正常运行再反方向运行，并持续交替运行

alternate-reverse：动画先反运行再正方向运行，并持续交替运行

animation-fill-mode，设置动画之外的状态

forwards：设置对象状态为动画结束时的状态

backwards： 设置对象状态为动画开始时的状态

animation-play-state，设置动画的播放状态，常用值如下:

running运动（默认）

paused暂停

2.复合属性

只设置一个时间表示duration，设置两个时间分别是：duration和delay，其他属性没有数量和顺序要求。

animation: name 3s 0.5s linear alternate-reverse forwards;

备注：

animation-play-state一般单独使用。

3.动画与过渡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width: 1000px;
            height: 400px;
            border: 2px solid black;
        }
        .inner{
            width: 100px;
            height: 100px;
        }
        .inner1{
            background-color: green;
            transition: 3s 0.5s linear;
        }
        @keyframes name{
            from{

            }
            to{
                transform: translateX(900px);
            }
        }
        .inner2{
            background-color: skyblue;
        }
        .outer:hover .inner1{
            
            transform: translateX(900px);
        }
        .outer:hover .inner2{
            animation-name: name;
            animation-duration: 3s;
            animation-delay: 0.5;
            /* animation-play-state: paused; */
            animation-fill-mode: forwards;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner inner1">1</div>
        <div class="inner inner2">2</div>
    </div>
</body>
</html>

4.案例

16.多布局

指定列数

column-count: 2;

指定列的宽度

column-width: 220px;

复合属性

columns: 2;

间距

column-gap: 30px;

column-count：指定列数，值是数字

column-width：指定列宽，值是长度

columns：同时指定列宽和列数，复合属性；值没有数量和顺序要求

column-gap：设置列边距，值是长度

column-rule-style：设置列与列之间边框的风格，值与 border-style—致

column-rule-width ：设置列与列之间边框的宽度，值是长度

column-rule-color：设置列与列之间边框的颜色

coumn-rule：设置列边框，复合属性

column-span 指定是否跨列；值：none、all

17.伸缩盒模型

1.伸缩盒模型简介

2009年，W3C 提出了一种新的盒子模型–Flexible Box（伸缩盒模型，又称：弹性盒子）

它可以轻松的控制：元素分布方式、元素对齐方式、元素视觉顺序.………

截止目前，除了在部分IE 浏览器不支持，其他浏览器均已全部支持,伸缩盒模型的出现，逐渐演变出了一套新的布局方案–flex布局

1.传统布局是指：基于传统盒状模型，主要靠： display 属性+ position 属性+float 属性。

2.flex布局目前在移动端应用比较广泛，因为传统布局不能很好的呈现在移动设备上。

2.伸缩容器、伸缩项目

伸缩容器：开启了flex的元素，就是：伸缩容器。

1.给元素设置：display:flex或 display：inline-flex，该元素就变为了伸缩容器

2.displayainline-flex很少使用，因为可以给多个伸缩容器的父容器，也设置为伸缩容器

3.一个元素可以同时是：伸缩容器、伸缩项目

伸缩项目：伸缩容器所有子元素自动成为了：伸缩项目。

1.仅伸缩容器的子元素成为了伸缩项目，孙子元素、重孙子元素等后代，不是伸缩项目。

2.无论原来是哪种元素（块、行内块、行内），一旦成为了伸缩项目，全都会“块状化”

3.主轴和侧轴

主轴： 伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是：从左到右（左边是起点，右边是终点）

侧轴： 与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是：从上到下（上边是起点，下边是终点）

4.主轴方向

属性名：flex-direction

常用值如下:

1.row：主轴方向水平从左到右—- 默认值

2.row-reverse：主轴方向水平从右到左。

3.column：主轴方向垂直从上到下。

4.column-reverse：主轴方向垂直从下到上。

注意：改变了主轴的方向，侧轴方向也随之改变。

5.主轴上的换行方式

flex-wrap

wrap（自动换行）、nowrap(默认)（不换行）、warp-reverse（反向换行）

6.flex-flow

复合了flex-direction和flex-wrap

flex-flow: column-reverse wrap-reverse;

7.主轴对齐方式

属性名：justify-content

1.flex-start：主轴起点对齐。-- 默认值

2.flex-end：主轴终点对齐。

3.center：居中对齐

4.space-between：均匀分布，两端对齐（最常用）。

5.space-around：均匀分布，两端距离是中间距离的一半。

6.space-evenly：均匀分布，两端距离与中间距离一致。

8.侧轴对齐方式

8.1只有一行的情况

所需属性：align-items

1.flex-start：侧轴的起点对齐。

2.flex-end：侧轴的终点对齐。

3.center：侧轴的中点对齐。

4.baseline：伸缩项目的第一行文字的基线对齐。

5.stretch：如果伸缩项目未设置高度，将占满整个容器的高度。–（默认值)

8.2多行的情况

所需属性：align-content

1.flex-start：与侧轴的起点对齐

2.flex-end：与侧轴的终点对齐

3.cented 与侧轴的中点对齐

4.space-between：与侧轴两端对齐，中间平均分布

5.space-around：伸缩项目间的距离相等，比距边缘大一倍

6.space-evenly：在侧轴上完全平分

7.stretch：占满整个侧轴。—- 默认值

9.基准长度

1.flex-basis

概念：flex-basis 设置的是生轴方向的基准长度

备注：主轴横向：宽度失效；主轴纵向：高度失效

作用：浏览器根据这个属性设置的值，计算主轴上是否有多余空间，默认值auto，即：伸缩项目的宽或高

10.伸缩性

1.flex-grow（伸)

概念:

flex-grow 定义伸缩项目的放大比例，默认为0，即：纵使主轴存在剩余空间，也不拉伸（放大）

规则:

1.若所有伸缩项目的flex-grow 值都为1，则：它们将等分剩余空间（如果有空间的话）

2.若三个伸缩项目的flex-grow值分别为：1、2、3，则：分别瓜分到：1/6、2/6、3/6的空间

2.flex-shrink（缩）

概念：flex-shrink定义了项目的压缩比例，默认为1，即：如果空间不足，该项目将会缩小

收缩项目的计算，略微复杂一点，我们拿一个场景举例:

例如：

三个收缩项目，宽度分别为：200px、300px2aapx，它们的flex-shrink 值分别为：1、2、3

若想刚好容纳下三个项目，需要总宽度为700px，但目前容器只有400px，还差300px

所以每个人都要收缩一下才可以放下，具体收缩的值，这样计算:

1.计算分母：（200x1）+（300x2）+（200x3）=1400

2.计算比例：

项目一：（200×1）/1400=比例值1项目二：（300x2）/1400=比例值2项目三：（200×3)/1400=比例值3 3.计算最终收缩大小：

项目一需要收缩：比例值1×300

项目二需要收缩：比例值2×300

项目三需要收缩：比例值3×300

11.flex复合属性

flex 是复合属性，复合了:flex-grow 、flex-shrink、flex-basis

如果写flex：1 1 auto，则可简写为：flex：auto

如果写 flex：1 1 0，则可简写为：flex:1

如果写flex:0 θ auto，则可简写为：flex：none

如果写 flex：0 1 auto，则可简写为:flex:0 auto

flex-shrink、flex-basis 三个属性，默认值为0 1 auto --即flex初始值

12.项目排序

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

13.单独对齐

通过align-self属性，可以单独调整某个伸缩项目的对齐方式

默认值为auto，表示继承父元素的align-items属性

18.响应式布局

1.媒体查询

1.all 所有设备

2.screen 电子屏幕

3.检测打印机

@media screen {

}

2.媒体特性

@media (min-width:800px)
{
    div{
        background-color: red;
    }

}

width 检测视口宽度

max-width 检测视口最大宽度

min-width 检测视口最小宽度

height 检测视口高度

max-height 检测视口最大高度

min-height 检测视口最小高度

device-width 检测设备屏幕的宽度

max-device-width 检测设备屏幕的最大宽度

min-device-width 检测设备屏幕的最小宽度

orientation 检测视口的旋转方向（是否横屏）

1.portrait：视口处于纵向，即高度大于等于宽度

2.landscape：视口处于横向，即宽度大于高度

完整列表请参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media

3.运算符

and 并且

,、or 或

not 否定

only 肯定

4.常用域值

超小屏幕：<768px

中等屏幕：768px~992px

大屏幕：992px~1200px

超大屏幕：>1200px

19BFC

块格式化上下文，是Wen页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域

当开启了BFC后

1.其子元素不会再产生margin塌陷问题

2.自己不会被其他浮动元素覆盖

3.就算其子元素浮动，元素自身高度也不会塌陷

开启BFC

• 根元素
• 浮动元素
• 绝对定位、固定定位的元素
• 行内块元素
• 表格单元格
• overflow的值不为visible的块元素
• 伸缩项目
• 多列容器
• column-span为all的元素（即使该元素没有包裹在多列容器中）
• display的值，设置为flow-root