【8.0】CSS之盒子模型和浮动
【一】盒子模型
【1】什么是盒子模型
- 盒子模型（Box Model）是指在网页设计中，用于描述和布局元素的一种模型。
- 它将每个元素看作是一个具有四个边界的矩形盒子，包括内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。
【2】盒子模型的组成部分
-
内容区域（Content）：
- 盒子的实际内容，如文本、图像等。
-
内边距（Padding）：
- 内容区域与边框之间的空间，用于控制内容与边框之间的距离。
-
边框（Border）：
- 围绕内容区域和内边距的线条，用于给元素添加外观和样式。
-
外边距（Margin）：
- 边框与其他元素之间的空间，用于控制元素与周围元素之间的距离。
【3】快递盒模型
- 以快递盒为例
- 快递盒与快递盒之间的距离(标签与标签的距离,margin外边距)
- 盒子的厚度(标签的边框,border)
- 盒子里面的物体到盒子的距离(内容到边框的距离,padding内边距)
- 物体的大小(内容,content)
| 快递盒组成部分 | 盒子模型 |
|---|---|
| 内部物品 | content(内容) |
| 内部物品与盒子内部的距离 | padding(内边距、内填充) |
| 盒子的厚度 | border\边框 |
| 盒子与盒子之间的距离 | margin(外边距) |
ps:两个标签之间的距离 有时候可以用margin也可以用padding
【4】概述
margin-left: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin: 1px 2px 3px 4px 上 右 下 左
margin: 1px 2px 3px 上 左右 下
margin: 1px 1px 上下 左右
margin: 1px 统一设置一个值
标签的水平居中 可以使用固定搭配
margin: 0 auto;
【5】示例
- 如果想调整标签与标签之间的距离，可以调整margin外边距
- 浏览器会自带 8px 的margin
- 一般我们在学也写页面的时候会先将 body 的margin去掉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
/*margin:0; !* 上下左右全是0 *!*/
/*margin: 12px 10px; !* 第一个参数是上下，第二个参数是左右 *!*/
/*margin: 10px 20px 30px; !* 上 左右 下 *!*/
margin: 10px 20px 30px 60px; /* 上下左右 */
}
#p1 {
border: 1px solid red;
padding: 10px 20px 30px 40px; /* 设置内容距边框距离，规律和margin一样 */
}
</style>
</head>
<body>
<p>这是一个P标签</p>
<p id="p1">这是一个P标签1</p>
</body>
</html>
【二】浮动
【1】浮动的作用
-
浮动是所有网站页面布局必备的 可以将块儿级标签浮动起来脱离正常的文档流
-
是多个块儿级标签可以在一行显示(全部飘在了空中)
-
脱离页面，浮动在页面之上
- 没有块级一说，本身多大，浮起来之后就只能占多大。
-
只要涉及到页面的布局，一般都是用浮动提前规划好
【2】浮动的影响
- 浮动会造成父标签塌陷(类似于将口袋里面的东西拿到了口袋的外面)
浮动的元素有时候也会遮挡住底下的区域 如果区域内有文本内容
那么浏览器会遵循文本内容优先展示的原则 会想法设法让文本展示出来
【3】示例
- 内部元素因为浮动导致了外边框无法框柱内部元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
#d1 {
height: 200px;
width: 200px;
background-color: red;
float: left; /* 向左浮动 */
}
#d2 {
height: 200px;
width: 200px;
background-color: blue;
float: right; /* 向右浮动 */
}
#d3 {
border: 5px solid black;
}
</style>
</head>
<body>
<div id="d3">
<div id="d1">
</div>
<div id="d2">
</div>
</div>
</body>
</html>
【4】解决浮动造成的影响
（1）解决方式一
- 直接写div然后写对应的长宽
- 内部再创建一个子标签，给一个固定高度，撑起外边框
<!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）解决方案二
- 写div然后添加clear属性 避免去查找长宽
<!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 {
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>
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;
}
.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>
（4）提示
- 以后写网页 提前写好上面的代码
- 然后哪个标签塌陷了就给谁添加上clearfix类名即可
- 很多前端页面框架使用的也是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】解决办法
/* overflow: visable 默认是可见，溢出还是展示 */
/*overflow: hidden; !* 溢出部分直接隐藏 *!*/
/*overflow: scroll; !* 字体内容可以滚动 *!*/
overflow: auto; /* 自动 */
<!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="https://tupian.qqw21.com/article/UploadPic/2019-10/2019102320594261909.jpg" alt="">
</div>
</body>
</html>
【四】定位
【1】四种定位方式
（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，无法改变位置
（2）小结
- 相对定位
- 相对于标签原来的位置移动 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>
<a href="" id="back_to_top"></a>
<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"><a href="#back_to_top">回到顶部</a></div>
</body>
</html>
【五】浮动和定位是否脱离文档流
脱离文档流：发生移动后是否还会占有原来的位置
- 浮动
- 相对定位
- 绝对定位
- 固定定位
【1】不脱离文档流
（1）概览
- 相对定位
（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;position: relative;left: 500px;"></div>
<div style="height: 200px;width: 300px; background-color: green"></div>
</body>
</html>
【2】脱离文档流
（1）概览
-
浮动
-
绝对定位
-
固定定位
（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模态框
【0】引入
- 前端界面其实是一个三维坐标系 z轴指向用户
- 动态弹出的分层界面 我们也称之为叫模态框
【1】层级
-
百度登录页面，其实是三层
-
最底部是正常的内容(a=0) - 最远的
-
接着是黑色的透明区(a=99) - 中间的
-
最后是白色的登陆注册区(a=100) - 最远的
-
【2】示例
<!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
【1】引入
- 不单单可以修改颜色的透明度还可以修改字体的透明度
- rgba 只能修改颜色的透明度
- opacity 不只是能修改颜色还能修改字体的透明度
【2】示例
<!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/18036070
