HTML和CSS

学习了一段时间，HTML和CSS学完了，但是一小部分还是不太了解，因为我们学习Java，不用太过了解。所以我简单了做了几个脑图和大家分享一下。

html：下面是HTML

 当然了还有CSS但是css有点多，css是什么
Html 负责的是页面结构
CSS 负责页面样式的美化
能够将页面美化到一定程度，相当于网页的皮肤，使用css能实现样式和网页结构的分离，Cascading  style  sheet  层叠样式表
css的书写位置（样式的分类）
行内样式
行内是写在标签内部，即在标签内部添加style属性
适用范围：该样式只适用于当前标签，会造成代码的大量冗余（重复代码出现的次数太多）
内嵌样式（内部样式）
位置：在head标签中添加<style>标签
能够实现html和css的基本分离，样式的适用性高于行内样式
适用范围：当前页面所有满足条件的标签
外部样式
首先需要新建文件，后缀名为.css,然后通过link标签导入外部的css文件
能够实现html和css的彻底分离，样式的适用性高于行内样式，内嵌样式
适用范围：适用于多个页面（所有导入当前文件的页面都可以使用该样式）
css的基本书写结构
选择器{属性:属性值；}，大多数人会将属性和属性值合并称为一条声明即：选择器{声明;声明;}
选择器的分类
简单选择器
标签选择器
格式：  标签名{属性：属性值；}
Id选择器
格式：#id名{属性：属性值;}
类别选择器
格式：.类名{属性：属性值;}
通用选择器
格式：*代表所有标签
复杂选择器
后代选择器
格式：基本选择器 基本选择器
子代选择器
格式：基本选择器＞基本选择器
交集选择器
格式：选择器选择器
并集选择器
格式：选择器，选择器
属性选择器
格式：选择器【属性】或者 选择器【属性=属性值】
字体相关属性
font-family  文字的字体
font-size 字体大小（属性值可以是px）
font-style 调节字体的样式
属性值：mormal 正常
italic 倾斜
oblique 特殊倾斜
font-weight  文字的粗细
normal 正常
bold 加粗
bolder 更粗
lighter 变细
font   简略写法
字体样式的调节 字体的粗细 字体的大小  字体
font-style  font-weight font-size  font-family
背景属性
backgroung-color  调节背景颜色
background-image:url()  调节背景图片
background-repeat  调节北京是否重复
no-repeat
repeat-x
repeat-y
repeat
background-position  调节背景图片的位置
缩写：没有顺序和个数的要求
文本属性
text-decoration：none  去下划线
text-align 文字的水平对齐方式
属性值
left
center
right
justify
子主题 3
列表属性
list-style-type  调节列表前的标识
list-style-image  调节列表前的图片
list-style-position  调节列表前标识的位置
outside  在列表外面
inside  在列表内部
元素的分类
行内元素
在一行显示，不能自动换行
不能设置宽高
常见的行内元素有
a u s i del font span
块级元素
自动换行，独立占一行
可以设置宽高属性
每个块级元素的宽度默认都是父元素的宽度
常见的块级元素
p h1-h6 ul ol dl li div
行内块元素
在一行显示，不能自动换行
可以设置宽高属性
常见的有
input image button
元素之间的相互转换
display：biock inline inline-block
div
组成的部分;
content border padding margin
实际大小
content(width+height)+border+padding
border 边框
border-color
border-style
border-width
border-left
border-right
border-top
border-bottom
padding 内边距
padding-left
padding-right
padding-top
padding-bottom
缩写
一个值
上下左右
二个值
上下      左右
三个值
上            左右        下
四个值
上   右  下   左
margin 外边距
margin-left
margin-right
margin-top
margin-bottom
缩写  同padding
垂直外边距合并
在垂直方向上，上一个盒子设置了下边距，下一个盒子设置了上边距，合并取最大值
垂直外边距塌陷
在子元素中设置margin-top，父元素也会随之移动：解决方式1.给父元素添加border属性   2‘给父元素添加overflow：hidden属性
浮动
浮动的作用
制作导航条
网页的布局
文字的环绕效果
浮动的特点
会产生拖标
会发生元素转换
不占位置
统计元素之间一个发生浮动，其他的都要发生浮动。
float  属性
left     right
清除浮动
在父级元素没有设置高宽而元素又都发生了浮动，那么这个时候我们需要清除浮动产生的影响
清除浮动的方式
给父元素设置高度（通用性小）
给父元素添加空表签，给标签添加clear（leaf，right，both，none）（ 麻烦，不建议使用）
给父元素添加overflow：hidd属性（不建议使用）
使用微位元素清除浮动
元素的隐藏
overflow：hidd（隐藏元素中溢出的内容，属性值还有：scroll，ayto自动）
disply
css的特性
层叠性
在同一标签定义多个样式，样式发生冲突，后面定义的样式会覆盖前面定义的样式
CSS的继承性
在嵌套关系中,子元素的样式会受到父元素的的影响，这时我们称之为css的继承性
宽高属性不具有继承性
具有继承性的属性：color,font-size,fontfamily,font-weight,font-style,line-height
特殊的有：
a标签不能继承父元素的颜色属性（因为a标签有自己默认的颜色）
优先级
标签选择器<类选择器<id选择器<行内样式<!important
继承的优先级是最低的，权重几乎为0
权重是可以叠加的
定位
静态定位:  static
Static,默认，不进行任何位置的移动，元素仍然是标准流的显示方式
固定定位:fixed（固执型定位）
以body为主题（标准）进行位置移动，将某元素固定在该位置固定定位会产生脱标，即固定定位不占位置
相对定位：relative（自恋型定位）
相对于自己原来的位置进行移动，只是进行了位置移动，但是还是以标准流的形式存在
绝对定位：absolute
相对于body的位置移动，会产生脱标若想要相对于父级进行位置移动则需要给子元素设置绝对定位，给父元素设置相对定位（子绝父相）
居中
垂直居中
top-50%  margin-top（小盒子高的一半）
左右居中
left-50%  margin-left（小盒子宽的一半）css是什么
Html 负责的是页面结构
CSS 负责页面样式的美化
能够将页面美化到一定程度，相当于网页的皮肤，使用css能实现样式和网页结构的分离，Cascading  style  sheet  层叠样式表
css的书写位置（样式的分类）
行内样式
行内是写在标签内部，即在标签内部添加style属性
适用范围：该样式只适用于当前标签，会造成代码的大量冗余（重复代码出现的次数太多）
内嵌样式（内部样式）
位置：在head标签中添加<style>标签
能够实现html和css的基本分离，样式的适用性高于行内样式
适用范围：当前页面所有满足条件的标签
外部样式
首先需要新建文件，后缀名为.css,然后通过link标签导入外部的css文件
能够实现html和css的彻底分离，样式的适用性高于行内样式，内嵌样式
适用范围：适用于多个页面（所有导入当前文件的页面都可以使用该样式）
css的基本书写结构
选择器{属性:属性值；}，大多数人会将属性和属性值合并称为一条声明即：选择器{声明;声明;}
选择器的分类
简单选择器
标签选择器
格式：  标签名{属性：属性值；}
Id选择器
格式：#id名{属性：属性值;}
类别选择器
格式：.类名{属性：属性值;}
通用选择器
格式：*代表所有标签
复杂选择器
后代选择器
格式：基本选择器 基本选择器
子代选择器
格式：基本选择器＞基本选择器
交集选择器
格式：选择器选择器
并集选择器
格式：选择器，选择器
属性选择器
格式：选择器【属性】或者 选择器【属性=属性值】
字体相关属性
font-family  文字的字体
font-size 字体大小（属性值可以是px）
font-style 调节字体的样式
属性值：mormal 正常
italic 倾斜
oblique 特殊倾斜
font-weight  文字的粗细
normal 正常
bold 加粗
bolder 更粗
lighter 变细
font   简略写法
字体样式的调节 字体的粗细 字体的大小  字体
font-style  font-weight font-size  font-family
背景属性
backgroung-color  调节背景颜色
background-image:url()  调节背景图片
background-repeat  调节北京是否重复
no-repeat
repeat-x
repeat-y
repeat
background-position  调节背景图片的位置
缩写：没有顺序和个数的要求
文本属性
text-decoration：none  去下划线
text-align 文字的水平对齐方式
属性值
left
center
right
justify
子主题 3
列表属性
list-style-type  调节列表前的标识
list-style-image  调节列表前的图片
list-style-position  调节列表前标识的位置
outside  在列表外面
inside  在列表内部
元素的分类
行内元素
在一行显示，不能自动换行
不能设置宽高
常见的行内元素有
a u s i del font span
块级元素
自动换行，独立占一行
可以设置宽高属性
每个块级元素的宽度默认都是父元素的宽度
常见的块级元素
p h1-h6 ul ol dl li div
行内块元素
在一行显示，不能自动换行
可以设置宽高属性
常见的有
input image button
元素之间的相互转换
display：biock inline inline-block
div
组成的部分;
content border padding margin
实际大小
content(width+height)+border+padding
border 边框
border-color
border-style
border-width
border-left
border-right
border-top
border-bottom
padding 内边距
padding-left
padding-right
padding-top
padding-bottom
缩写
一个值
上下左右
二个值
上下      左右
三个值
上            左右        下
四个值
上   右  下   左
margin 外边距
margin-left
margin-right
margin-top
margin-bottom
缩写  同padding
垂直外边距合并
在垂直方向上，上一个盒子设置了下边距，下一个盒子设置了上边距，合并取最大值
垂直外边距塌陷
在子元素中设置margin-top，父元素也会随之移动：解决方式1.给父元素添加border属性   2‘给父元素添加overflow：hidden属性
浮动
浮动的作用
制作导航条
网页的布局
文字的环绕效果
浮动的特点
会产生拖标
会发生元素转换
不占位置
统计元素之间一个发生浮动，其他的都要发生浮动。
float  属性
left     right
清除浮动
在父级元素没有设置高宽而元素又都发生了浮动，那么这个时候我们需要清除浮动产生的影响
清除浮动的方式
给父元素设置高度（通用性小）
给父元素添加空表签，给标签添加clear（leaf，right，both，none）（ 麻烦，不建议使用）
给父元素添加overflow：hidd属性（不建议使用）
使用微位元素清除浮动
元素的隐藏
overflow：hidd（隐藏元素中溢出的内容，属性值还有：scroll，ayto自动）
disply
css的特性
层叠性
在同一标签定义多个样式，样式发生冲突，后面定义的样式会覆盖前面定义的样式
CSS的继承性
在嵌套关系中,子元素的样式会受到父元素的的影响，这时我们称之为css的继承性
宽高属性不具有继承性
具有继承性的属性：color,font-size,fontfamily,font-weight,font-style,line-height
特殊的有：
a标签不能继承父元素的颜色属性（因为a标签有自己默认的颜色）
优先级
标签选择器<类选择器<id选择器<行内样式<!important
继承的优先级是最低的，权重几乎为0
权重是可以叠加的
定位
静态定位:  static
Static,默认，不进行任何位置的移动，元素仍然是标准流的显示方式
固定定位:fixed（固执型定位）
以body为主题（标准）进行位置移动，将某元素固定在该位置固定定位会产生脱标，即固定定位不占位置
相对定位：relative（自恋型定位）
相对于自己原来的位置进行移动，只是进行了位置移动，但是还是以标准流的形式存在
绝对定位：absolute
相对于body的位置移动，会产生脱标若想要相对于父级进行位置移动则需要给子元素设置绝对定位，给父元素设置相对定位（子绝父相）
居中
垂直居中
top-50%  margin-top（小盒子高的一半）
左右居中
left-50%  margin-left（小盒子宽的一半）