By

同一页面内跳转到指定元素

方法1：给a标签设置锚点

HTML

1
2
3
<a href="#abc">a标签</a>
<div style="height: 1000px"></div>
<p id="abc">p标签</p>

点击a标签的时候，页面会跳转到p标签所在的位置。

a标签的href属性只给#时，会跳转到页面最顶部，可实现“回到顶部”的功能。

1
<a href="#">a标签</a>

方法2：设置 location.hash 属性

HTML

1
2
3
<button>跳转</button>
<div style="height: 1000px"></div>
<p id="abc">p标签</p>

javaScript

1
2
3
4
var btn = document.querySelector("button");
btn.onclick = function(){
    location.hash = "#abc";
};

通过设置 window 的属性 location.hash 锚点值为指定元素的id，即可实现跳转到指定元素。

不同页面的跳转

方法1：设置a标签的href属性

HTML

1
<a href="B.html">跳转</a>

设置a标签的href属性值为要跳转的页面的路径，即可实现从A页面跳转到B页面。

方法2：设置 location.href 属性

HTML

1
<button>跳转</button>

javaScript

1
2
3
4
var btn = document.querySelector("button");
btn.onclick = function(){
    location.href = "B.html";
};

通过设置 window 的属性 location.href 值为要跳转的页面路径，即可实现实现从A页面跳转到B页面。

By

1.先平移后旋转

1
transform: translate(100px) rotate(45deg);

原图:
transform

最后效果:
transform

实现过程: 先在X轴的正方向上平移100px，再顺时针旋转45度。

2.先旋转后平移

1
transform: rotate(45deg) translate(100px);

原图:
transform

最后效果:
transform

实现过程: 先顺时针旋转45度，此时坐标系已跟着元素一起旋转了45度，再向已经改变的X轴正方向上平移100px。

By

取值1 :

1
transform-origin: center; // 或 center center,或 50%,或 50% 50%

原点在元素的正中心!

origin

取值2 :

1
transform-origin: top; // 或 top center,或 50% 0

原点在元素顶部的中间！

origin

取值3 :

1
transform-origin: right; // 或 right center,或 center right,或 100%,或 100% 50%

原点在元素右边的中间！

origin

取值4 :

1
transform-origin: bottom; // 或 bottom center,或 center bottom,或 50% 100%

原点在元素底部的中间！

origin

取值5 :

1
transform-origin: left; // 或 left center,或 center left,或 0, 或 0 50%

原点在元素左边的中间！

origin

取值6 :

1
transform-origin: left top; // 或 left top,或 0 0

原点在元素左上角！

origin

取值7 :

1
transform-origin: right top; // 或 top right,或 100% 0

原点在元素右上角！

origin

取值8 :

1
transform-origin: right bottom; // 或 bottom right,或 100% 100%

原点在元素右下角！

origin

取值9 :

1
transform-origin: left bottom;// 或 bottom left,或 0 100%

原点在元素左下角！

origin

CSS变换中的旋转rotate()、缩放scale()、和倾斜skew()，都可以通过transform:origin属性来改变元素对象的原点位置；

translate()始终根据元素对象中心点进行位移。

By

问题一: transition设置在hover中，移入时有过渡动画；但是移出后，立即回到原来的样式，没有过渡动画效果。

css代码:

1
2
3
4
5
6
7
8
9
10
.box{
    width: 100px;
    height: 100px;
    margin: 100px auto;
    background-color: red;
}
.box:hover{
    border-radius: 50%;
    transition: all 1s;
}

html代码:

1
<div class="box"></div>

问题二: transition设置在元素中，移入时有过渡动画；移出后，也有过渡动画回到原来的样式。

css代码:

1
2
3
4
5
6
7
8
9
10
.box{
    width: 100px;
    height: 100px;
    margin: 100px auto;
    background-color: red;
    transition: all 1s;
}
.box:hover{
    border-radius: 50%;
}

写的不好的地方,望大家多多指正,小弟感激不尽!

By

方式一: margin

基本思路:
1.子元素设置margin上下的值为：(父元素的高度 - 子元素的高度) / 2；
2.设置margin左右的值为：auto（浏览器自动计算外边距）。

css代码:

1
2
3
4
5
6
7
8
9
10
11
.parent{
    width: 400px;
    height: 400px;
    border: 1px solid #000;
}
.child{
    width: 100px;
    height: 100px;
    margin: 150px auto;
    background-color: red;
}

HTML代码:

1
2
3
4
<!-- 以下样式全为此结构 -->
<div class="parent">
    <div class="child"></div>
</div>

方式二: 定位 + margin

基本思路:
1.父元素设置相对定位；
2.子元素设置绝对定位（子绝父相）；
3.子元素设置top值为50%（取父元素的高度），left值为50%（取父元素的宽度）；
4.子元素设置margin:left值为负的自身宽度的一半，margin:top值为负的自身高度的一半；

css代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.parent{
    position: relative;
    width: 400px;
    height: 400px;
    border: 1px solid #000;
}
.child{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
    background-color: red;
}

方式三: 定位 + 变换

基本思路:
1.父元素设置相对定位；
2.子元素设置绝对定位；
3.子元素设置left:50%，top:50%；
4.子元素设置变换属性transform，平移translat在X轴方向和Y轴方向各移-50%（取自身宽高的50%）；

css代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.parent{
    position: relative;
    width: 400px;
    height: 400px;
    border: 1px solid #000;
}
.child{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    background-color: red;
    /* 这里的50%，取的是自身的宽高 */
    transform: translate(-50%,-50%);
}

方式四: 弹性布局

基本思路:
1.父元素开启弹性布局；
2.父元素设置子元素在主轴（默认为X轴）方向上的对其方式为居中；
3.父元素设置子元素在副轴（默认为Y轴）方向上的对其方式为居中；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.parent{
    /* 开启弹性布局 */
    display: flex;
    /* 设置主轴居中（默认为X轴） */
    justify-content: center;
    /* 设置副轴居中（默认为Y轴） */
    align-items: center;
    width: 400px;
    height: 400px;
    border: 1px solid #000;
}
.child{
    width: 100px;
    height: 100px;
    background-color: red;
}

写的不好的地方，望大家多多指正，小弟感激不尽！

By

定宽自适应布局: 定宽的内容保持不变，自适应的内容随屏幕的大小的改变而改变。

方式一: float + margin

基本思路:
1.父元素设置padding将需要定宽的位置预留出来；
2.定宽的元素，固定宽度，自适应的元素，设置宽度100%，继承父元素；
3.子元素设置设置浮动（秉承要浮动都浮动原则）；
4.定宽的子元素，设置margin为负值，填补父元素padding预留出来的位置。

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.content{
    height: 200px;
    padding-left:200px;
}
.left{
    float: left;
    width: 200px;
    height: 100%;
    margin-left: -200px;
    background-color: red;
}
.right{
    float: left;
    width: 100%;
    height: 100%;
    background-color: yellow;
}

1
2
3
4
5
<!-- 以下样式全为此结构 -->
<div class="content">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

方式二: 定位

基本思路:
1.父元素使用padding把需要定宽的部分预留出来；
2.定宽的是元素固定宽度，自适应的元素，设置宽度100%，继承父元素；
3.定宽的元素设置定位，填补父元素padding预留出来的位置。

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.content{
    position: relative;
    height: 200px;
    padding-left:200px;
}
.left{
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 100%;
    background-color: red;
}
.right{
    width: 100%;
    height: 100%;
    background-color: yellow;
}

方式三: 弹性布局

基本思路:
1.父元素开启弹性布局；
2.需要固定宽度的元素，固定宽度；
3.自适应的元素，设置flex:1，把剩余的宽度全部用完。

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.content{
    display: flex;
    height: 200px;
}
.left{
    width: 200px;
    height: 100%;
    background-color: red;
}
.right{
    flex: 1;
    width: 100%;
    height: 100%;
    background-color: yellow;
}

写的不好的地方，望大家多多指正，小弟感激不尽！