html与css阶段 知识点大总结。
1. 认识HTML。
a. 是什么？
html就是超文本标记语言。简单来说就是为网页创造的一种运行在浏览器上的标记语言。
b.版本？
目前是到HTML5了。
2. 创建html。
a. 文件名要以html结尾才可以。
b. !+tab键即可出来html的默认结构。
3. 结构简单说明。
a. <head> 头部 网页标题等内容
b.<body> 身体部分 网页中的内容都写在该部分。
4. html字符集。
a.意义或作用：
显示网页中特殊意义的字符。
显示键盘上没有的字符。
b.规则或写法：
以&开头，以；结尾（比如空格  ；）
5. html标签之块级元素。
a.特点：
总是在新一行开始，也就是独占一行。
高度，宽度，以及内外边距是可控的。
不设置宽度，默认是100%宽度（相对于父级）。
b.功能：
主要用来搭建网站的架构，来布局页面，承载内容。
c. 常见的块级元素标签：
div：基本用来搭建网页架构。
p：段落标签，用来写一段段的文本内容、
h1~h6:标题标签，用来写标题。h1到h6 会越来越小，只有6个，没有h7及其它。
列表：
ol（有序列表，前面带数字 还可以设置type='a',前面变成字母）
结构： ol li （li是列表中具体的那有列，有几列就几个li）
ul（无须列表，前面是小黑点）
结构： ul li （li是列表中具体的那有列，有几列就几个li）
hr:水平线（单标记标签）
noscript：当浏览器禁用JavaScript时，会显示该标签内的内容。
table：表格
结构 table tr td（tr是行，td是该行里的一列，可以有多个行，每个行里也可以有多个列。）
form：表单
pre：定义预格式文本 结构：pre code（一般是和code结合使用，
6. html标签之行内元素。
a.特点：
和其他元素都在一行显示，不独占一行。
高，行高已经顶部和底部的边距不可控制。
宽度就是它文字的宽度，不可控制。
b.作用：
加强内容的显示，控制细节。
c.常见的行内级元素标签：
span：文档中的节
a：超链接（跳转页面，href设置跳转的具体地址 target设置是 在当前页面 （默认）还是新页面打开（_blank））
code: 代码文本
em ：文本倾斜 更加语义强调
i：文本倾斜 一般用来做自定义图标
strong：加粗 更强调语义
b：加粗
lable：定义input标注
7. html标签之行内块元素。
a.特点：
和其他元素都在一行显示，不独占一行。
高，行高已经顶部和底部的边距可控制。
宽度就是它文字的宽度，可控制。
b.作用：
加强内容的显示，控制细节。
c.常见的行内级元素标签：
input：定义输入控件（结合from使用）
type属性控制不同的控件，
默认是text控件文本框，
password（密码框） email（邮箱框） checkbox（复选框）
radio （单选框） rest（重置所有 input内容）
ssubmit（提交按钮） button（普通按钮） file（上传）。
textarea：文本域
select：定义选择列表（结合option使用） 结构 select option（具体的选择项，可以多个）
img：图片标签（src属性指定图片路径）
8. html标签企业规范。
a.块级元素与块级元素平级，行内与行内元素平级。
b.块元素可以包含行内元素或者某些块元素，但行内元素不能包含块元素，它只能包含其它的行内元素。
c.(h1~h6,p,dt) 只能包含行内元素，不能再包含块元素。
d. li 标签可以包含 div 标签，因为li 和div标签都是装载内容的容器。
e.更多参考文档
9. css是什么？
层叠样式表
10. 有何作用？
修饰，美化网页
11. css引入方式。
a.行内样式：
<div style='color:red;'></div>
b.嵌入式：
在head里面写 <style type="text/css"> div:{ color:red; } </style>
c:链接式：
在head里面写 <link rel="stylesheet" type="text/css" href="./css/index.css">
d:导入式：
@import url（ 'style.css’） 注意放在最上面一行。
可以导入其它的css文件，比如在a.css文件里导入b.css文件，但是注意路径问题，是从当前操做的css文件出发去寻找要导入的css文件。
12. 基本选择器。
a: * 通配选择器 选择页面中所以的元素。
通常都是清除元素默认的内外边距 * { margin：0；padding：0；}
b： element (元素标签) 会选择页面中所有的。
p { color：red；}
c：#id （id选择器) 选择元素id属性值为#后面值的所有元素，但一个id名页面中唯一。
#nav { color：red；}
d：.class (class选择器) 选择元素class属性值为.后面值的所有元素，但一个class名页面中不唯一。
.nav { color:red;}
13. 关系选择器。
a: div p { } 包含选择器 元素与元素之间空格隔开，代表的意思是 div里面的所有p元素
b：div>p { } 子选择器 父元素与子元素用> 隔开，代表是选择父元素下面的子元素p，不会选择孙子辈
c：div+p { } 相邻选择器 兄弟节点之间用+隔开，代表选择div后的下一个p元素 有一个特殊方法，比如先选中所有p元素 然后再试使用该方法选中第一个p，可以使选中除第一个外后的所有p元素 （p+p）
d：div~p { } 兄弟选择器 兄弟节点之间用~隔开，代表选择div后的所有兄弟辈的p元素
14. 伪类选择器与元素选择器。
伪类选择器：
a： E：hover 设置鼠标悬停在E元素上的样式。
b：更多见表。
元素选择器：
a： E[attr] 选取具有attr属性的E元素。
b：更多见表。
15. css选择器权重。
a.顺序：
!important > 行内 > id > class > 标签 > *
b.如何计算：
!important：无穷大
行内： 1000
id ：100
class | 属性 | 伪类 ：10
标签：10
*：0
注意：11个class的权限相加还是不会大于一个id的权限，不能跨级的。
16. 尺寸大小。
width：宽度
height：高度
二者的默认值是auto。
auto与百分比（%）的区别：
auto: 会将元素撑开至整个父元素width，但是会减去margin+padding+border。
%：会强制将元素变成父元素一样的宽度，并且会将（margin+padding+border）加到width上。
17. 单位。
绝对单位：不会因为其他元素的尺寸变化而变化。
相对单位：没有一个固定的度量值，而是由其他元素尺寸来决定的相对值。
px:像素。
vw：% 是相对于浏览器视口的百分比宽度。
vh：% 是相对于浏览器视口的百分比高度。
%：相对于父元素的宽度或者字体大小。
18. 元素之间的转换。
display：block；将某元素转换为块元素。
display：inline；将某元素转换为行内元素。
display：inline-block；将某元素转换为行内块元素。
19. css文字样式。
a: 字体样式： font-family
b: 字体大小： font-size 注意不同浏览器默认大小不一样。
c：字体加粗： font-weight 可以用单词或者100~900
d：文字颜色： color 使用16进制时可以简写形式
e:首行文本缩进： text-indent
f：文本水平对齐方式： text-align （左 left，右 right，中 center）
g：设置文本装饰： text-decoration （none：定义标准文本，line-through：删除线，derline：下划线）
h：显示光标类型： cursor (pointer:小手)
i：列表样式： list-style （none：去掉小点）
j：单行文本溢出显示 : overflow:hidden;(溢出隐藏) white-space：nowrap；（单行文本不换行） text-overflow：ellipsis；（规定当文本溢出元素时发生的事情，前面一个是显示省略号）
k：多行文本溢出显示:
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:4; ===>在第几行显示省略号
overflow：hidden；
20. 边框的样式。
a：border:1px solid #f00;
第一位：代表边框的尺寸，
第二位：代表边框的线的样式（solid：实线，dashed：虚线）
第三位：代表边框的颜色。
b：还可以拆开单独设置四个边，
border-top：xx；border-right：xx；
border-bottom：xx；border-left：xx；
c：颜色可以单独设置 border-color：xx xx xx xx；（上右下左）注意 不设置颜色默认是color颜色 （transparent：透明颜色，可以来做三角形）
21. 背景图的样式。
a：背景色：background：xx；
b：背景图：background-image 一般都是：background：url（xx）；
c：规定如何重复背景图像：background-repeat： repeat-x ：横向平铺 repeat-y：纵向平铺 no-repeat：不平铺
d：背景图片元素起始位置：background-position：x y；（二个值时是分别指x，y，一个值是代表x是当前值，y是center。）
e：背景图大小： background-size：关键字（contain：缩小，cover：放大），百分比（二个值，对应x，y），数字
22. 盒模型。
a：组成部分: content(width|height) + padding + border + margin
b:内边距： padding ==》值：百分比，数值，没有负值
padding-left
padding-right
padding-bottom
padding-top
padding:10px(上) 20px(右) 30px(下) 40px(左)
padding:50px (上、右、下、左)
padding:20px(上、下) 30px(右、左)
padding:10px(上) 20px(右左) 30px(下)
***百分比只和父元素width计算
c：外边距：margin : 外边距 ===>值：百分比、数值、负值
margin-left
margin-right
margin-bottom
margin-top
margin:10px(上) 20px(右) 30px(下) 40px(左)
margin:50px (上、右、下、左)
margin:20px(上、下) 30px(右、左)
margin:10px(上) 20px(右左) 30px(下)
***百分比只和父元素width计算
-----auto的问题：适应剩余空间-----
auto不生效：没有剩余空间占有了
d：俩种盒模型:
w3c标准：width = 宽度
ie标准 ：width = content + padding + border
e:切换盒模型的标准：
w3c：box-sizing:conten-box
ie ：box-sizing:border-box
23. 浮动与清除浮动。
浮动 ： float
a：值 left、right
b：特性: 1、包裹（收缩、隔绝）2、破坏 : 会让父元素的高度塌陷,不是bug，【是标准】
c:清除浮动:
不用: 多加一个块元素，加入样式clear:both
用 : 给父元素加入伪类after，样式
.g-container:after{
content: "";
clear: both;
display: block;
}
24. overflow和BFC。
overflow：当内容溢出时的表现
a：值 hidden（溢出隐藏） scroll （溢出隐藏但是有滚动条）
overflow-x：scroll （只有x轴滚动条）overflow-y：scroll （只有y轴滚动条）
BFC： 块级格式化上下文。 BFC就是一个css的一个布局概念，是一个独立 的区域，是一个环境。
浮动前面是利用 ::after 以及clear：both ，现在还可以给父元素添加 overflow： hidden 清除浮动,其实就是激活了BFC
a.原则：如果一个元素具有BFC，那么内部元素在怎么弄，都不会影响到外面的元素。
b.激活BFC的条件（满足之一就可以）：
1：根元素，即html元素
2：float的值不为none
3：overflow的值不为visible
4：display的值为inline-block、inline-flex、flex、flow-root、table-caption、table-cell。
5：position的值为absolute或者fixed
c.作用：
1：可以阻止元素被浮动的元素覆盖（可做两栏布局自适应）
2: 可以包含浮动的元素—清除浮动
3：解决同一个BFC区域的垂直方向margin塌陷的问题（属于同一个BFC的两个相邻的box的margin会重叠，以大的为主。要想解决这个问题，可以将两个盒子分为不同的BFC中。）
25. 相对定位 position：relative
a.值： left ，right，top ，bottom 接收正数，负数，百分比
注意： 上面四个同时出现时，left干掉right，top干掉bottom
b.定位标准： 以自身定位
c.保留自己原来的空间，不脱离文档流，visibility: hidden;也是在隐藏后还会保留原来的位置
26. 绝对定位 position：absolute
a.值： left ，right，top ，bottom 接收正数，负数，百分比
注意： 上面四个同时出现时，会出现拉伸效果。
b.定位标准： 如果所有的上级元素没有relative，位置将依据浏览器左上角开始，如果父元素有则依据父元素左上角开始计算。
c.不保留自己原来的空间，脱离文档流，独立对象存在、
27. 无依赖定位.
让absolute使用不需要relative
不使用left那些，使用margin来定位即可，使用正负值改变位置。
28. 固定定位和z-index.
固定定位 position：fixed；
a.值： left ，right，top ，bottom 接收正数，负数，百分比
b.定位标准： 以浏览器窗口定位，用来做右边部分的导航广告。
c.层级关系：z-index 当使用了position后才可以使用
值：数值越大，则在上面。
29. 盒子阴影：box-shadow
a.值：
1》 水平位置 （必选值）
2》 垂直位置 （必选值，不需要写0px）
3》 阴影的模糊程度 （值越大越模糊 px）
4》 尺寸（使用较少）
5》 阴影颜色
30. 插入伪类元素。
1》 before 插入在子元素里的前面 content必须写，值是该插入元素的内容 “”就是什么没有，
2》 after 插入到子元素的最后面 content必须写，值是该插入元素的内容 “”就是什么没有，
31. 网页图标及判断ie
1》网页图标
<link rel='icon' href='favicon.ico'>
title可能会出现乱码：解决办法
<meta charset='utf-8'>
2》html判断IE版本
非IE：<!--[if !IE]> 除了IE外都会执行 <!if[endif]-->
<!--[if lt IE 6]> <!if[endif]-->
<!--[if lte IE 9]> <!if[endif]-->
<!--[if gte IE 9]> <!if[endif]-->
!:非IE
lte : 小于或等于
lt : 小于
gte : 大于或等于
gt:大于