HTML+CSS复习内容
1.HTML主体格式基本结构
<!DOCTYPE html>
<html>
<head>
<mate charset="utf-8"/>
<title>标题</title>
</head>
<body>
主要内容
解说：整个HTML格式分为两大部分，一个是head部分，一个是body部分，其中head部分是用于书写网页样式，而body部分用于书写网页主题
2.常用标签：
标题标记
<h1></h1>
<p></p>段落标签
<b></b> <strong></strong>加粗
<i></i>倾斜
<span></span>行标签
<br/>换行 ,换行标签
<ul>
<li></li> 列表标签
</ul>
 空格
<hr>分割线
<img src="" alt="" title=""/> 图片【gif，png，jpg】src:图片的链接地址 alt：图片加载失败的时候，在图片原本的位置显示的提示文本 title：鼠标悬停的时候，显示的提示文本 <a href="" target=""></a> 超链接 href：链接地址 target：打开新网页的打开方式，默认是在本页面打开 <div></div> 盒子
…（仅写出常用的一些）
3.css样式：
内联样式： <标记 style=“属性1：属性值1；属性2：属性值2；…”></标记>
内部样式：在head中添加
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：旋转动画单位deg 缩放动画
transtion： 过渡动画
margin：外边距
padding：内边距
6元素类型
（1）块元素：
特征：独占一行，可以设置宽高，一般情况下作为容器。如：div、p、h1~h6
（2）行内元素：
特征：不独占一行，设置不上宽高。 如：span、a
（3）行内块元素：
特征：既不独占一行，又能设置宽高。
7.元素类型转换
display：block； 转为块元素
display：inline； 转为行内元素
display：inline-block；转为行内块元素
8浮动
float：left； 左浮动
float：right； 右浮动
作用：通过浮动，我们可以使块元素在同一行显示
9列表
无序列表
<ul>
<li></li>
<li></li>
...
</ul>
有序列表
<ol type="">
<li></li>
<li></li>
</ol>
自定义列表
<dl>
<dt>名词</dt>
<dd>解释</dd>
</dl>
10css样式：
（1）外部样式的引用
<link href="外部样式文件的地址"></link>
（2)去掉下划线：
text-decoration: none;
(3)去掉列表默认的样式：
list-style: none;
(4)平移动画
transform: translateX(20px) ;
translateX：在x轴的平移，取值为正，向右平移，取值为负，向左平移
translateY：在y轴的平移，取值为正，向下平移，取值为负，向上平移。
11background：背景颜色 背景图片链接地址 背景图片平铺方式 背景图片水平方向的位置 背景图片垂直方向的位置
参数二：url("")
参数三：默认repeat，no-repeat 不平铺 repeat-x水平平铺 repeat-y垂直
参数四：默认left，取值left/right/center/px/%
参数五：默认top，取值top/bottom/center/px/%
12position定位
可以有四个方位进行定位：
left、top、right、bottom
绝对定位：position：absolute；
特征：参照物是具有定位属性的父元素，不占据原本的位置（脱离文档流）
相对定位：position：relative；
特征：参照物是自己原本的位置，占据自己原本的位置（不脱离文档流），一般情况下作为包含块
固定定位：position：fixed；
特征：参照物当前窗口，它的位置与父元素无关，也与当前所在位置无关。
13高度塌陷
高度塌陷出现的契机：当没有给父元素高度，并且它里面所有的子元素都发生浮动的时候，会出现高度塌陷。
解决：
给父元素添加overflow：hidden；
在子元素的最后添加一个空盒子，并且给这个空盒子添加clear：both；
14opacity透明度
他的取值[0,1] 0:全透明 1：不透明
15display：none； 隐藏
opacity：0； 与display：none；区别
使用它们两个的时候，都可以实现不可见的功能，但是opacity：0的时候，这个元素它存在只是透明度发生变化
，而是display：none；这个元素不占据位置（移除）
16选择器的权重
“*”通配符权重为0
标签选择器的权重为1
class选择器的权重为10
id选择器的权重为100
内联样式的权重为1000
伪类选择器的权重 10
当属性出现重复的时候，会遵从权重高的那个，当权重相同的时候，后写的属性值会覆盖前面的那个
17锚链接
定义锚点，使用id来定义 ：
<p id="back">锚点</p>
定义锚链接，使用a标签：
<a href="#back">锚链接</a>
18overflow：hidden/scroll/auto
hidden：超出显示区域的部分隐藏
scroll：无论内容有木有超出显示区域，都会显示滚动条
auto：当内容超出显示区域的时候，则显示滚动条，否则不显示。
19子类选择器
.nav li:nth-child(1)，小括号中可以使用2n或者2n+1/2n+1，选中奇数或者是选中偶数个，
通过1/2/3…可以选中.nav下面的第n个li。
1447
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
