H5基础概念

<!-- 
标签：


块标签:div（常用来布局划分区域） p标签（段落） h1-h6（标题）
  特点：支持设置宽高 独占一行 支持所有css样式


行属性标签：span（文字） a（超链接）
特点：不支持设置宽高 拍成一行 不支持上下的margin和padding


行块属性标签：img（图片）
特点：即支持宽高 又排成一行
***************************************************************************
css的三种引入方式


行间样式：在标签中写入style属性 样式写在style中（优先级最高 不常用）


内部引入方式：在head中写入style标签 样式写在style标签中


外部引入方式：在head中使用link标签引入外部css文件（开发中使用最多）


注意：外部和内部引入方式优先级相同，文档后面的会覆盖前面的
****************************************************************************
选择器


标签选择器：语法：标签名{样式}


class选择器：语法：“.”+class名{样式}
特点：1.优先级比标签选择器高 2.可以有多个class名 3.不同标签可以使用相同的class名

后代选择器：


语法：父选择器 空格 子选择器{样式}
优先级为选择器权重想加（class权重位10 标签选择器权重为1）
**************************************************************************** 盒模型：

外边距：margin 用来调整元素位置 它的位置相对于父元素的边缘或相邻元素
注意：元素第一个子元素的marign-top会传递给父元素
解决方案：给父元素设置overflow：hidden


边框：border 一般设置三个参数 分别为颜色 边框宽度 边框样式（常用实线solid）三个参数没有顺序

内边距：padding 内容区域距离元素边缘的距离
1.内容不会占padding的位置 2.padding的颜色和背景颜色相同


注意：border和padding都会让元素变大


补充内容：
border-redius（圆角度）
圆角度的值为圆角的半径
****************************************************************************
float（浮动）：
浮动包括left和right（左浮动和右浮动）
设置浮动是为了让块属性可以排成一行


1.浮动可以是行属性元素支持宽高
2.浮动具有流式布局效果和文字环绕效果
3.浮动会有脱离文档流效果


浮动的影响：
如果父元素没有高度，靠子元素撑开。当子元素浮动，脱离文档流，父元素则不会被撑开
进而失去高度，这样会影响布局
解决方案：给父元素设置overflow：hidden
***************************************************************************
position（定位）
fixed（固定定位）
相当于浏览器可视窗口，一般用于悬浮窗，小广告，返回顶部按钮等功能。


relative（相对定位）
定位相对于它原来位置，一般配合子元素的绝对定位 absolute使用。


absolute（绝对定位）
定位相对于拥有定位的父级元素，如果父元素没有定位，则一直向上查找有定位
的祖先元素，直到找到body为止


注意：定位只适用于某一个模块中的某个小部件（小模块），不可以用于大范围布局
绝对定位大多数情况配合父元素的相对定位使用。可以搭配记忆。
*************************************************************************
居中问题：


水平居中：
块属性元素水平居中，给需要剧中的元素设置margin：0 auto；
行属性/行块属性/文本元素水平居中，给父元素设置text-align：center；


垂直居中：
大部分情况没有捷径，使用margin或者定位调整。
单行文本/行属性标签要垂直居中的时候设置line-height：父元素高度；
*************************************************************************
display：


display：block；把元素转化为块属性
display：inline；把元素转化为行属性
display：inline-block；把行属性转化为行块属性（最常用，让行属性支持设置宽高）
display：none；隐藏（常用来制作动画效果）
*************************************************************************
hover：
hover规定了鼠标移入元素后展示的效果，hover只能控制它本身或者子元素
例如：
控制本身
选择器：hover{鼠标移入效果}


控制子元素
父选择器：hover 空格 子选择器{鼠标移入的效果}
list-style-type: none;去除列表的点或编号
opacity: 0.8;透明度
text-decoration:none; 去除链接下划线
 -->