HTML部分链接：hmtl链接

css

语法

属性选择器：

1.[title]{}：包含title属性的元素
2.a[href]{}：包含href属性的<a>标签
3.a[href][title]{}：包含href和title属性的<a>
4.input[type="text"]{}：type属性值为text的input标签
5.[title~=hello]{}：title属性包含hello值的元素

first-child伪类：

选择第一个元素
p:first-child {font-weight: bold;}将出现的第一个p元素字体加粗

背景：

background-attachment：防止滚动，fixed：固定，scroll：滚动

如何使背景图片撑满屏幕：博客链接

用户可调窗口：

resize:both;

动画

2D转换

我们使用transform进行转换。
translate：移动

transform:translate(x,y);从当前位置向右侧移动x，向下方移动y

.div1{background-color: red;width: 100px;height: 100px;}
.div1:hover{transform: translate(20px,20px);}

rotate：旋转

transform:rotate(xdeg);顺时针旋转x度，负值为逆时针

.div1:hover{transform: rotate(30deg);}

scale：缩放

transform:scale(x,y);宽度为原始尺寸的x倍，高度为原始尺寸的y倍

.div1:hover{transform: scale(1,2);//宽度不变，高度变为2倍}

skew：倾斜

transform:skew(x deg,y deg);x轴倾斜x度，y轴倾斜y度

这些方法都有相应的只在x轴,y轴上面的转换，比如translateX和translateY。

3D转换

3D转换和2D转换所用方法类似，只是translate(x,y)在3D上变为了translate3d(x,y,z),其他属性一样。

过渡

过渡使用的方法是transition，是一种样式到另一种样式的改变。

transition：css属性名称，过渡时间，时间曲线，延迟;

.div1{background-color: red;width: 100px;height: 100px;margin-top: 100px;margin-left: 100px;text-align: center;transition: width 2s linear,height 2s ease 0.5s,background-color 2s linear,transform 2s;}
.div1:hover{width: 200px;height: 200px;background-color: #7cc1d2;transform: rotate(180deg);}

当 transition加在 div1上时，会为 div的所有状态加上 transition，包括鼠标移上去和移开，都有过渡效果。如果 transition加在 div1：hover上，那么只有当鼠标移上去时有过渡效果，鼠标移开立马消失。

动画

动画使用的属性是animation
animation:动画名称，完成时间，速度曲线，延迟，播放次数，是否轮番播放
播放次数：infinite无限次/n;
是否轮番:alternate轮流播放；

@keyframes:动画名称

.div2{width: 50px;height: 50px;border-radius: 0px;background-color: black;margin-top: 20px;animation: move 1s linear 0.3s infinite alternate;}/* 定义一个动画move *//* 当动画完成0%，25%，50%，100%时，改变样式 */
@keyframes move{0%{background-color: black;}25%{background-color: red;border-radius: 20px;transform: translateY(20px);}50%{border-radius: 50px;background-color: blue;transform: translateY(40px);}100%{border-radius: 90px;background-color: yellow;transform: translateY(80px);}}

布局

margin和padding

添加背景后，应用于元素、内边距、边框所形成的区域。
width和height只影响元素的大小。

当我们写网页的时候，很容易遇到放了个div，div默认在浏览器左上角，但div离页面上方和左方会有空白。其实是body距离页面有空白，是因为body有默认的margin和padding 的原因。我们可以用以下代码消除这个空白：

*{margin:0;padding:0;
}

margin后面可跟四个参数，当只有一个参数时，上下左右的值均为0.


想要div在整个网页水平居中怎么办？
可以使用以下代码：

*{margin: 0 auto;padding: 0;}

margin后面两个参数，第一个是上下，第二个是左右，上述代码上下为0，左右为居中。
想要div在整个页面水平垂直居中？
只要给div加个margin-top，值为（父元素高度-div宽度）/2 。

---

position定位(absolute,relative,fixed)

absolute

设置绝对定位，元素将不再占用原来元素的空间，是相对于其最接近的一个具有定位属性的父级元素进行定位。


相对于整个网页：

.div1{background-color: red;width: 100px;height: 100px;text-align: center;position: absolute;}

没有绝对定位时

审查元素发现，div1在页面中占据了空间，body和html的大小都为宽度为屏幕宽度，高度为100px。

加了绝对定位：

发现div1不再占据原来的空间，body和html的大小宽度仍为屏幕宽度，但高度为0 。

---

相对于父级元素(两个父子关系div)：

<div class="div1"><div class="div2"></div>
</div>

div1是div2的父亲。

.div1{background-color: red;width: 100px;height: 100px;text-align: center;position: absolute;
}
.div2{width: 50px;height: 50px;background-color: blue;text-align: center;position: absolute;
}

当div1加了绝对定位时，div2添加绝对定位，div1向上找父级元素，为body，所以div1的定位是相对于整个网页来改变。而div2的绝对定位，向上找父级元素，为div1，所以div2的定位是相对于div1来改变。

只定位，没有偏移：

div1向下10px，div2向右5px:

当div1没有加绝对定位，div2绝对定位时：

可以发现，div1没有改变，div2按理应该是相对body向右5px，但貌似还是相对于div1向右5px，这是为什么？
原来因为div1位于body的左上角，所以现在看起来div2相对于body和相对于body是没有什么差别的。那么我们给div1加一个margin：10px，让他距离body上下左右的内边距为10px 。发现我们的理解是没错的，div2向上找有绝对定位的父级元素，为body，所以虽然div2在div1中，但却是相对于body的偏移。

两个兄弟关系的div：

<div class="div1">
</div>
<div class="div2">
</div>

.div1{background-color: red;width: 50px;height: 50px;text-align: center;
}
.div2{width: 50px;height: 50px;background-color: blue;text-align: center;
}

默认是从上到下依次排开：所以div1和div2是上下挨着的

当给div1加了绝对定位，div2没有：
div1不再占据页面空间，但div2还在占据，所以div2就到了div1的位置，但div1在div2上面。

当给div2加了绝对定位，div1没有：
div1占据空间，并且位于div2前方，div2就算不占据空间，也是相对于后面来讲，无法到了div1的位置。

当div1和div2都加了绝对定位：
发现div2不仅到了div1的位置，两个div都不再占据空间，并且div2在div1上方。

为什么两个加了绝对定位时，div2位于div1的上方了？
猜想：div1先不占据空间，div2位于div1的位置，显示div1的颜色。当div2也不占据空间时，就会覆盖div2，所以显示div2的颜色。

我们把div1和div2在HTML中书写的顺序反过来，发现div1的颜色显现出来，证明了我的猜想。

结论：可以把不占据空间想象成两层，即占据空间的在第一层，不占据空间就相当于浮起来了，在第二层，所以不占据地上的空间了。所以当兄弟div，div1绝对定位后，浮在空中，地上的空间空出来，div2自然可以占据div1的位置；div1和div2都绝对定位，div1在前，div1先浮起来，地上空间空余出来，div2占据，div2再浮起来，只能浮到div1上面。

验证：使用三个div，我们给第二个div，div2加上绝对定位，按之前的理解，div1占据地上的位置，div2浮到空中，div3会占据div2的位置，div2和div3应该在相同的位置，并且div2在上面。

relative

文章有点长了，剩下这些分别写文吧。

fixed

float浮动

响应式设计