HTML与CSS学习第七天
目录
1. 定位（在css样式中设置）
1.1 网页常见布局方式
- 标准流：
- 块级元素独占一行（并不一定是浏览器一行，本质是父元素一行），垂直布局
- 行内/行内块元素水平布局，一行显示多个
- 浮动
- 可以使原本水平布局的块级元素水平布局，脱离标准流，但每脱离文档流
- 定位
- 可以让元素自由的摆放在页面中的任意位置
- 一般用于盒子之间的层叠关系
注意点
- 一般情况下，标准流和浮动可以解决大部分布局问题，如果不能解决或解决麻烦，可以使用定位来解决
1.2 定位的应用
- 可以解决盒子与盒子之间的层叠关系
- 原理：定位之后的元素层级最高，可以层叠在其他盒子上方
- 可以使盒子一直固定在页面的某个位置（页面其他元素滚动时，这些盒子可以保持不动）
1.3 定位的使用方法
-
设置定位方式
-
属性名：position
-
属性值：
定位方式 属性值 静态定位 static 绝对定位 absolute 相对定位 relative 固定定位 fixed
-
-
设置偏移量
-
偏移量设置为水平和竖直两个方向，水平和竖直方向各取一个即可
-
选取原则：就近原则，离哪边近选哪个
方向 属性名 属性值 含义 水平 left 数字+px 离左边的距离 水平 right 数字+px 离右边的距离 竖直 top 数字+px 离上方的距离 竖直 buttom 数字+px 离下方的距离
-
案例
-
两个盒子相互层叠，绝对定位实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 清除默认间距 */ *{ margin: 0; padding: 0; } .red{ width: 200px; height: 200px; background-color: red; } .blue{ /* 绝对定位实现盒子层叠 */ /* 1.设置定位方式 */ position: absolute; /* 2.设置偏移量 */ left: 100px; top: 100px; width: 200px; height: 200px; background-color: blue; } </style> </head> <body> <div class="red"></div> <div class="blue"></div> </body> </html> -
效果图
1.4 静态定位
-
定义：静态定位是默认值，就是之前认识的标准流
-
代码：
-
position:static;
-
注意点
- 静态定位就是之前的标准流，不能通过方位属性进行移动
- 后面说的定位不包括静态定位，一般特指后几种:相对，绝对，固定
1.5 相对定位
-
定义：自恋型定位，相对于自己之前的位置进行移动
-
代码：
-
position:relative
-
-
特点：
- 需要设置偏移量来实现移动
- 相对于自己原来位置进行移动
- 在页面中占位置，没有脱标（本体还在最开始的地方（家），显示出来的只是投影（移动后的位置））
-
应用场景
- 配合绝对定位组cp（子绝父相）
- 用于小范围移动
案例
-
绝对定位实现层叠
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 清除默认边距 */ *{ margin: 0; padding: 0; } .red{ width: 200px; height: 200px; background-color: red; } .blue{ width: 200px; height: 200px; background-color: blue; /* 相对定位，相对于自己之前的位置偏移 */ position: relative; /* 左移100px */ left: 100px; /* 上移100px */ bottom: 100px; } </style> </head> <body> <div class="red"></div> <div class="blue"></div> </body> </html> -
本体和投影关系图
1.6 绝对定位
-
定义：拼爹型定位，相对于非静态定位的父元素进行定位移动
-
代码：
-
position:absolute;
-
-
特点
- 需要配合偏移量实现移动定位
- 默认相对于浏览器可视区域进行移动
- 在页面中不占位置
-
应用场景
- 配合相对定位组cp（子绝父相）
案例
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 清除默认边距 */ *{ padding: 0; margin: 0; } div{ width: 200px; height: 200px; } .red{ background-color: red; } .green{ background-color: green; /* 绝对定位，相对于非静态定位的父元素的定位 */ position: absolute; /* 绝对定位需要配合偏移量进行移动， 绝对定位会使元素脱标 */ left: 100px; top: 100px; } .blue{ background-color: blue; } </style> </head> <body> <div class="red"></div> <div class="green"></div> <div class="blue"></div> </body> </html> -
效果图
1.6.2 绝对定位到底相对于谁移动
- 祖先元素中没有定位->默认相对于浏览器进行移动
- 祖先元素中有定位->相对于最近的，有定位的祖先元素进行移动
注意点
-
这里的定位指相对定位，绝对定位，固定定位，不包括静态定位。
-
示例1：无定位的情况，右下角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 去除默认边距 */
*{
margin: 0;
padding: 0;
}
.father{
width: 600px;
height: 600px;
background-color: pink;
}
.son{
width: 400px;
height: 400px;
background-color: skyblue;
}
.sun{
width: 200px;
height: 200px;
background-color: blue;
/* 绝对定位 */
position: absolute;
/* 绝对定位到右下角 */
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
<div class="sun"></div>
</div>
</div>
</body>
</html>
- 效果图
- 示例2：子绝祖先都有定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 去除默认边距 */
*{
margin: 0;
padding: 0;
}
.father{
width: 600px;
height: 600px;
background-color: pink;
/* 相对定位 */
position: relative;
}
.son{
width: 400px;
height: 400px;
background-color: skyblue;
/* 相对定位 */
position: relative;
}
.sun{
width: 200px;
height: 200px;
background-color: blue;
/* 绝对定位 */
position: absolute;
/* 绝对定位到右下角 */
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
<div class="sun"></div>
</div>
</div>
</body>
</html>
- 效果图
1.7 子绝父相
- 目的：让子元素相对于父元素进行自由移动
- 含义
- 子元素：绝对定位
- 父元素：相对定位
- 子绝父相好处
- 子元素可在父元素内部自由移动
- 父元素设置相对定位没有脱离标准流，在网页中占有位置，不影响父元素与其他元素的布局。
案例
- 子元素在父元素右下角，且不影响其他元素布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除默认边距 */
*{
margin: 0;
padding: 0;
}
.father{
width: 400px;
height: 400px;
background-color: pink;
/* 父相 */
position: relative;
}
.son{
width: 200px;
height: 200px;
background-color: blue;
/* 子绝 */
position:absolute;
/* 移动到右下角 */
right: 0;
bottom: 0;
}
.red{
width: 800px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<div class="red"></div>
</body>
</html>
- 效果图
1.8 自绝父绝的特殊情况
- 场景：在使用子绝父相的时候，发现父元素已经有绝对定位了，此时直接使用子绝即可。
- 原因：
- 父元素已经有定位满足要求，如果盲目修改父元素定位方式，可能会影响之前写好的布局
案例
- 使用子绝父相是遇到父绝
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除默认边距 */
*{
margin: 0;
padding: 0;
}
.father{
width: 600px;
height: 600px;
background-color: pink;
/* 父相 */
position: relative;
}
/* .son盒子在father盒子的右下角 */
.son{
width: 400px;
height: 400px;
background-color: blue;
/* 子绝 */
position: absolute;
right: 0;
bottom: 0;
}
/* 这里会产生子绝父绝 */
/* .sun盒子在son盒子的右上角 */
.sun{
width: 200px;
height: 200px;
background-color: red;
/* 子绝 */
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
<div class="sun"></div>
</div>
</div>
</body>
</html>
- 效果图
1.9 子绝父相水平居中案例
-
前提：子绝父相
-
先让子盒子往右移动父盒子的一半
- left: 50%
-
再让子盒子往左移动自己的一半
-
普通做法：marin-left：负的子盒子宽度的一半
-
缺点：子盒子宽度变化后需要修改代码
-
优化的方法：transform:translateX("-50%")
-
表示沿着x轴负方向往左移动自己的一半，优点是子盒子宽度变化后不需要修改代码
-
案例
- 使子元素相对于父元素水平居中对齐,要求在父子元素宽度可变时也能实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除默认边距 */
*{
margin: 0;
padding: 0;
}
.father{
width: 400px;
height: 400px;
background-color: pink;
/* 父相 */
position: relative;
}
.son{
width: 100px;
height: 50px;
background-color: blue;
/* 子绝 */
position: absolute;
/* 向右移动父元素宽度的一半 */
left:50%;
/* 在向左移动自己本身的一半 */
/* 1.常规做法 */
/* margin-left:-50px; */
/* 2. 优化版的做法 */
transform: translateX(-50%);
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
</html>
- 效果图
1.10 子绝父相水平垂直都居中案例
- 前提：子绝父相
- 让子盒子往右走父元素宽度一半，再让子盒子往左走自己盒子宽度的一半
- 让子盒子往下走父盒子高度的一半，再让子盒子往上走自己盒子高度的一半
- 代码表示
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除默认边距 */
*{
margin: 0;
padding: 0;
}
.father{
width: 400px;
height: 400px;
background-color: pink;
/* 父相 */
position: relative;
}
.son{
width: 100px;
height: 50px;
background-color: blue;
/* 子绝 */
position: absolute;
/* 水平垂直都居中 */
/* 右移父元素宽度的一半 */
left: 50%;
/* 下移父元素高度的一半 */
top: 50%;
/* 往左移自己宽度的一半，往上移自己高度的一半 */
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
- 效果图
1.11 固定定位
- 定义：死心眼型定位，相对于浏览器进行定位移动
- 代码：
position:fixed; - 特点
- 需要配合方位属性实现移动
- 相对于浏览器可视区域进行移动
- 在页面中不占位置，已经脱标
- 应用场景：让盒子固定在页面中的某个区域
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除默认边距 */
*{
padding: 0;
margin: 0;
}
/* 给整个浏览器设置背景颜色 */
body{
background-color: #eee;
}
/* 固定定位 */
.aside{
/* 固定定位 */
position: fixed;
left: 100px;
top: 100px;
}
.bigbox{
width: 1000px;
height: 3000px;
background-image: url("images/product.png");
}
</style>
</head>
<body>
<img src="images/floor1.jpg" alt="" class="aside">
<div class="bigbox">
</div>
</body>
</html>
- 效果图
1.12 定位总结
| 定位方式 | 属性值 | 相对于谁移动 | 是否占位置 |
|---|---|---|---|
| 静态定位 | static | 不能通过方位属性移动 | 占位置 |
| 相对定位 | relative | 相对于自己原来的位置 | 占位置 |
| 绝对定位 | absolute | 相对于最近的且有定位的祖先元素移动 | 不占位置（脱标） |
| 固定定位 | fixed | 相对于浏览器可视区域 | 不占位置(脱标) |
注意点
浮动和定位的区别：
浮动还会占据原来的位置
定位会脱离文档流，不占据原来的位置
2.元素层级关系
2.1 定义
- 用于判断当两个或多个元素在同一位置时，谁覆盖谁。
- 不同布局方式元素的层级关系
- 标准流<浮动<定位
- 不同定位之间的层级关系
- 相对，绝对，固定定位默认层级相同
- 此时写在HTML下方的元素会覆盖之前的元素
案例
- 不同布局方式元素之间的层级关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除默认边距 */
*{
margin: 0;
padding: 0;
}
.red{
width: 300px;
height: 300px;
background-color: red;
}
.blue{
float:left;
width: 300px;
height: 300px;
background-color: blue;
}
.green{
position: relative;
width: 310px;
height: 310px;
background-color: green;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</body>
</html>
- 效果图
- 不同定位之间的层级关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除默认边距 */
*{
margin: 0;
padding: 0;
}
.red{
width: 300px;
height: 300px;
background-color: red;
/* 相对定位 */
position: relative;
left: 0;
top: 0;
}
.blue{
width: 300px;
height: 300px;
background-color: blue;
/* 绝对定位 */
position: absolute;
left: 100px;
top: 100px;
}
.green{
width: 300px;
height: 300px;
background-color: green;
/* 固定定位 */
position: fixed;
left: 200px;
top: 200px;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</body>
</html>
2.2 修改定位元素的层级
- 场景：改变定位元素的层级
- 属性名：z-index
- 属性值：数字
- 数字越大，层级越高
- 一般情况下999在开发中默认最大，视情况而定
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除默认边距 */
*{
margin: 0;
padding: 0;
}
.red{
width: 300px;
height: 300px;
background-color: red;
/* 相对定位 */
position: relative;
left: 0;
top: 0;
/* 定位元素层级 */
z-index: 1;
}
.blue{
width: 300px;
height: 300px;
background-color: blue;
/* 绝对定位 */
position: absolute;
left: 100px;
top: 100px;
}
.green{
width: 300px;
height: 300px;
background-color: green;
/* 固定定位 */
position: fixed;
left: 200px;
top: 200px;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</body>
</html>
- 效果图
3. 装饰
3.1 垂直对齐方式
3.1.1 基线
- 定义：浏览器文字类型元素排版中存在用于对齐的基线（baseline）
- 图解
3.1.2 文字对齐方式
- 解决行内/行内块元素垂直对齐问题
- 图片和文字在一行中显示时，默认为基线对齐
3.1.3 垂直对齐方式介绍
-
属性名：vertical-align
-
属性值：
属性值 效果 baseline 默认，基线对齐 top 顶部对齐 middle 中部对齐 bottom 底部对齐
案例
-
图片与文字在同一行的垂直对齐问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 清除默认边距 */ *{ margin: 0; padding: 0; } img{ /* 中部对齐 */ vertical-align: middle; } </style> </head> <body> <img src="images/1.jpg" alt=""><span>我是大傻逼</span> </body> </html> -
效果图
3.2 垂直对齐方式应用
3.2.1 解决行内块元素默认基线对齐导致整体不对齐问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除默认边距 */
*{
padding: 0;
margin: 0;
}
/* 解决边距对齐问题 */
/* 1.vertical-align解决 */
input{
height: 50px;
/* 清除默认边框 */
box-sizing: border-box;
/* vertical-align: middle; */
/* line-height: 20px; */
/* 2.浮动解决 */
float: left;
}
</style>
</head>
<body>
<input type="text"><input type="button" value="百度一下">
</body>
</html>
- 效果图
3.2.2 input和img无法对齐问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除默认边距 */
*{
margin: 0;
padding: 0;
}
img{
vertical-align: bottom;
}
</style>
</head>
<body>
<img src="images/1.jpg" alt=""><input type="text">
</body>
</html>
- 效果图
3.2.3 div中的文本框无法贴顶的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除默认边距 */
*{
margin: 0;
padding: 0;
}
/* 解决贴顶问题 */
input{
vertical-align: top;
}
.box{
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<input type="text">
</div>
</body>
</html>
- 效果图
3.2.4div不设置高度右img标签撑开，此时img标签存在多余间隙问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除默认边距 */
*{
margin: 0;
padding: 0;
}
div{
width: 800px;
background-color: pink;
}
/* 解决方法1： 设置垂直对齐方式*/
/* img{
vertical-align: top;
} */
/* 解决方法二：因为基线对齐方式存在于
行内/行内块元素中，所以设置为块元素解决 */
img{
display: block;
}
</style>
</head>
<body>
<div>
<img src="images/1.jpg" alt="">
</div>
</body>
</html>
- 效果图
3.2.5 使用line-height让img标签垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除默认边距 */
*{
margin: 0;
padding: 0;
}
.father{
width: 800px;
height: 800px;
background-color: pink;
/* 设置行高 */
line-height: 800px;
}
img{
/* 设置垂直居中 */
vertical-align: middle;
/* 需配合line-height使用，给img标签
的父元素设置 */
}
</style>
</head>
<body>
<div class="father">
<img src="images/1.jpg" alt="">
</div>
</body>
</html>
- 效果图
注意点
- 学习浮动之后，不推荐使用行内块元素让div一行中显示，因为可能出现垂直对齐问题
- 推荐优先使用浮动完成效果
3.3 光标类型
-
场景：设置鼠标光标悬停在元素上的显示的样式（css样式）
-
属性名：cursor
-
属性值
属性值 作用 default 默认值，通常为箭头 pointer 小手效果，提示用户可以点击 text 工字形，提示用户可以选择文字 move 十字光标，提示用户可以移动
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 去除默认边距 */
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
height: 400px;
background-color: pink;
/* 光标类型 */
/* 1.手型型 */
/* cursor: pointer; */
/* 2.工字形 */
/* cursor: text; */
/* 3.十字光标 */
cursor: move;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 效果图
3.4 边框圆角
- 场景：使盒子的四个角变得圆润
- 属性名：border-radius
- 常见取值：数字+px、百分比
- 原理
- 赋值规则：从左上角开始顺时针赋值，没有赋值的看对角
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除默认边距 */
*{
margin: 0;
padding: 0;
}
.box{
width: 400px;
height: 400px;
background-color: pink;
/* 边框圆角 */
/* 四个角赋予相同的圆角 */
border-radius: 100px;
/*两个对角赋值 */
border-radius: 30px 50px;
/* 一个对角，2个单独赋值 */
border-radius: 20px 30px 40px;
/* 四个角单独赋值 */
border-radius: 20px 30px 40px 50px;
/* 赋值规则：从左上角开始顺时针赋值，没有赋值的看对角 */
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
- 效果图
3.4.2 边框圆角的应用
- 构造一个正圆
- 盒子是正方形
- 设置border-radius为盒子高度的一半----border-radius:50%;
- 构造一个胶囊按钮：
- 盒子是长方形
- 设置border-radius为盒子高度的一半
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除默认边距 */
*{
margin: 0;
padding: 0;
}
.box1{
width: 400px;
height: 400px;
background-color: pink;
/* 设置成正圆 ,两种方法*/
/* 1.border-radius: 200px; */
border-radius: 50%;
}
.box2{
width: 400px;
height: 100px;
background-color: blue;
/* 设置于上面盒子的间距 */
margin-top: 100px;
/* 设置成胶囊形状 */
border-radius: 50px;
/* 设置成50%会变成椭圆 */
/* border-radius: 50%; */
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
- 效果图
3.5 overflow溢出部分显示效果
-
溢出部分：指的是盒子内容部分所超出盒子范围的区域
-
场景：控制内容溢出部分的显示效果：显示，隐藏，滚动条…
-
属性名：overflow（css样式）
-
属性值：
属性值 效果 visible 默认值，溢出部分可见 hidden 隐藏，溢出部分不可见 scroll 无论是否溢出，都显示滚动条 auto 根据是否溢出，显示或隐藏滚动条
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除默认边距 */
*{
margin: 0;
padding: 0;
}
.box{
width: 400px;
height: 400px;
background-color: pink;
/* 溢出部分显示效果 */
/* 1.默认值，显示溢出部分 */
/* overflow: visible; */
/* 2. 隐藏*/
/* overflow: hidden; */
/* 3.始终显示滚动条 */
/* overflow: scroll; */
/* 根据是否溢出，显示滚动条 */
overflow: auto;
}
</style>
</head>
<body>
<div class="box">
我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼
我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼
我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼
我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼
我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼
我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼
我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼
我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼
我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼
我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼
我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼
我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼
我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼
我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼
我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼
我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼
我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼
我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼
我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼
我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼
</div>
</body>
</html>
- 效果图
3.6 元素本身隐藏
- 场景：让某元素本身在屏幕中不可见。
- 常见属性：
- visiblity:hidden
- display:none
- 区别
- visiblity:hidden:隐藏元素本身，并且在页面中占位置
- display:none:隐藏元素本身，在页面中不占位置
注意点
- 开发中经常使用display属性完成元素的显示隐藏切换
- display：none隐藏 ，display：block（显示）
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除默认边距 */
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 300px;
}
.red{
background-color: red;
}
.green{
background-color: green;
/* 显示隐藏属性 */
/* 1.visiblity */
visibility: hidden;
/* 2.display */
/* display: none; */
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</body>
</html>
- 效果图
3.7 元素整体透明度
- 定义：让某元素整体（包括内容）一起变透明
- 属性名：opacity（css样式）
- 属性值：0-1之间的数字
- 0：完全透明
- 1：完全不透明
注意点
opacity会让元素整体变透明，包括内容（文字，子元素…）
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除默认边距 */
*{
padding: 0;
margin: 0;
}
.box{
width: 400px;
height: 400px;
background-color: red;
/* 调整整体透明度 */
opacity: .4;
}
</style>
</head>
<body>
<div class="box">
<img src="images/1.jpg" alt="">我是大傻逼
</div>
</body>
</html>
- 效果图
3.8 边框合并
- 让相邻表格边框进行合并，得到细线边框效果
- 代码：border-collapse:collapse;（给table元素设置css样式）
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除默认边距 */
*{
margin: 0;
padding: 0;
}
/* 设置表格高度和宽度 */
table{
width: 400px;
height: 300px;
border:1px solid #ccc;
/* 合并边框 */
border-collapse: collapse;
}
/* 边框 */
th,td{
border: 1px solid #ccc;
}
</style>
</head>
<body>
<table>
<caption><h3>前端与移动开发学员学习情况</h3></caption>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>小姐姐</td>
<td>女</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>小哥哥</td>
<td>男</td>
<td>100</td>
</tr>
<tr>
<td>3</td>
<td>大姐姐</td>
<td>女</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">总成绩</td>
<td colspan="2">300</td>
</tr>
</tfoot>
</table>
</body>
</html>
- 效果图
3.9 用css画三角形
- 场景：在网页中展示小三角形时，除了可以使用图片外，还可以用代码实现
- 原理：利用盒子边框完成
- 步骤：
- 设置一个盒子
- 设置四周不同颜色的边框
- 将盒子宽高设置为0，仅保留边框
- 得到四个三角形，选择其中一个，其他三角形（边框）设置颜色为透明
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除默认边距 */
*{
margin: 0;
padding: 0;
}
.box{
/* width: 400px; */
/* height: 400px; */
width: 0;
height: 0;
/* background-color: pink; */
/* 设置四种不同颜色的宽高 */
border-top:100px solid transparent;
border-right:100px solid transparent;
border-bottom:100px solid green;
border-left:100px solid transparent;
/* 修改左右边框大小和下边框大小可以改变三角形形状 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
- 效果图
扩展
-
用css画任意三角形
-
图解
- 效果图
4.选择器进阶
- 目的：使用伪类选择器选择元素的不同状态
4.1 链接伪类选择器
-
用于选中超链接的不同状态
-
选择器语法：
选择器语法 功能 a:link{} 选中a链接未访问过的状态 a:visited{} 选中a链接访问过的状态 a:hover{} 选中鼠标悬停的状态 a:active{} 选中鼠标按下的状态
注意点
- 如果需要同时实现上述四种伪类状态效果，需要按照LVHA顺序书写
- 记忆：男朋友送了你一个lv包包，你开心的Ha哈大笑
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除默认边距 */
*{
margin: 0;
padding: 0;
}
a{
display: block;
width: 100px;
height: 100px;
background-color: #ccc;
}
/* 伪类选择链接不同状态 */
a:link {
/* color:pink; */
background-color: red;
}
a:visited{
/* color: blue; */
background-color: blue;
}
a:hover{
/* color: green; */
background-color: green;
}
a:active{
/* color: yellow; */
background-color: yellow;
}
</style>
</head>
<body>
<a href="###">牛啊</a>
</body>
</html>
- 效果图
4.2 焦点伪类选择器
-
用于选中元素获取焦点时的状态，常用于表单控件
-
选择器语法：
-
input:focus { background-color:skyblue; }
-
-
效果：
- 表单控件获取焦点时会默认显示外部轮廓线
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除默认边距 */
*{
margin: 0;
padding: 0;
}
/* 焦点伪类选择器 */
input:focus{
background-color: #ccc;
}
</style>
</head>
<body>
<input type="text" name="" id="">
</body>
</html>
- 效果图
4.3 属性选择器
-
场景：通过元素上的HTML属性来选择元素，常用于input标签
-
语法规则：
选择器 功能 E[attr] 选择具有attr属性的E元素 E[attr=“val”] 选择具有attr属性且属性值为val的元素
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除默认间距 */
*{
margin: 0;
padding: 0;
}
/* 属性选择器 */
input[type="text"]{
background-color: blue;
}
input[type="password"]{
background-color: green;
}
</style>
</head>
<body>
姓名：<input type="text" name="" id="">
密码：<input type="password">
</body>
</html>
- 效果图
154
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
