1.HTML主体格式基本结构

解说：整个HTML格式分为两大部分，一个是head部分，一个是body部分，其中head部分是用于书写网页样式，而body部分用于书写网页主题。

2.常用标签：

标题标记

3.css样式：

4.选择器：

（1）标签选择器：

在<>中的标记都可以作为标签选择器

（2）class选择器：

必须在style中进行声明，在标签中进行引用，声明的时候使用“.”进行声明，多个class选择器可以同时作用于一个标记。

(3)id选择器： 

 必须在style中进行声明，在标签中进行引用，声明的时候使用“#”进行声明，他是唯一的，取名的时候不能使用关键字。

(4):hover 伪类选择器 

表示鼠标经过事件
包含选择器：必须要有包含的关系

(5)常用的css属性：

width：宽  取值px/%
height：高  取值px/%
background-color 背景颜色
font-size 字体大小
font-weight：bold；字体加粗
line-height  行高
color 字体颜色
text-align：center/left/right 文本居中/居左/居右
border：边框宽度  边框颜色  边框样式； 边框
box-showdow：水平阴影的位置，垂直阴影的位置，高斯模糊的距离，阴影的宽度，阴影的颜色以及透明度，阴影的样式
border-radius：边框圆角
transform：rotate(10deg) scale(1.2); 动画，旋转动画单位deg  缩放动画
transtion：all 0.3s； 过渡动画，单位ms/s
margin：外边距
padding：内边距

(6)元素类型

块元素：
特征：独占一行，可以设置宽高，一般情况下作为容器。
若宽不指定的情况下默认与父元素宽度相等，若高不指定的情况下，则它的高度由其内容来决定。
对于块元素，我们若指定了宽度，可以使用margin-left与margin-right取值为auto来进行水平居中。

例如：div、p、h1~h6

行内元素：
特征：不独占一行，设置不上宽高。
行内元素的大小由其内容大小来决定。
例如：span、a

行内块元素：隶属于行内元素，但是又具有块元素的特征。
特征：既不独占一行，又能设置宽高。

(7)元素类型转换

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

(8)浮动

float：left； 左浮动
float：right； 右浮动
作用：通过浮动，我们可以使块元素在同一行显示

(9)列表

(10)css样式：

(11)background：

背景颜色  背景图片链接地址  背景图片平铺方式  背景图片水平方向的位置  背景图片垂直方向的位置
参数二：url(“”)
参数三：默认repeat，no-repeat 不平铺  repeat-x水平平铺   repeat-y垂直
参数四：默认left，取值left/right/center/px/%
参数五：默认top，取值top/bottom/center/px/%

(12)position定位

可以有四个方位进行定位：
left、top、right、bottom

绝对定位：position：absolute；
特征：参照物是具有定位属性的父元素，不占据原本的位置（脱离文档流）
相对定位：position：relative；
特征：参照物是自己原本的位置，占据自己原本的位置（不脱离文档流），一般情况下作为包含块

固定定位：position：fixed；
特征：参照物当前窗口，它的位置与父元素无关，也与当前所在位置无关。

(13)高度塌陷

高度塌陷出现的契机：当没有给父元素高度，并且它里面所有的子元素都发生浮动的时候，会出现高度塌陷。
why？ 父元素没有指定高度，那么它的高度由其子元素来决定，当子元素都给了浮动，【浮动是脱离文档流的（不再占据自己原本的位置）】，
父元素测量不到子元素的高度，高度显示为0

解决：
给父元素添加overflow：hidden；
在子元素的最后添加一个空盒子，并且给这个空盒子添加clear：both；

(14)opacity透明度

他的取值[0,1] 0:全透明  1：不透明

(15)display：none； 隐藏

opacity：0； 与display：none；区别
使用它们两个的时候，都可以实现不可见的功能，但是opacity：0的时候，这个元素它存在只是透明度发生变化，而是display：none；这个元素不占据位置（移除）

(16)选择器的权重

“*”通配符权重为0000
标签选择器的权重为0001
class选择器的权重为0010
id选择器的权重为0100
内联样式的权重为1000
伪类选择器的权重 0010
群组选择器的权重等于它自己本身的权重
包含选择器的权重为所有权重之和

当属性出现重复的时候，会遵从权重高的那个，当权重相同的时候，后写的属性值会覆盖前面的那个。

(17)图片整合

本质：就是对背景图片进行定位。
使用的契机：背景图片大于盒子的时候。

(18)锚链接

(19)overflow：

hidden：超出显示区域的部分隐藏
scroll：无论内容有木有超出显示区域，都会显示滚动条
auto：当内容超出显示区域的时候，则显示滚动条，否则不显示。

(20)子类选择器

.nav li:nth-child(1)，小括号中可以使用2n或者2n+1/2n+1，选中奇数或者是选中偶数个，
通过1/2/3…可以选中.nav下面的第n个li。

文章来源：CSDN网   https://blog.csdn.net/qq_28891989/article/details/80290000