【6.0】前端基础之CSS终章
【6.0】前端基础之CSS终章
【一】浮动带来的影响及解决办法
【1】父标签塌陷
- 造成父标签塌陷的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
#d1 {
border: 3px solid red;
}
#d2 {
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
#d3 {
width: 100px;
height: 100px;
background-color: yellow;
float: left;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
<div id="d3"></div>
</div>
</body>
</html>
- 内部元素因为浮动导致了外边框无法框柱内部元素
【2】解决办法一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
#d1 {
border: 3px solid red;
}
#d2 {
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
#d3 {
width: 100px;
height: 100px;
background-color: yellow;
float: left;
}
#d4 {
height: 100px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</div>
</body>
</html>
- 内部再创建一个子标签，给一个固定高度，撑起外边框
造成代码冗余，不推荐
【2】解决办法二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
#d1 {
border: 3px solid red;
}
#d2 {
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
#d3 {
width: 100px;
height: 100px;
background-color: yellow;
float: left;
}
#d4 {
/*height: 100px;*/
clear: left; /* 该标签的左边(地面和空中)不能有浮动元素 */
clear: both; /* 该标签的左右两边(地面和空中)不能有浮动元素 */
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</div>
</body>
</html>
【3】通用的解决办法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
#d1 {
border: 3px solid red;
}
#d2 {
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
#d3 {
width: 100px;
height: 100px;
background-color: yellow;
float: left;
}
#d4 {
/*height: 100px;*/
/*clear: left; !* 该标签的左边(地面和空中)不能有浮动元素 *!*/
clear: both; /* 该标签的左右两边(地面和空中)不能有浮动元素 */
}
.clearfix:after {
content:"";
display: block;
clear: both;
}
</style>
</head>
<body>
<div id="d1" class="clearfix">
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</div>
</body>
</html>
在写HTML页面之前，提前写好处理浮动带来的影响的CSS代码
.clearfix:after { content:""; display: block; clear: both; }之后只要出现了塌陷的问题就给该塌陷的标签加一个 clearfix 属性即可
【二】溢出属性
【1】问题引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#p1 {
height: 100px;
width: 100px;
border: 5px solid red;
}
</style>
</head>
<body>
<p id="p1">
起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。</p>
<p>起笔描绘山水意，</p>
<p>云淡风轻如诗情。</p>
<p>倾情抒写欢乐悲，</p>
<p>文字流露真我心。</p>
</body>
</html>
字数太多超出了，规定的边框限制
【2】解决办法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#p1 {
height: 100px;
width: 100px;
border: 5px solid red;
/* overflow: visable 默认是可见，溢出还是展示 */
/*overflow: hidden; !* 溢出部分直接隐藏 *!*/
/*overflow: scroll; !* 字体内容可以滚动 *!*/
overflow: auto; /* 自动 */
}
</style>
</head>
<body>
<p id="p1">
起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。</p>
<p>起笔描绘山水意，</p>
<p>云淡风轻如诗情。</p>
<p>倾情抒写欢乐悲，</p>
<p>文字流露真我心。</p>
</body>
</html>
【3】头像案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
background-color: #4e4e4e;
}
#d1 {
height: 200px;
width: 200px;
border-radius: 50%;
border: 3px solid white;
margin: 0 auto;
overflow: hidden;
}
#d1 > img {
width: 100%;/* 占标签100%比例 */
}
</style>
</head>
<body>
<div id="d1">
<img src="头像猫.jpg" alt="">
</div>
</body>
</html>
【三】定位
【1】参考
-
相对定位（Relative Positioning）
- 是一种CSS定位方式，它是相对于元素在正常文档流中的位置进行定位。
- 通过设置
position: relative;属性，可以在元素自身正常显示的前提下 - 通过设定
top、right、bottom和left属性，来将元素在水平和垂直方向上进行微调。 - 相对定位会影响元素原本在文档流中的位置，但不会影响其他元素的布局。
-
绝对定位（Absolute Positioning）
- 是一种CSS定位方式，它是相对于最近的非静态定位的父元素进行定位。
- 通过设置
position: absolute;属性 - 可以使用
top、right、bottom和left属性来精确地定位元素。 - 绝对定位会脱离文档流，不会占据原本的空间，且不会影响其他元素的布局，它常用于创建浮动效果或者覆盖其他元素。
-
固定定位（Fixed Positioning）
- 也是一种CSS定位方式，它会相对于浏览器窗口进行定位。
- 通过设置
position: fixed;属性，可以在元素不随页面滚动而移动的情况下 - 使用
top、right、bottom和left属性来进行定位。 - 固定定位的元素会一直保持在屏幕上的固定位置，不会受到页面滚动的影响。这种定位常用于创建导航栏或悬浮广告等效果。
-
静态
- 所有的标签默认都是静态的 static，无法改变位置
-
相对定位
- 相对于标签原来的位置移动 relative
-
绝对定位(常用)
- 相对于已经定位过的父标签做移动，如果没有父标签那么就以body为父标签
- 当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签做定位
-
固定定位(常用)
- 相对于浏览器窗口固定在某个位置
【2】相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
#d1 {
height: 100px;
width: 100px;
background-color: red;
left: 50px; /* 相较于原来的位置从左向右移动50px 如果是负数，方向则相反*/
top: 50px; /* 相较于原来的位置从上向下移动50px 如果是负数 方向则相反 */
/*position: static; !* 默认是 static 无法修改位置 *!*/
position: relative;
/* relative ---> 相对定位 标签由 static 变成 relative
他的性质就从原来没有定位的标签变成了已经定位过的标签
即使没有移动，标签的性质也已经发生了改变
*/
}
</style>
</head>
<body>
<div id="d1">
</div>
</body>
</html>
【3】绝对定位
当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签做定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
#d3 {
height: 100px;
width: 200px;
background-color: blue;
position: relative; /* 从静态标签变为已经移动过的标签 */
}
#d4 {
height: 200px;
width: 400px;
background-color: yellow;
position: absolute; /* 绝对定位 */
left: 220px;
top: 110px;
}
</style>
</head>
<body>
<div id="d3">
<div id="d4"></div>
</div>
</body>
</html>
【4】固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#back {
position: fixed; /* 写了fixed后，接下来的定位就是依据浏览器窗口 */
bottom: 10px;
right: 20px;
height: 50px;
width: 100px;
background-color: burlywood;
border: 1px solid black;
}
</style>
</head>
<body>
<div style="height: 500px;background-color: red"></div>
<div style="height: 500px;background-color: blue"></div>
<div style="height: 500px;background-color: orange"></div>
<div id="back">回到顶部</div>
</body>
</html>
【四】浮动和定位是否脱离文档流
脱离文档流：发生移动后是否还会占有原来的位置
- 浮动
- 相对定位
- 绝对定位
- 固定定位
【1】不脱离文档流
相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 200px;width: 300px; background-color: red;position: relative;left: 500px;"></div>
<div style="height: 200px;width: 300px; background-color: green"></div>
</body>
</html>
【2】脱离文档流
浮动
绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 200px;width: 300px; background-color: red;"></div>
<div style="height: 200px;width: 300px; background-color: green;position:absolute;left: 500px;"></div>
/* 没有父标签定位，则默认以body作为父标签 */
<div style="height: 200px;width: 300px; background-color: blue;"></div>
</body>
</html>
固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 200px;width: 300px; background-color: red;"></div>
<div style="height: 200px;width: 300px; background-color: green;position:fixed;bottom:20px;right: 30px;"></div>
<div style="height: 200px;width: 300px; background-color: blue;"></div>
</body>
</html>
【五】z-index模态框
百度登录页面，其实是三层
最底部是正常的内容(a=0) - 最远的
接着是黑色的透明区(a=99) - 中间的
最后是白色的登陆注册区(a=100) - 最远的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.cover {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: 99;
}
.modal {
background-color: white;
height: 400px;
width: 600px;
position: fixed;
left: 50%;
top: 50%;
z-index: 100;
margin-left: -200px;
margin-top: -300px;
}
</style>
</head>
<body>
<div>最底层的显示内容</div>
<div class="cover">中间的透明层</div>
<div class="modal">
注册登录层
<h1>注册登陆页面</h1>
<p>username
<input type="text">
</p>
<p>password
<input type="password">
</p>
<p>点我提交
<input type="submit">
</p>
</div>
</body>
</html>
【六】透明度opacity
不单单可以修改颜色的透明度还可以修改字体的透明度
rgba 只能修改颜色的透明度
opacity 不只是能修改颜色还能修改字体的透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#p1 {
background-color: rgba(255, 255, 255, 0.4);
}
#p2 {
background-color: rgb(255, 255, 255);
opacity: 0.5;
}
</style>
</head>
<body>
<p id="p1">001</p>
<p id="p2">002</p>
</body>
</html>
本文来自博客园，作者：Chimengmeng，转载请注明原文链接：https://www.cnblogs.com/dream-ze/p/17526407.html
