CSS详解

CSS 详解

1.css介绍

1.1 什么是CSS？

CSS是指层叠样式表 cascading style sheets
通过CSS可以让我们定义HTML元素如何显示。
CSS可以让我们原本HTML不能描述的效果，通过CSS描述出来。
通过CSS描述我们的html页面，可以让我们的页面更加漂亮，可以提高工作效率。

2.CSS与HTML结合方式

2.1 第一种方式内联/行内样式

就是在我们的HTML标签上通过style属性来引用CSS代码。

优点:简单方便；

缺点:只能对一个标签进行修饰。

2.2 第二种方式内部样式表

我们通过　　

hello

border-style取值：

3.2.5 轮廓属性

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

轮廓和边框的区别：

边框 (border) 可以是围绕元素内容和内边距的一条或多条线；
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

3.2.6 盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

margin(外边距) - 盒子与盒子之间的距离
border(边框) - 盒子的保护壳
padding(内边距/填充) - 内填充，盒子边与内容之间的距离
content(内容) - 盒子的内容，显示的文本或图像

3.3 CSS定位

3.3.1 默认定位

块级元素：h1~h6，p, div 等，自上而下，垂直排列（自动换行）；可以改变宽高
行内元素：a,b,span,等，从左向右，水平排列（不会换行）；不能改变宽高
行内块元素：input,img等，从左向右，水平排列（自动换行）；可以改变宽高

3.3.2 浮动定位

让元素“飞”起来。不仅可以靠着左边或右边。还可以消除“块级”的霸道特性（独自占一行）。
float取值：
- none ：不浮动
- left：贴着左边浮动
- right：贴着右边浮动

3.3.3 相对定位

和原来的位置进行比较，进行移动定位（偏移）

3.3.4 绝对定位

本元素与已定位的祖先元素的距离

如果父级元素定位了，就以父级为参照物；
如果父级没定位，找爷爷级，爷爷定位了，以爷爷为参照物。
如果爷爷没定位，继续向上找，都没定位的话，body是最终选择。

以父节点作为参照物

以爷爷节点作为参照物

3.3.5 固定定位

将元素的内容固定在页面的某个位置，当用户向下滚动页面时元素框并不随着移动

3.3.6 z-index

如果有重叠元素，使用z轴属性，定义上下层次。

注意：

z轴属性，要配合相对或绝对定位来使用。
z值没有额定数值（整型就可以，具体用数字几，悉听尊便）

4. CSS3

4.1 圆角

border-radius：左上右上右下左下;

border-radius：四个角;

border-radius：50%; 圆形

4.2 盒子阴影

box-shadow：1 2 3 4 5;
1：水平偏移
2：垂直偏移
3：模糊半径
4：扩张半径
5：颜色

4.3 渐变

4.3.1 线性渐变

background:linear-gradient([方向/角度]，颜色列表)；

4.3.2 径向渐变

以圆心向外发散

background: radial-gradient(颜色列表);

4.4 背景

4.4.1 背景位置

background-origin：指定了背景图像的位置区域

border-box : 背景贴边框的边
padding-box : 背景贴内边框的边
content-box : 背景贴内容的边

4.4.2 背景裁切

background-clip:

border-box 边框开切
padding-box 内边距开切
content-box 内容开切

4.4.3 背景大小

background-size:

cover 缩放成完全覆盖背景区域最小大小
contain 缩放成完全适应背景区域最大大小

4.5 过渡动画

4.5.1 过渡

从一个状态到另一个状态，中间的“缓慢”过程；

缺点是，控制不了中间某个时间点。

transition｛1 2 3 4｝

1：过渡或动画模拟的css属性
2：完成过渡所使用的时间（2s内完成）
3：过渡函数。。。
4：过渡开始出现的延迟时间
```
transition: width 2s ease 1s;
```

目前，css3只开发出部分的过渡属性，下图所示：



　　Hello,拉勾

4.5.2 动画

从一个状态到另一个状态，过程中每个时间点都可以控制。

关键帧：@keyframes 动画帧 { from{} to{} } 或者{ 0%{} 20%{}... }
动画属性：animation{ 1 , 2 , 3 , 4 , 5 }
- 1：动画帧
- 2：执行时间
- 3：过渡函数
- 4：动画执行的延迟（可省略）
- 5：动画执行的次数

需求1：一个元素从左向右移动，3秒内执行2次

需求2：一个元素从左向右移动，3秒内执行完成。无限次交替执行

infinite：无限次
alternate：来回执行（交替，一去一回）

CSS