第一章：CSS类型
1、行内样式
<div style="color:red;font-size:30px;font-weight: 900;font-style: italic;">ABCD</div>
注意：行内样式，作用力优先级最高，但是不利于html与css的书写以及修改，会让html非常臃肿
2、内部样式
style标签是head标签的子标签
<head>....<style>div {color: red;font-size: 30px;font-weight: 900;font-style: italic;}</style>
</head>
注意：内部样式，可以把html与css做到模块级分离，便于同一个页面中，多处使用同一种样式
3、外部链接样式（推荐使用）
link标签是head标签的子标签，需要去建立一个index.css文件
<link rel="stylesheet" href="css/index.css">
- rel : 代表链接的资源类型是样式单（stylesheet）- href : 代表具体链接的资源路径，可以使用相对路径或者绝对路径
index.css文件内容如下：
div {color: red;font-size: 30px;font-weight: 900;font-style: italic;
}
注意：外部链接样式，可以把html与css做到文件级分离，便于多个页面中，多处使用同一种样式
4、三种样式类型的优先级
行内样式>内部样式>外部链接样式
第二章：CSS选择器
-
css语法
-
基本css选择器
1.元素选择器（比较笼统）：
注意：*代表所有HTML元素，是html通配符，可以给所有的html元素设置通用样式
*{margin:0;padding:0}
2.属性选择器：
属性选择器是对元素选择器更精确地限制，所有的html属性都可以作为限制条件，不仅仅是id属性
3.ID选择器：
注意：p#xx 代表是ID值是xx并且是p元素,是元素选择器和ID选择器两者结合，更加精确确定HTML元素，与p #xx的区别要清楚，p #xx代表p元素嵌套的后代元素，并且ID值为xx的元素
4.Class选择器：
注意：p.xx 代表是class值是xx并且是p元素,是元素选择器和class选择器两者结合，更加精确确定HTML元素，与p .xx的区别要清楚，p .xx代表p元素嵌套的后代元素，并且class值为xx的元素
5.包含选择器：
多个选择器之间只要有空格，就是html元素存在包含关系，此关系不一定是父子关系，也可能是爷孙关系等等。
6.子选择器：
子选择器一定是体现的父子关系，必须是直接关系，隔代关系不成立；是对包含选择器更强化的关系性选择器
7.兄弟选择器（不常用）：
平级下寻找后面的兄弟元素（只找弟弟，不找哥哥）
8.选择器组合：
-
伪元素css选择器
-
:first-letter：
不需要真实的html元素嵌套内容，就可以实现首字母的特殊样式处理
-
:first-line：
-
:before：
需要配合content属性，插入具体的内容，包括文本与图片，图片的插入方式：content:url(“图片路径”)
-
:after：
after跟before同理，只不过是在已有元素后面插入内容 -
伪类css选择器
1.结构性伪类选择器：
nth-child(n)此中的n,可以是1,2…也可以是odd(奇数) | even（偶数） | 表达式，比如2n+1
注意：nth-child(n),当不是表达式的时候，n是从1开始的；当是表达式的时候，是从0开始
2.UI元素状态伪类选择器：
3.其他伪类选择器：
:not() 代表过滤掉某个或某些元素
注意：如果想排除多个元素，应该这样书写选择器Selector1:not(Selector2):not(Selector3)…
5. CSS选择器优先级规则
- 脚本修改CSS样式
1.步骤：
注意：脚本中的css属性书写时，要按照驼峰写法书写，例如：静态css中的background-color,在脚本中要写成backgroundColor
2.修改行内css样式：
代码：
<script>function changeBg(){var bg = "";for(var i=0;i<6;i++){bg += Math.round(Math.random()*9);}//obj.style.属性名 = 属性值document.body.style.backgroundColor = "#"+bg;}document.onclick = changeBg;
3.修改HTML元素的class属性值：
第三章：盒子模型
- 盒子模型
1.盒子的四个区域
2.四个区域对应的css,如何处理
①、填充区使用padding:（以上为开始，顺时针旋转）
padding:20px
||
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
padding:20px 40px;
||
padding:20px 40px 20px 40px;
||
padding-top:20px;
padding-right:40px;
padding-bottom:20px;
padding-left:40px;
padding:20px 30px 40px;
||
padding:20px 30px 40px 30px;
||
padding-top:20px;
padding-right:30px;
padding-bottom:40px;
padding-left:30px;
padding:20px 20px 30px 10px;
||
padding-top:20px;
padding-right:20px;
padding-bottom:30px;
padding-left:10px;
②、外边距区使用margin:（以上为开始，顺时针旋转）
③、边框区使用border:（三个方面，四个方向）
④、内容区使用width,height:（width属性默认只是对内容区的宽度设置,height属性默认只是对内容区的高度设置，不是针对整个盒子的宽度，高度）
width:300px
注意：使用box-sizing属性可以设置width属性对于宽度的范围，box-sizing的值默认是content-box,代表宽度是对内容区的设置；box-sizing的值为border-box，代表宽度是对整个盒子的设置
第四章：多栏（多列）布局相关
- 传统布局(float)
1.使用方法：
让块级元素横向布局，需要使用float:left | right
.container .item1{float: left;
}
2.存在可解决的问题：
使用float之后，所在的父级元素，已无高度，会导致下方的元素，向上移动，产生多元素重叠的问题。
3.如何解决问题
①、给父级设置高度（不推荐）如：height:300px
②、给父级设置overflow:hidden，到达父级高度随子级高度自适应的效果(推荐使用)
4.无法解决的问题
1、元素之间的间距均匀分布，需要计算，而且不一定能均匀分布。
2、书写比较繁琐，代码比较冗余。
2. 传统布局(display:inline-block)
1.使用方法：
让块级元素横向布局，需要使用display:inline-block,让块级元素变成内联块级元素，内联块级元素特征：对宽度、高度支持、并且不独占一行
.container .item1{display: inline-block;}
2.存在可解决的问题：
使用display:inline-block之后，元素之间会莫名产生空隙（空白），产生的未知区域，对于整体的布局会产生影响
3.如何解决问题
①、把元素标签的首尾相连（不推荐）
②、文字大小处理方式
给使用display:inline-block的元素的父级元素添加font-size:0px,并且该元素要设置有效字体大小
- 现代布局(display:flex)
1.使用方法：
让多个元素横向布局，只需要给这些元素的父级元素添加display:flex
2.相关配套属性：
具体描述：
详细讲解：
①、justify-content:就是如何管理元素之间的空白的分布
属性值：
②、flex-direction:
③、flex-wrap:
④、order:
⑤、flex:
⑥、align-items | align-self:
⑦、align-content:
第四章：定位相关的样式
1.四种定位模式：
position:relative | absolute | fixed | static
position:设置元素的定位模式，四种定位模式如下：
①、纯使用relative
说明：这种定位模式是相对定位，此模式的定位参考点是元素本身的位置
总结：当元素原有位置有参考价值时，使用此定位模式
②、纯使用absolute
说明：这种定位模式是绝对定位，此模式的定位参考点是浏览器范围
总结：当元素原有位置无参考价值时或者位置无关紧要时，使用此定位模式
③、relative和absolute结合使用
说明：这种定位模式是绝对+相对定位，子级元素使用绝对定位，父级元素使用相对定位，此模式的定位参考点是父级的范围
总结：当元素想自由放置并又有所范围限制时，使用此定位模式
④、纯使用fixed
说明：这种定位模式是固定定位，此模式的定位参考点是浏览器范围
总结：当元素想自由放置并不随浏览器内部滚动条滚动而滚动时（相对于浏览器固定式），使用此定位模式
相关的属性：
z-index:可以设置定位层级，值越大，越在上层；
left:设置距离左边的距离
top:设置距离上边的距离
bottom:设置距离下边的距离
right:设置距离右边的距离
