css-总结
1、 css基本语法
css页面引入方法：
1、外联式：通过link标签，连接到外部样式表到页面中
<link rel="stylesheet" type="text/css" href="CSS/main.css">
2、嵌入式：通过style 标签，在网页上创建嵌入式的样式表
<style type="text/css">
h1{
font-size:20px;
color: blue;
}
</style>
3、内联式：通过标签的style 属性，在标签上直接写样式
<a href="https://www.baidu.com/" style="font-size:24px; color:yellow;">百度</a>
总结：
CSS语法是由 特征和值 成对出现
每组特征值之间用英文; 隔开
除了在元素标签的style 属性设置外，另外两种写法必须写在{ }内
优先级：（优先级 id> class > 标签）同等级别下，就近原则
通过元素标签名获取， （1父级>子级：只有子级，2父级 子级：后代都会生效 3向后渲染.test3 ~.div：test3后面所有div标签）
通过元素id属性获取 （style 需要添加#，id不能重复）
通过元素class属性获取 （class 需要添加. class 可以重复）
2、 css文本设置
color：设置文字的颜色：如：color:red;
font-size:设置文字的大小：如font-size:12px;
font-family:设置文字的字体：如font-family:'微软雅黑';
font-style:设置字体是否倾斜：
如font-style:'normal';设置不倾斜
如font-style:'italic';设置倾斜
font-weight:设置文字是否加粗
如font-weight:bold; 设置加粗
如font-weight:normal; 设置不加粗
line-height 设置文字的间距；如line-height:24px;
font:可以同时设置文字的几个属性，要按照一定的顺序，
font: 是否加粗 字号/行高 字体
如：font:normal 12px/36px '微软雅黑'
text-decoration 设置文字的下划线
如：text-decoration:none; 将下划线去掉
如：text-decoration:underline; 设置下划线
text-indent:设置文字首行缩进
如：text-indent:40px; 首行缩进40px（20一个汉字）
text-align:设置文字水平对齐方式，
如：text-align:center 设置文字水平居中
background:背景色 背景图片 图片坐标 背景尺寸（h5） 图片重复方式
background - color: #fff/#ffffff/rgb(255, 255, 255)/white;
background - image: url('图片地址');
background - repeat: repeat / no - repeat / repeat - x / repeat - y; 重复 不重复 横向重复 纵向重复
background - position: 100 % 100 % / 100px 100px / top center; 第二个参数没哟输入 默认中间
background - size:length(长度) 100px 50px / prcentage(百分比) 50 % 50 %/ cover(覆盖背景，保持横纵比) / contain(是图片不超出标签范围的情况下变成最大，且保持横纵比); 图片拉伸
3、 css颜色表示法：
1、颜色表示：例如 red 红色 gold 金色
2、rgb表示：例如 rgb(255, 0, 0) 表示红色
3、16进制数值表示：例如#ff0000表示红色
4、 选择器
4.1、标签选择器
影响范围大，尽量应用在层级选择器上面
div{
color: green;
font-size: 40px;
}
在所有的div 标签中都会起作用
4.2、id选择器
通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能
对应于页面上一个元素，不能复用，id一般给程序使用，所以不推荐
#id1{
font-size: 40px;
}
<p id='id1'>1234</p>
4.3、类选择器
通过类选择器来选择元素，一个类可应用多个元素，一个元素上可以使用
多个类，应用灵活，可复用
.box1{
color: red;
}
.box2{
color: blue;
}
<h1 class="box1">标题1</h1>
<h2 class="box2">标题二</h2>
4.4、层级选择器
主要应用在选择父类下的子元素，或者子元素下面的子元素
可以与标签结合使用，减少命名，同时也可以通过层架，
防止命名冲突
<style type="text/css">
.box{
color: #ff00ff
}
.box span{
font-size: 40px;
}
</style>
4.5、组选择器
多个选择器，如果有同样的样式设置，可以使用组选择器
<style type="text/css">
.box1,.box2,.box3{
font-size: 40px;
}
.box1{
color: #ff0000
}
.box2{
color: #00ff00
}
.box3{
color: #0000ff
}
</style>
4.6、伪类及伪元素选择器
常用的伪类选择器有hover,表示鼠标悬浮在元素上时的状态，
伪元素还有before 和after,他们可以通过样式在元素中插入内容
.link{
font-size: 40px;
color: green;
text-decoration: none;
}
.link:hover{
color: red;
font-style: italic;
}
.box1:before{
content: '前面文字';
color: red;
}
.box2:after{
content: '后面文字';
color: green;
}
5、 盒子模型
盒子模型解释：
元素在页面中显示成一个方块，类似一个盒子，css盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式，盒子模型示意图如下：
标签元素排序规则是 从左往右，从上往下 排序
margin border padding content(内容)
竖着排序 外边距重合
margin、padding：顺时针设置，上右下左
设置一个边距代表上下左右，
设置两个分别代表上下和左右
设置四个分别代表上右下左
6、 盒子模型使用技巧及相关问题
margin 相关技巧
1、设置元素水平居中：margin: x auto;
2、margin 负值让元素位移及边框合并
外边距合并
外边距合并指的是 当两个垂直外边距相遇时，他们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度重的较大者。
解决方法：
1、使用这种特性
2、设置一边的外边距，一般设置margin-top
3、将元素浮动或者定位
margin-top 塌陷
在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，
导致内部的盒子margin-top设置失败，解决方法如下：
1、外盒子设置一个边框
2、外部盒子设置overflow:hidden
3、使用伪元素类：
.clearfix:before{
content:'';
display:table;
}
<!DOCTYPE html>
<html>
<head>
<title>margin-top塌陷</title>
<style type="text/css">
.clearfix:before{
content: '';
display: table;
}
.box1{
width: 300px;
height: 300px;
/* border: 1px solid #000; 方法一*/
/* overflow: hidden; 方法二*/
}
.box2{
width: 200px;
height: 100px;
background-color: green;
margin-top: 100px;
margin-left: 50px;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>
定位
position:absolute/fixed/relative/staic/sticky
position需要与top/bottom/left/right
absolute相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于 <html>:
fixed相对于浏览器窗口是固定位置
relative相对其正常位置
staic:静态的
sticky：脱离窗口是进行固定，变成绝对定位
盒子层次：z-index属性，数值越高，越在顶层
7、 css元素溢出
当子元素的尺寸超过父元素的尺寸是，需要设置父元素显示溢出的子元素的方式，
设置的方式通过overflow 属性设置
overflow 的设置项：
1、visible 默认值，内容不会被修建，会呈现在元素框之外
2、hidden 内容会被剪掉，并且其余内容是不可见的，此属性还有清除浮动，清除margin-top塌陷的功能
3、scroll 内容会被修剪，但浏览器会显示滚动条以便查看其余内容
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余内容
5、inherit 规定应该从父元素继承overflow 属性的值
8、伪类选择器
:hover 鼠标经过时设置其样式
:active 鼠标按下时设置其样式
:visited 选择已访问的链接，并设置其样式，只针对a标签
< ul class="ul-test">
<li>哈哈</li>
<li>嘻嘻</li>
</ul>
<style>
.ul-test li:hover{
background-color: red;
color: #fff;
}
</style>
