CSS3

HTML+CSS+JS 结构+表现+交互

Cascading Style Sheet 层叠级联样式表
表现层：美化网页（字体、颜色、边距、宽高、网页定位、网页浮动……）
1.0/2.0/2.1/3.0
- 2.0：DIV（块）+CSS，提出HTML和CSS结构分离的思想，利于SEO
- 2.1：浮动和定位
- 3.0：圆角边框、阴影、动画……存在浏览器兼容性问题

style
link外部引入
优势：
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式十分丰富
- 利于SEO搜索引擎收录（VUE不利于）

链接式是属于html，导入式必须放在style标签中，是属于CSS2.1
优先级遵循就近原则

我是标题

作用：选择页面上某一种或者某一个元素
基本选择器：
- 标签选择器:选择所有标签标签{}
- 类选择器class：选中class名一致的标签 .class{}
- id选择器：全局唯一不能重复 #id{}
优先级：不遵循就近原则，id选择器 > 类选择器 > 标签选择器

hi

hi

hi

h1

h2

h3

h4

h5

后代选择器：在某个元素的后面，选择所有后代
子选择器：只选择后面一代
相邻/兄弟选择器，同辈，只有一个

通用选择器

Title

<style>p {
    color: bisque;
}

/*后代选择器    body  p{  }代表body后面的所有p标签   */
body  p{
    background: aqua;
}

/*子选择器      body&gt;p{  }代表后一代p标签 */
body&gt;p{
    background: coral;
}

/*兄弟选择器     .class+p{  }代表相邻的一个兄弟p标签，只有一个，唯一的*/
 .active+p{
     background: aquamarine;
 }

 /*通用选择器    .active~p{ }选择当前元素的向下所有的兄弟p标签*/
.active~p{
    background: blue;
}
</style>

伪类选择器
伪类：a：hover{background：0000；}
结构：定位元素、与结构相关

盒子模型
- margin外边距
- border边框
- padding内边距
边框
- 粗细
- 样式
- 颜色

盒子的计算方式（元素的大小到底多大）：margin+border+padding+内容宽度

Title

标准文档流：正常排版不会浮动飘出去
块级元素：独占一行

h1-h6
p
div
列表….
行内元素：不独占一行

span
a
img
strong
行内元素可以被包含在块级元素中，反之则不行

display

Title

<!--
block:块元素
inline:行内元素
inline-block:是块元素，但是具有行内元素的特性，可以内联在一行
-->
<style>
    div{
        width: 100px;
        height: 100px;
        border: 1px solid black;
        display: inline;
    }
    span{
        /*文字多少就占多少，与设置的宽高没关系*/
        width: 100px;
        height: 100px;
        border: 1px solid black;
        /*把行内元素变为块元素*/
        /*display: block;*/
        /*既是行内元素又是块元素*/
        display: inline-block;
    }

</style>

div块元素

span行内元素

float-left（right）,图片向左（右）浮动，悬浮、独立于原来的背景之上，会自动排版，边框会塌陷，用clear：both可以解决边框塌陷，既可以浮动，又可以有块元素效果
disply也是实现行内元素排列的方式，但更多的是使用float

ctrl+x 快速删除一行
clear属性具有四个值
- right：右侧不允许有浮动元素
- left：左侧不允许有浮动元素
- cboth：两侧不允许有浮动元素
- none：可以让其浮动
解决父级边框塌陷问题四大解决方案：
- 增加父级元素的高度
- 增加空div标签，class为clear，设置其内外边距为0
- overflow:
  - hidden
  - auto
  - scroll
- 在父类添加一个伪类after
  - father：after{ content：“ ”；display：block；clear：both； }、
    ======================================================
对比
- display方向不可控制
- float浮动起来会脱离标准边框流
Title
```
<style>
    #content{
        width: 200px;
        height: 50px;
        /*滚动条*/
        overflow: scroll;
    }
</style>
```
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈。

定位分类：
- 相对定位 position:relative (仍然在标准文档流中，原来位置被保留，不会浮动出去)
- 绝对定位

绝对定位：基于xxx定位进行上下左右的移动
- 没有父级元素定位的话，相对于浏览器定位
- 假设父级元素存在定位，通常会相对于父级元素进行偏移
- 在父级元素范围内移动
绝对定位position：absolute不保留原来位置，会浮动出去，相对于父级元素或浏览器进行偏移
固定定位

图层概念
z-index最低为0，最高无限

Title
```
<link href="css/style.css" rel="stylesheet">
```
- 学习微服务，找小狂
- 时间2099-01-01
- 地点：火星基地
#content {
width: 120px;
padding: 0;
margin: 0;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px black solid;
}

ul, li {
padding: 0;
margin: 0;
list-style: none;
}

/父级元素相对定位/
#content ul {
position: relative;
}

.tipText, .tipBg {
position: absolute;
width: 120px;
height: 25px;
top:25px;
}
.tipText{
color: azure;
/z-index: 0;/
}
.tipBg{
background: azure;
/背景透明度/
opacity: 0.5;
/同样效果filter: alpha(opacity=50);/
}