欢迎浏览『JavaWeb前端』专栏的其他文章:
一、HTML-精炼-易懂
文章目录
**持续完善中。。。**
三、CSS进阶
1 - 盒子模型
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p{
margin: 15px 10px 5px 20px;
margin: 15px auto;/*水平居中*/
padding: 10px 20px;
border: 5px solid #ccc;
width: 200px;
}
</style>
</head>
<body>
<p>较长的文本。某大学校长张三14日应约与英国某校长通电话,就当前国际金融形势交换看法。</p>
</body>
</html>
-
元素实际高度 = height + 左右内边距 + 左右外边框
元素实际宽度 = width + 上下内边距 + 上下外边框
-
当 box-sizing: border-box; 时,所有的操作都会在height、width的范围内进行改变,不会超过他们的值
-
内边距:元素的内容和元素边框之间的距离,有上右下左四个边
p{
padding: 10px 20px;
}
<!--等价于:-->
p{
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
- 外边距:元素的边到相邻元素的距离,有上右下左四个边
p{
margin: 20px 15px 10px 5px;
}
<!--等价于:-->
p{
margin-top: 20px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 5px;
}
-
边框
border: [border-style] [border-width] [border-color]
-
border-style:
-
2 - 隐藏元素
- display:none 与 visibility:hidden 的区别:
display:none;
:不占据页面空间visibility:hidden;
:占据页面空间
2 - 1 display属性
是用来显示或者隐藏 HTML 的元素,达到一定的布局效果
-
block
块对象的默认值,对象之后添加新行
-
nono
隐藏对象,隐藏的对象不占据物理空间
-
liline
内联对象的默认值,对象后不添加行
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box
{
margin: 15px 10px 5px 20px;
padding: 10px 20px;
border: 5px solid #ccc;
width: 200px;
}
</style>
</head>
<body>
<div class="box">
<p>原文:</p>
较长的文本。某大学校长张三14日应约与英国某校长通电话,就当前国际金融形势交换看法。
</div>
<div class="box">
较长的文本。某大学校长张三
<span style="display: block;">温家宝</span> <!-- 将温家宝在另一行显示 -->
14日应约与英国某校长通电话,就当前国际金融形势交换看法。
</div>
<div class="box">
较长的文本。某大学校长
<span style="display: none;">张三</span> <!-- 将温家宝隐藏 -->
14日应约与英国某校长通电话,就当前国际金融形势交换看法。
</div>
<div class="box">
较长的文本。某大学校长
<span style="display: inline;">张三</span> <!-- 默认值,不做改变(即与原文一致) -->
14日应约与英国某校长通电话,就当前国际金融形势交换看法。
</div>
</body>
</html>
2 - 2 visibility属性
是用来显示或者隐藏 HTML 的元素,达到一定的布局效果
-
visible
对象可视
-
hidden
对象隐藏,隐藏的对象占据物理空间
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box
{
margin: 15px 10px 5px 20px;
padding: 10px 20px;
border: 5px solid #ccc;
width: 300px;
height: 120px;
}
</style>
</head>
<body>
<div class="box">
<p>原文:</p>
较长的文本。某大学校长张三14日应约与英国某校长通电话,就当前国际金融形势交换看法。
</div>
<div class="box">
<img style="float: left; visibility: visible;"
height="100px" width="100px" alt="good stady" src="E:\Photograph\壁纸\stady.jpg">
较长的文本。某大学校长张三14日应约与英国某校长通电话,就当前国际金融形势交换看法。
</div>
<div class="box">
<img style="float: left; visibility: hidden;"
height="100px" width="100px" alt="good stady" src="E:\Photograph\壁纸\stady.jpg">
较长的文本。某大学校长张三14日应约与英国某校长通电话,就当前国际金融形势交换看法。
</div>
</body>
</html>
3 - 布局与定位
3 - 1 浮动元素-float
一旦元素设置为浮动,则其自动成为行内块
用来浮动 HTML 的元素,达到一定的布局效果
例如:向左浮动后,右侧剩余部分将会被后面的元素填充
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box
{
margin: 15px 10px 5px 20px;
padding: 10px 20px;
border: 5px solid #ccc;
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<div class="box">
<p>原文:</p>
<img height="100px" width="100px" alt="good stady" src="E:\Photograph\壁纸\stady.jpg">
较长的文本。某大学校长张三14日应约与英国某校长通电话,就当前国际金融形势交换看法。
</div>
<div class="box">
<img style="float: right;" height="100px" width="100px" alt="good stady" src="E:\Photograph\壁纸\stady.jpg">
较长的文本。某大学校长张三14日应约与英国某校长通电话,就当前国际金融形势交换看法。
</div>
<div class="box">
<img style="float: left;" height="100px" width="100px" alt="good stady" src="E:\Photograph\壁纸\stady.jpg">
较长的文本。某大学校长张三14日应约与英国某校长通电话,就当前国际金融形势交换看法。
</div>
</body>
</html>
结果
3 - 2 清除浮动
当同级元素设置了clear参数,则会使其同级元素恢复文档流
.clear{ clear: left; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.column{
float: left;
margin: 5px 5px 5px 5px;
padding: 10px 10px;
border: solid 2px #000000;
}
.clear{
clear: left;
}
</style>
</head>
<body>
<div>
<div class="column">第一列</div>
<div class="clear">较长的文本。某大学校长张三14日应约与英国某校长通电话,就当前国际金融形势交换看法。 </div>
</div>
</body>
</html>
3 - 3 定位元素(position)
标签在页面重合时的覆盖规则:
- 非static定位覆盖static定位
- 如果都是非static定位,则后写的覆盖先写的
- 强制定位中,z-index大的覆盖z-index小的
只要不是static定位,则top、right、bottom、left这4个属性均能使用
注意:如果使用了top,就不要使用bottom
如果使用了left,就不要使用right
-
absolute:绝对定位
当父元素有定位时,参照父元素的位置
当父元素没定位时,会找父元素的父元素,如果均为static定位,则会参照屏幕(页面左上角)的位置
绝对定位不占用页面空间(脱离文档流),且可层叠
<style> .column{ border: solid 2px #000000; width: 125px; } h1{ position: absolute; top: 80px; left: 30px; } </style>
<body> <div class="column"> <h1>绝对定位</h1> <!-- 不占用页面空间 --> <div>较长的文本。某大学校长张三14日应约与英国某校长通电话,就当前国际金融形势交换看法。</div> </div> </body>
-
relative:相对定位
不会脱离文档流,原始位置仍然保留
采用相对定位的元素,其位置是相对于它在文档中的原始位置开始计算而来的,用 left、right、top、bottom 来定位元素
相对定位的元素会获得相应的空间
-
fixed:屏幕定位
只参照屏幕定位,与父元素无关,且脱离文档流
不论窗口滚动与否,元素都会留在那个位置,与页面无关
-
static:静态定位
position的默认值,static 的元素始终会处于页面流给定的位置
4 - 3D样式
要想在页面中实现3D样式,必须具备两个条件
- 将要实现3D样式的元素设置为
transform-style: preserve-3d
- 在实现3D效果的父元素上加一个镜头距离
perspective: 1000px;
,值在800-1200px;
要想看出3D效果,离不开旋转、平移
注意:书写的顺序不同,展示的效果不同,故书写时要特别注意书写顺序
-
transform
:转换- rotateX(角度):沿X轴旋转,单位deg
- rotateY(角度):沿Y轴旋转
- rotateZ(角度):沿Z轴旋转
- translateX(距离):沿X轴移动,单位px
- translateY(距离):沿Y轴移动
- translateZ(距离):沿Z轴移动
-
平移与定位的区别
- 平移:以自身为参照,随着自身的方向不同,下一步的改变也有所不同
- 定位:以世界坐标为参照,固定不变
-
transform-origin
- bottom:以下边为旋转轴
- top:以上边为旋转轴
- right:以右边为旋转轴
- left:以做百年为旋转轴
-
选择器+:hover
鼠标移上之后的样式
-
transition
时间 样式发生改变的时候,不瞬间发生改变,而是有一个时间过渡
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#div1 {
width: 50vw;
height: 50vh;
background: #00FF00;
font-size: 30px;
cursor: auto;
perspective: 1000px;/*第二步*/
}
#child {
width: 100px;
height: 100px;
background: #FF0000;
transform-style: preserve-3d;/*第一步*/
transform: rotateX(45deg) rotateY(45deg) translateX(50px) translateY(50px);/*第三步*/
}
</style>
</head>
<body>
<div id="div1">
<div id="child"></div>
</div>
</body>
</html>
-
案例(3D小方盒):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>3D小方盒</title> <style> *{ margin: 0; padding: 0; } #wrap { width: 200px; height: 200px; margin: 250px auto; perspective: 1200px; } #wrap>#content{ width: 200px; height: 200px; position: relative; transform-style: preserve-3d; transition: 1.5s; transform-origin: 100px 100px 100px; } /* 鼠标移上之后的样式 */ #wrap>#content:hover { transform: rotateX(-180deg); } /* 每一个面的样式 */ #wrap>#content>div{ width: 200px; height: 200px; border: 1px solid #FF0000; box-sizing: border-box;/* 所有的操作都在width、height范围内进行 */ position: absolute; top: 0; left: 0; } /* 设置六个面的位置 */ #wrap>#content>.top { transform: translateZ(200px) rotateZ(0deg); } #wrap>#content>.rear { transform-origin: bottom;/* 改变旋转轴 */ transform: translateY(-200px) rotateX(-90deg); } #wrap>#content>.before { transform-origin: top;/* 改变旋转轴 */ transform: translateY(200px) rotateX(90deg); } #wrap>#content>.left { transform-origin: right;/* 改变旋转轴 */ transform: translateX(-200px) rotateY(90deg); } #wrap>#content>.right { transform-origin: left;/* 改变旋转轴 */ transform: translateX(200px) rotateY(-90deg); } </style> </head> <body> <div id="wrap"> <div id="content"> <div class="top"></div> <div class="bottom"></div> <div class="left"></div> <div class="right"></div> <div class="before"></div> <div class="rear"></div> </div> </div> </body> </html>
5 - 动画样式
四维空间(三维空间上在加上时间轴)
定义动画比做的两件事
-
定义动画(定义运动轨迹,样式的变化)
-
定义动画的方式
@keyframes(自己起名){ 0%{样式} 50%{样式} ... 100%{样式} }
-
-
执行动画(让哪个元素来完成这个运动轨迹)
-
执行动画的方式,在相应的选择器里 +
animation:动画名 时间 速度曲线 延迟时间 次数 是否逆序 停留位置;
- 动画名:
保持一致
- 时间:
轨迹运行完所用时间,自己设置
- 速度曲线:
ease 默认 慢 ——> 快 ——> 慢 ——> 特别慢
ease-in 特别慢 ——> 慢 ——> 越来越快
ease-out 快 ——> 越来越慢 ——> 特别慢
ease-in-out 特别慢 ——> 慢 ——> 快 ——> 慢
linear 全程匀速
- 延迟时间:
默认0s,可以自己设置 ,
- 次数:
默认1次,infinite:无限次
- 是否逆序:
normar 不逆序
alternate 偶数次逆序
- 停留位置:
none 默认,动画结束后停留在无动画的状态
forwards 动画结束之后,停留在最后一帧上
案例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动画</title> <style type="text/css"> *{ margin: 0; padding: 0; } #wrap { width: 200px; height: 200px; border: 1px solid #000000; position: absolute; top: 0; left: 0; animation: yrw 3s linear 1s 3 alternate forwards; } @keyframes yrw{ 0%{ top: 0; left: 0; } 100%{ top: 0; left: 1000px; } } </style> </head> <body> <div id="wrap"></div> </body> </html>
-
6 - 属性计算
专门用于解决百分比与px混用的情况(解决多个div之间分区的问题)
-
calc(计算)
运算符前后,必须有空格隔开
7 - 弹性模型
一种布局样式
7 - 1 元素及属性
-
父元素
-
宽度、高度(必须有)
-
display: flex;
(必须有)父元素允许将所属的空间分配给子元素
-
flex-direction
:分配模式
row:默认 横向分布
row-reverse:横向反向分布(将你所设置的分配方式左右颠倒)
column:纵向分布
column-reverse:纵向反向分布
-
align-items
:设置子元素的对其方式
针对当前元素的位置而言的
flex-start 默认 开始位置(此div的开始位置)对其
flex-end 结束位置对其
center 居中对其
注意:如果父元素设置为弹性模型,则对于横向分布,其高度默认100%,对于纵向分布,其宽度默认100%
-
-
子元素
flex:权重值;
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
height: 100vh;/* 宽度未设置,默认100% */
display: flex;
flex-direction: row-reverse;/* 横向反向分布 */
align-items: flex-end;/* 结束位置对其 */
}
#wrap>.left {
/* height: 50%; */
background: #000000;
flex: 1;/* 权重值 */
}
#wrap>.mid {
background: #00FF00;
flex: 1;
}
#wrap>.right {
background: #FF0000;
flex: 1;
}
</style>
</head>
<body>
<div id="wrap">
<div class="left"></div>
<div class="mid"></div>
<div class="right"></div>
</div>
</body>
</html>
7 - 2 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
height: 100vh;
display: flex;
flex-direction: column;
}
#wrap>.header{
height: 60px;
border-bottom: 1px solid #000000;
}
#wrap>.content {/* 此元素既是子元素又是父元素 */
flex: 1;
display: flex;
flex-direction: row;
}
#wrap>.content>.left{
width: 150px;
border-right: 1px solid #000000;
background: #00FF00;
}
#wrap>.content>.right {
flex: 1;
background: #5555ff;
}
</style>
</head>
<body>
<div id="wrap">
<div class="header"></div>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
</body>
</html>