CSS发展史
- css1.0
- css 2.0
（1）div+css布局
（2）html与css结构分离思想
（3）网页变得简单
（4）利于SEO - css2.1
（1）浮动 float
（2）定位 position - css3
（1）圆角 (border-radius)
（2）阴影 (text-shadow、box-shadow)
（3）动画 animation
（4）浏览器兼容性
CSS入门
基本语法
原则：就近原则
使用方式：
（1）行内样式
（2）内部样式
（3）外部样式引入
① style 页面先渲染骨架，再添加样式
@import url(../css/style.css)
② link 常用
css选择器
基础选择器
- 标签选择器 span
- id选择器 #id
- css选择器 .class
高级选择器
层次选择器
- 后代选择器--->所有的后代--->
空格 - 子代选择器--->只有一代，只是儿子辈（父子关系）--->
> - 相邻兄弟选择器--->同级，向下一个--->
+ - 通用选择器--->同级向下多个--->
~
结构伪类选择器
- p:nth-child(1)--->顺序 p元素的父级的子集的第一个元素，如果是p则有样式，否则没有样式
- p:nth-of-type(1)--->类型 p元素的父级的子集中的p元素的第一个样式
- ul li:first-child--->第一个li样式
- ul li:last-child--->最后一个li样式
属性选择器
- 属性名(包含属性名即可，不要用引号)
a[name] {color: red;} - 属性名 绝对等于
a[name='username'] {color: red;}
与简单属性选择器类似，可以把多个属性-值选择器链接在一起来选择一个文档。
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;} - 属性名正则匹配
- 属性名 以什么开头--->a[class^="123"] {color: red;}
- 属性名 以什么结尾--->a[class$="123"] {color: red;}
- 属性名 包含什么--->a[class*="123"] {color: red;}
美化页面
字体
font-family
font-size
color(rgb rgba)
font-weight
text-shadow 文字阴影
排版网页
text-align='center' 文字居中,水平对齐
vertical-align='middle' 文字垂直居中
text-indent='2em' 首行缩进
line-height 行高，上下居中
text-decoration 文本描述，上、中、下、无下滑线(overline line-through underline none)
超链接伪类
:link 未访问链接
:hover 鼠标悬停链接
:active 正在访问链接
:visited 已访问链接
列表样式
list-style
none 去掉样式
disc 实心圆（默认）
circle 空心圆
decimal 数字
square 实心方块
背景样式
背景颜色
渐变背景 https://www.grabient.com/
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
background-image: linear-gradient(103deg, #0093E9 0%, #80D0C7 100%);
图片 + 渐变色的实现
background: url(../../images/20210818/individual/individual_bgImage.png) no-repeat,linear-gradient(303deg, #186EE8 0%, #1B6FE8 9%, #2274E9 19%, #2B79EA 28%, #3481EB 38%, #3D89EC 48%, #4591ED 57%, #4D99EF 66%, #54A0F0 74%, #5AA7F1 81%, #60AEF2 88%, #64B3F4 93%, #67B7F4 97%, #69B9F5 99%, #6ABAF5 100%)
背景图片
background
background-image 背景图片
background-repeat 背景平铺样式
background-color 背景颜色
background-position 背景定位
background-size 背景大小
不常用的属性
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
background-blend-mode 属性定义了背景层的混合模式（图片与颜色）。
background-clip 规定背景的绘制区域：
background-origin 规定 background-position 属性相对于什么位置来定位。
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
| 属性值 | 描述 |
|---|---|
| scroll | 背景图片随着页面的滚动而滚动，这是默认的。 |
| fixed | 背景图片不会随着页面的滚动而滚动。 |
| local | 背景图片会随着元素内容的滚动而滚动。 |
| initial | 设置该属性的默认值。 阅读关于 initial 内容 |
| inherit | 指定 background-attachment 的设置应该从父元素继承。 |
background-origin 规定 background-position 属性相对于什么位置来定位。
| 值 | 描述 |
|---|---|
| padding-box | 背景图像相对于内边距框来定位。 |
| border-box | 背景图像相对于边框盒来定位。 |
| content-box | 背景图像相对于内容框来定位。 |
盒子模型
外边距
margin
边框
border
内边距
padding
内容
content
盒子模型计算
margin+border+padding+内容的宽高
圆角边框
order-radius
顺序： 左上，右上，右下，左下
画圆是order-radius=半径
画扇形，除了order-radius，还需要在意宽和高
border-radius: 1-4 length|% / 1-4 length|%;
| 值 | 描述 |
|---|---|
| length | 定义弯道的形状。 |
| % | 使用%定义角落的形状。 |
盒子阴影
box-shadow
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 说明 |
|---|---|
| h-shadow | 必需的。水平阴影的位置。允许负值 |
| v-shadow | 必需的。垂直阴影的位置。允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的大小 |
| color | 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 |
| inset | 可选。从外层的阴影（开始时）改变阴影内侧阴影 |
盒子模型兼容性问题
W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)
标准盒模型
根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的；即在标准模式下的盒模型，盒子实际内容（content）的width/height=我们设置的width/height;
盒子总宽度/高度=width/height+padding+border+margin。
IE盒子模型
在该模式下，浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和；
即在怪异模式下的盒模型，盒子的（content）宽度+内边距padding+边框border宽度=我们设置的width(height也是如此)，
盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin。
两种模式下如何解决样式的兼容性问题
建议不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
CSS3指定盒子模型种类
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
box-sizing: content-box;//宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
box-sizing: border-box;// 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
box-sizing: inherit;// 规定应从父元素继承 box-sizing 属性的值。
即box-sizing属性可以指定盒子模型种类，
content-box指定盒子模型为W3C（标准盒模型），
border-box为IE盒子模型（怪异盒模型）。
参考资料： https://www.imooc.com/article/68238/
浮动
display属性
inline
block
inline-block
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。（CSS2.1 新增的值） |
| inherit | 规定应该从父元素继承 display 属性的值。 |
浮动 float
| 值 | 描述 |
|---|---|
| left | 元素向左浮动。 |
| right | 元素向右浮动。 |
| none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 |
| inherit | 规定应该从父元素继承 float 属性的值。 |
清除浮动 clear
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
解决父级边框塌陷问题（4种方法）
方法一
直接给父级定义高度
方法二
在最后添加空div标签，添加属性clear：both;
方法三
父级元素增加overflow属性 overflow:hidden;
方法四
给父级元素增加伪类选择器
:after{ content:""; display:block; clear:both;}
定位
默认定位 static
相对定位 relative
相对于原来的位置进行偏移，还是在标准文档流中，原来的位置会被保留
绝对定位 absolute
没有父级元素的情况下，相对于浏览器进行定位
如果父级元素存在定位，就相对父级元素进行定位
并且在父级元素内部进行偏移
不在文档流中，原来的位置不会被保留
固定定位 fixed
定位操作
top
right
bottom
left
z-index属性
z-index 属性指定一个元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
opactiy属性
透明度（0~1）
opacity:0.5;
filter:Alpha(opacity=50)