前段---css
css主要是用来做如何显示html元素的
当浏览器读到一个样式表，它就会按照这个样式表来对文档做渲染
注意：每一个css样式表都是由两个部分组成的，
1，选择器
2，声明
声明又包括属性值和属性，每个声明之后用分号结束
一，css引入方式
1，行内样式
<p style="color:red" >ergou </p>
2,内部样式
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="">
<style>
p{
color: aqua;
}
</style>
</head>
<body>
<p >二狗</p>
3，外部样式
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="ss.css">
</head>
二，css选择器
，基本选择器
在css格式文本里：
1元素选择器
p{
color：red；
}
2，id选择器
#l{ color: green; }
3，类选择器
.ll{
color: gold;
}
p.l1{ font-size: 33px; } 先看p的条件再看l1的，li的没有就遵循p的
4，通用选择器
*{
color: bisque;
}
不用绑定，，默认全局通用
组合选择器
1，后代选择器
id版本后代选择器
#d1 p{ color: red; }
单纯的后代选择器
div p{
color: red;
}
后代一定要被包起来，如果是根据id来的话就在div后面加一个id
2，儿子选择器
#v>p{ color: gold; }
只有用id使用才能看出来与后代的区别
3，毗邻选择器
div+p{
color: gold;
}
div的上下都可以被影响
4，弟弟选择器
div~p{
color: blue;
}
在div后面的，，同一级的
5，属性选择器
[ff]{ color: blue; } [ff=“55”]{ color: blue; }
/*找到所有title属性以hello开头的元素*/ [title^="hello"] { color: red; } /*找到所有title属性以hello结尾的元素*/ [title$="hello"] { color: yellow; } /*找到所有title属性中包含（字符串包含）hello的元素*/ [title*="hello"] { color: red; } /*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/ [title~="hello"] { color: green; }
三，分组和嵌套
1，分组
用逗号隔开
div,#p1{ color: blue; }
2，嵌套
就是多个css嵌套使用
四，选择器的优先级
1，css继承
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。
body {
color: red;
}
此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。
我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。
p {
color: green;
}
此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。
2，选择器的优先级
除此之外还可以通过添加 !import方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!import会使样式文件混乱不易维护。
万不得已可以使用!import
五，伪类选择器
关于伪类选择器，我们来拿链接举例
/*未访问的链接*/ a:link{ color: red; } /*已访问的链接*/ a:visited{ color: gold; } /*当鼠标放在上面的时候*/ a:hover{ color: green; } /*选定的链接,就是点击下去的瞬间*/ a:active{ color: aqua; }
input框获取焦点时
input:focus{
outline-color: green;#设置文本框的外边框的颜色
background-color: red;# 就是设置输入框的背景颜色
}
伪元素选择器
常用的：
first-letter
给字段的首字母设置格式和颜色
p:first-letter{ font-size: 144px; color: red; }
before
在 每个p字段前添加字符
p:before{ content: "**"; color: blue; }
after在之后添加内容
p:after{ content: "**"; color: blue; }
六，css属性
1，字体属性
body{ font-family: "Microsoft Yahei","微软雅黑","Arial",sans-serif; }
字体大小：
font-size设置字体的大小
p{ font-size: 44px; }
font-style后加
| italic | 字体倾斜 |
| normal | 默认值，正常粗细 |
| font-weight：lighter； | 更细 |
| font-weight：bold； | 粗体 |
| font-weight：bolder； | 更粗 |
font-weight: 900; |
设置具体粗细，400等同于normal，而700等同于bold |
font-weight:inherit; |
继承父元素字体的粗细值 |
十六进制设置字体颜色
color: #ff0000;
rgb值设置
color:rgb(34,45,675);
rgba
a: 透明度
color:rgba(34,45,675,0);
文字属性
1，对齐
左对齐
text-align: left;
右对齐
text-align: right;
居中
text-align: center;
两端对齐
text-align: justify;
2，文字装饰
text-decoration属性用来给文字添加特殊效果
none默认，定义标准的文本
text-decoration: none;
underline下划线
text-decoration: underline;
overline定义文本上的一条线
text-decoration: overline;
line-trough穿过文本的线
text-decoration: line-through;
继承父元素的text-decoration属性的值
text-decoration: inherit;
常用的为去掉a标签默认的自划线：
a{ text-decoration: none; }
首行缩进
text-indent：32px；
text-indent: 32px;
背景属性
设置div的背景颜色
.c{ background-color: aqua; }
设置背景图片
<style> .c{ width: 600px; 设置div的大小 height: 600px;
border: 1px solid black;添加边框，为实线 颜色为黑色
background-color: aqua; 设置背景颜色
background-image: url("2.png"); 设置背景图片
background-repeat: repeat; 默认repeat允许铺满
background-repeat: repeat-x; 只能横着铺
background-repeat: repeat-y; 只能纵着铺
background-repeat: no-repeat; 不允许铺满，也就是只有一个
background-position: center;居中
background-position: 50% 70%; 调位置
} </style>
定住背景图片，
background-attachment: fixed;
边框属性
border-width设置边框的粗细 border-color设置颜色 border-style设置边框是实线还是虚线等
简写方式：
border：2px solid red；
边框的样式：
none：无
dotted：点状虚线边框
dashed：矩形虚线边框
solid：实线
除了可给边框统一设置，还可以指定给哪一边设置：
border-top-style:solid;
top上
left左
right右
bottom下
display属性
用于控制html元素的显示效果
display:"none"：HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display：" block"块级标签
display： inline " 内行标签"
display：“ inline-block”使元素同时具有行内元素和块级元素的特点。
display：none与visibilit:hidden区别
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
去掉列表前的黑点
ul{ list-style-type: none; }
li > a { border-right: 1px solid red; padding: 0 15px; 文本距离，前面的是上下 }
css盒子模型
margin：用于控制元素与元素之间的距离，margin的最基本用途就是控制元素周围空间
的间距，从视觉角度上达到相互隔开的目的
padding：用于控制内容与边框之间的距离
border：边框
content内容：盒子的内容，显示文本和图像
<style> .c{ margin-top: 2px; margin-right: 3px; margin-bottom: 4px; margin-left: 5px; } </style>
但是一般推荐使用简写
.cc{
margin: 5px 5px 5px 5px;
}
顺序是按照上右下左
常见居中
.cc{
margin: 0 auto;
}
0代表上下，auto代表左右居中
padding内填充
.c{ padding-top: 2px; padding-right: 3px; padding-bottom: 4px; padding-left: 5px; }
推荐使用
.cc{
padding: 5px 5px 5px 5px;
}
顺序：上右下左
补充padding的常用简写方式：
- 提供一个，用于四边；
- 提供两个，第一个用于上－下，第二个用于左－右；
- 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
- 提供四个参数值，将按上－右－下－左的顺序作用于四边；
float
在css中任何元素都可以浮动
浮动元素会生成一个块级框，而不论它本身是何种元素
关于浮动的特点
1，浮动的框可以向左或者向右移动，直到它的边缘碰到包含框或者另一个浮动框的边框
2，由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现的就像浮动框不存在一样
取值对的三种方式：
left：
right：
none：
clear清楚不允许浮动
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
clear属性只会对自身起作用，而不会影响其他元素
父标签塌陷问题：
.clearfix:after { content: ""; display: block; clear: both; }
overflow溢出属性
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
- overflow（水平和垂直均设置）
- overflow-x（设置水平方向）
- overflow-y（设置垂直方向）
定位（position）
1，static：默认值
无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
relative（相对定位）
相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
absolute（绝对定位）
定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。
另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
fixed（固定）
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
注意：
脱离文档流的3种方式
float
absolute
fixed
z-index
#i { z-index: 999; } 设置对象的层叠顺序，数值大的会覆盖在数值小的标签之上。z-index 仅能在定位元素上奏效。
opacity
用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。
