『JacaWeb前端』三、CSS进阶
三、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>
浙公网安备 33010602011771号