1.css引入方式：
①行间样式
<div style=""></div>②页面级css，在head中定义style标签
③外部css
<link rel="stylesheet" type="text/css" href="xxx">注意：type和rel属性指的是这是一个css文件，可以不写type
2.装饰div的css方式和顺序
！important>行间样式>id>class/属性>标签选择器>通配符选择器
他们是按照权重来排序的，权重是156进制
| 选择器 | 权重 |
| ！important | Infinity（正无穷） |
| 行间样式 | 1000 |
| id | 100 |
| class/属性/伪类 | 10 |
| 标签/伪元素 | 1 |
| 通配符 | 0 |
属性选择器：通过已存在的属性名和或者属性值匹配元素
3.id和class的区别：一个标签只能有一个id，一个id对应一个标签；一个标签可以有多个class，一个class可以对应多个元素。
4.选择器：
①父子选择器/派生选择器
例：
div em{} div下面任意em标签
②直接子元素选择器
例：
div>emdiv下面em标签
③ 并列选择器
例：若想让class名为demo盒子名为demo的背景颜色设置成红色？
<div>1</div>
<p class='demo'>2</p>
<div class='demo>3</div>标签写前，类名写后
div.demo {
background-color:red;
}还可以写成
div[class='demo'] {
background-color:red;
}④分组选择器
例：想让em标签和p标签的宽高都设置成200px
em,p {
width:200px;
height:200px;
}扩展：若两个选择器指向同一个元素，则比较权重之和，若权重大的优先执行，若权重相等，则执行最后一个，会覆盖前面的样式。
5.foint-size：指文字的大小，改变的是文字的高度
font-style：字体样式，例如italic斜体
font-weight：字体粗细
font-family：字体包
color：文字颜色，有三种方式
①纯英文：red/green....
②颜色代码：R B G （red/green/blue)
00-ff 00-ff 00-ff (16进制)
③颜色函数 rgb(a,b,c) 0-255 10进制数
6.border：混合属性 （边框粗细）（边框样式）（边框颜色）
由border-width,border-style,border-color组成
7.画出三角形（边框三边透明）
<div></div>div {
width: 0;
height: 0;
border: 20px solid transparent;
border-left-color: red;
}展示效果：
8.css只有段注释
9.首行缩进：text-indent：2em
1em = 1*font-size
10.像素（px）：屏幕是由一个个小像素格组成，每个格一个颜色，分辨率是一英寸容纳像素的大小，是一种相对单位
11.光标元素：cursor:pointer/e-rsize/help...
12，伪类：选择器的一种，css内置类，css内部赋予他一些特性和功能，例如：a:link
13.
①行级元素，内联元素（inline）：内容决定元素所占宽高，不可以通过css改变宽高。
例如：<span><strong><em><a><del>
②块级元素（block）：独占一行，可以改变宽高
例如：<div><p><form><address><ul><li><ol>
③行级块元素（inline-block）：可以改变宽高，内容决定大小
例如：<img>
14.盒模型
分为两种：
①标准盒模型
总宽度：border(左右)+width+padding(左右)
总高度：border(上下)+height+padding(上下)
②IE盒模型(怪异盒模型)
总宽度：width
总高度：height
15.
relative:相对定位，保留原来位置定位
absolute：绝对定位，相对于有定位的父元素进行定位，如果没有，相对文档定位
注意：absolute和relative一般配套使用
16.对于两栏布局，我们可以一个进行定位，另一个自适应让出被压住的部分
17.经典问题
①
<img></img>
<img></img>
<img></img>img展示的过程中，图片之间会出现间隙
原因：任何文本类元素都具有文本的特性，img是行级块元素，所以可以删除img之间的空格和空行来解决图片之间的缝隙问题。
②
<div>
<div></div>
<div>在改变子元素的margin-top的时候，会发现父元素也会跟着一起移动，造成margin塌陷。
原因：父子嵌套在垂直方向的margin是结合在一起的，会使用最大的值。
解决方法:
Ⅰ.给父级元素设置边框（不推荐，因为在需求中对像素非常严格）
Ⅱ.触发bfc（block format content 块格式上下文），每个元素相当于盒子，每个盒子有自己的语法规则，bfc让该盒子所属的语法规则发生改变。
（1）position：absolute
（2）display：inline-block
（3）float：left/right
(4) overflow:hidden
③
span标签及其示意图
<html>
<head>
<style>
span{
margin: 0 100px;
background-color:#f40;
}
</style>
</head>
<body>
<span>2</span>
<span>3</span>
</body>
</html>
div标签及其示意图
<html>
<head>
<style>
div{
margin: 100px 0;
background-color:#f40;
}
</style>
</head>
<body>
<div>2</div>
<div>3</div>
</body>
</html> 
首先有两个span标签，我们让他们的margin-left和margin-right都设置成100px，可以看到两个元素之间相差200px，当我们把span标签换成div的时候，可以发现div之间的间隔相差100px。
可以看出span不共用区域，而div公用区域，对于这种问题，不做解决，如果div想要上面的效果，可以直接把上面的margin值设成200px。
注意：html结构不能随意更改，结构改动对整体影响很大。
扩展知识：在实际开发过程中，通常先开发css，在开发html，因为在结构中会有很多相似的点，可以先列举出来，然后在赋给html元素。
20.浮动元素float(left/right)
会使元素向左或者向右移动，其周围元u尿素也会重新排列。浮动元素产生了浮动流，所有产生了浮动流的元素，块级元素看不到他们。
*产生了bfc的元素和文本类属性的元素（如inline）可以看到浮动元素。
21.如果有个div，里面包括这几个div。里层的元素都是浮动元素，div包裹无法里层div，该如何处理？
<html>
<head>
<style>
.wrapper {
border: 1px solid black;
}
.content {
width: 200px;
height: 30px;
background-color: red;
float: left;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content"></div>
</div>
</body>
</html>
解决方法：①div是块级元素，不能识别浮动元素，可以让父级元素也变成浮动元素
②使用伪元素处理，清除浮动
<html>
<head>
<style>
.wrapper {
border: 1px solid black;
}
.content {
width: 200px;
height: 30px;
background-color: red;
float: left;
}
.wrapper::after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content"></div>
</div>
</body>
</html>22.伪元素
①伪元素天生就存在，它存在于css，不存在于html。
②伪元素天生就是行级元素。
注意：凡是设置了position：absolute，float：left/right之后，元素自动变成行级块元素
23.文字溢出处理
①单行文本
overflow:hidden;
white-space:nowrap；(换行不生效)
text-overflow:ellipsis;(超出部分截断，本处作用是溢出部分添加截断符...)24.背景图片的处理
因为存在背景颜色，所以同理，存在背景图片
background-image:url(//地址)
background-size:(w,h) *宽高 /per(w,h) *百分比 /cover / contain
background-repeat:repeat(默认)/norepeat...
background-position：一个背景图片初始位置
图片的意义：①展示文字展示不了的内容
②替代文字
25.所以再有css条件下，可以使用background-url显示图片，当图片加载不出的时候，我们需要用文字替代。
<html>
<head>
<style>
a {
background-image: url("code.png");
width: 200px;
/* 第一种做法 */
/* display: inline-block;
white-space:nowrap;
overflow: hidden;
height: 200px;
text-indent: 200px; */
/* 第二种做法 */
display: block;
padding-top: 200px;
height: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<a href="#">这是图片</a>
</body>
</html>注意：为什么不直接用img的alt替代文本，是因为还需要去加载图片的操作，为了加快代码运行效率，推荐使用上图方法。
26.vertical-height：垂直偏移量
用在指定行内元素（inline）和表单元素（tabel-cell）元素的垂直对齐方式。
27.
① 行级元素内部只能放行级元素;
块级元素可以装任何元素;
但是p标签里面不能套div.
② inline和inline-block被称为文本类元素，是因为凡是带有inline的元素都具有文本特性。
③文字特征：下对齐
④行级块元素或者文本类元素包含文字，那么外面的元素和里面的元素底对齐。
1097
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
