CSS之盒子模型和浮动
【一】盒子模型
1.概念
- 是指网页设计中，用于描述和布局元素的一种模型
2.组成部分
- 内容区域
- 盒子的实际内容，如文本、图像
- 内边距
- 内容区域与边框之间的空间，用于控制内容与边框之间的距离
- 边框
- 围绕内容区域与内边距的线条，用于给元素添加外观和样式
- 外边距
- 边框与其他元素之间的空间，用于控制元素与周围元素之间的距离
3.格式
/*设置外容距边框距离*/
margin: 5px 10px 15px 20px; /*上 右 下 左*/
margin: 5px 10px 15px; /*上 左右 下*/
margin: 5px 10px; /*上下 左右 */
margin: 5px; /*上下左右*/
margin: 0 auto; /* 居中显示 */
/*设置内容距边框距离*/
padding: 5px 10px 15px 20px;;
4.示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 20px 15px 10px 5px
}
#d1 {
width: 200px;
height: 200px;
background-color: springgreen;
border: 10px dashed firebrick;
margin: 5px 10px 15px 20px;
}
#d2 {
width: 200px;
height: 200px;
background-color: springgreen;
border: 10px dashed firebrick;
/*居中显示*/
margin: 0 auto;
/*设置内容距边框距离*/
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<div id="d1">第一个div标签</div>
<div id="d2">第二个div标签</div>
</body>
</html>
【二】浮动
1）作用
- 是所有网站页面布局必备的，可将块级标签浮动起来脱离正常的文档流
- 可将多个块级标签在一行显示
- 脱离页面，浮动字页面之上
- 只有涉及到页面的布局，一般都是用浮动提前规划好
2）问题演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
border: 10px solid red
}
#d2 {
height: 200px;
width: 200px;background-color: lime;
/*向左浮动*/
float: left;
}
#d3{
height: 200px;
width: 200px;background-color: deepskyblue;
/*向左浮动*/
float: right;
}
</style>
</head>
<body>
<div id="d1">第一个div标签
<div id="d2">内部第一个div标签</div>
<div id="d3">内部第二个div标签</div>
</div>
</body>
</html>
3）解决方法
1.方式一
- 在内部在创建一个子标签，通过固定高度撑起外边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
border: 10px solid red
}
#d2 {
height: 200px;
width: 200px;
background-color: lime;
/*向左浮动*/
float: left;
}
#d3 {
height: 200px;
width: 200px;
background-color: deepskyblue;
/*向左浮动*/
float: right;
}
#d4{
/* 固定高度 */
height: 200px
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</div>
</body>
</html>
2.方式二
- 写div，然后添加clear属性，避免去查找长度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
border: 10px solid red
}
#d2 {
height: 200px;
width: 200px;
background-color: lime;
/*向左浮动*/
float: left;
}
#d3 {
height: 200px;
width: 200px;
background-color: deepskyblue;
/*向左浮动*/
float: right;
}
#d4 {
/* 该标签的左边(地面和空中)不能有浮动元素 */
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.方式三（万能公式）
.clearfix:after {
content: '';
clear: both;
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
border: 10px solid red
}
#d2 {
height: 200px;
width: 200px;
background-color: lime;
/*向左浮动*/
float: left;
}
#d3 {
height: 200px;
width: 200px;
background-color: deepskyblue;
/*向左浮动*/
float: right;
}
.clearfix:after {
content: '';
clear: both;
display: block;
}
</style>
</head>
<body>
<div id="d1" class="clearfix">
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</div>
</body>
</html>
【三】溢出属性
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）解决代码的格式
/*默认溢出可见*/
overflow: visible;
/*溢出不可见*/
overflow: hidden;
/*隐藏且可滚动查看*/
overflow: scroll;
/*自动调整*/
overflow: auto;
3）解决演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#p1 {
height: 200px;
width: 200px;
border: 5px solid red;
/*默认溢出可见*/
/*overflow: visible;*/
/*溢出不可见*/
/*overflow: hidden;*/
/*隐藏且可滚动查看*/
/*overflow: scroll;*/
/*自动调整*/
overflow: auto;
}
</style>
</head>
<body>
<p id="p1">
起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。</p>
<p>起笔描绘山水意，</p>
<p>云淡风轻如诗情。</p>
<p>倾情抒写欢乐悲，</p>
<p>文字流露真我心。</p>
</body>
</html>
4）头像示例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0
}
#d1 {
height: 150px;
width: 150px;
border: 2px solid deeppink;
background-image: url("preview.gif");
background-size: contain;
border-radius: 50%;
overflow: auto;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
【四】定位
1）介绍
-
相对定位（Relative Positioning）
- 相对于在正常文档流中的位置进行定位（相对于标签原来的位置做定位）
- 相对位置会影响元素原本在文档流中的位置，但不影响其他元素的布局
-
绝对位置（Absolute Positioning）
- 相对于最近的非静态定位的父元素进行定位（相对于已经定位过的父标签做定位）
- 绝对位置会脱离文档流，不会占据原本的空间，且不影响其他元素的布局，常用于创建浮动效果或覆盖其他元素
-
固定位置（Fixed Positioning）
- 会相对于浏览器窗口进行定位
- 固定位置的元素会一直保持在屏幕上的固定位置，不会受到页面滚动的影响
-
静态定位
- 所有标签默认都是静态的static，无法改变
2）演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1-1 {
height: 100px;
width: 100px;
background-color: red;
/* 相较于原来的位置从左向右移动50px 如果是负数，方向则相反*/
left: 200px;
/* 相较于原来的位置从上向下移动50px 如果是负数 方向则相反 */
top: 200px;
/*相对位置*/
position: relative;
}
#d2-1 {
height: 100px;
width: 100px;
background-color: darkorange ;
/* 相较于原来的位置从左向右移动50px 如果是负数，方向则相反*/
left: 200px;
/* 相较于原来的位置从上向下移动50px 如果是负数 方向则相反 */
top: 200px;
/*绝对位置*/
position: absolute;
}
#d3-1 {
height: 100px;
width: 100px;
background-color: lime;
border: 5px solid red;
bottom: 50px;
right: 50px;
/*固定位置*/
position: fixed;
}
</style>
</head>
<body>
<div id="d1-1"></div>
<div id="d2-1"></div>
<div id="d3-1"></div>
</body>
</html>
【五】z-index模态框
1）引入
- 动态弹出的分成界面，就是模态框
2）演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{margin: 0}
.middle{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(44,150,99,0.5);
z-index: 99;
}
.outer{
position: fixed;
height: 400px;
width: 600px;
left: 50%;
top: 50%;
background-color: white;
z-index: 100;
margin-left: -200px;
margin-top: -250px;
}
</style>
</head>
<body>
<div>底层</div>
<div class="middle">中层</div>
<div class="outer">外层
<table>
<thead>
<tr>
<th colspan="2" align="center">注册登录页面</th>
</tr>
</thead>
<tbody>
<tr>
<td>用户名：</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td><input type="submit"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
【六】透明度
1）引入
- 不单单可以修改颜色的透明度还可以修改字体的透明度
- rgba 只能修改颜色的透明度
- opacity 不只是能修改颜色还能修改字体的透明度
2）示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#p1 {
background-color: rgba(150, 200, 100, 0.4);
}
#p2 {
background-color: rgb(150, 200, 100);
opacity: 0.4;
}
</style>
</head>
<body>
<p id="p1">001</p>
<p id="p2">002</p>
</body>
</html>