【一】盒子模型
【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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
width: 200px;
height: 200px;
background: bisque;
border:2px solid pink;
margin-bottom: 5px;
margin-left: 10px;
margin-right: 15px;
margin-top: 20px;
}
#d2{
width: 200px;
height: 200px;
background: coral;
border: 2px solid aqua;
/*margin: 5px;*/
/*margin: 5px 10px;*/
margin: 5px 10px 15px;
/*margin: 5px 10px 15px 20px;*/
}
/*body{*/
/* margin: 0;*/
/*}*/
</style>
</head>
<body>
<div id="d1">
君不见黄河之水天上来
</div>
<div id="d2">
奔流到海不复回
</div>
<p>
君不见高堂明镜悲白发
</p>
<span>
朝如青丝暮成雪
</span>
<span>
人生得意须尽欢
</span>
</body>
</html>
【二】浮动
【1】浮动的作用
-
浮动是所有网站页面布局必备的 可以将块儿级标签浮动起来脱离正常的文档流
-
使多个块儿级标签可以在一行显示(全部飘在了空中)
-
脱离页面，浮动在页面之上
-
没有块级一说，本身多大，浮起来之后就只能占多大。
-
-
只要涉及到页面的布局，一般都是用浮动提前规划好
【2】浮动的影响
-
浮动会造成父标签塌陷(类似于将口袋里面的东西拿到了口袋的外面)
-
浮动的元素有时候也会遮挡住底下的区域 如果区域内有文本内容
-
那么浏览器会遵循文本内容优先展示的原则 会想方设法让文本展示出来
【3】示例
-
内部元素因为浮动导致了外边框无法框住内部元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
width: 200px;
height: 200px;
background-color: pink;
float: left; /* 向左浮动 */
}
#d2{
width: 200px;
height: 200px;
background-color: coral;
float: right; /* 向右浮动 */
}
</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>
#d3{
border: 4px solid blue;
}
#d1 {
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
#d2{
width: 200px;
height: 200px;
background-color: coral;
float: right;
}
#d4{height: 100px;}
</style>
</head>
<body>
<div id="d3">
<div id="d1"></div>
<div id="d2"></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;}
#d3{
border: 4px solid blue;
}
#d1 {
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
#d2{
width: 200px;
height: 200px;
background-color: coral;
float: left;
}
#d4{
clear: left; /* 该标签的左边(地面和空中)不能有浮动元素 */
clear: both;/* 该标签的左右两边(地面和空中)不能有浮动元素 */
}
</style>
</head>
<body>
<div id="d3">
<div id="d1"></div>
<div id="d2"></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;}
#d3{
border: 4px solid blue;
}
#d1 {
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
#d2{
width: 200px;
height: 200px;
background-color: coral;
float: right;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div id="d3" class="clearfix">
<div id="d1"></div>
<div id="d2"></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 coral;
}
</style>
</head>
<body>
<p id="p1">
豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。
时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。
披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。
遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。四美具，二难并。穷睇眄于中天，极娱游于暇日。天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。关山难越，谁悲失路之人？萍水相逢，尽是他乡之客。怀帝阍而不见，奉宣室以何年？
嗟乎！时运不齐，命途多舛。冯唐易老，李广难封。屈贾谊于长沙，非无圣主；窜梁鸿于海曲，岂乏明时？所赖君子见机，达人知命。老当益壮，宁移白首之心？穷且益坚，不坠青云之志。酌贪泉而觉爽，处涸辙以犹欢。北海虽赊，扶摇可接；东隅已逝，桑榆非晚。孟尝高洁，空余报国之情；阮籍猖狂，岂效穷途之哭！
勃，三尺微命，一介书生。无路请缨，等终军之弱冠；有怀投笔，慕宗悫之长风。舍簪笏于百龄，奉晨昏于万里。非谢家之宝树，接孟氏之芳邻。他日趋庭，叨陪鲤对；今兹捧袂，喜托龙门。杨意不逢，抚凌云而自惜；钟期既遇，奏流水以何惭？
呜乎！胜地不常，盛筵难再；兰亭已矣，梓泽丘墟。临别赠言，幸承恩于伟饯；登高作赋，是所望于群公。敢竭鄙怀，恭疏短引；一言均赋，四韵俱成。请洒潘江，各倾陆海云尔：
滕王高阁临江渚，佩玉鸣鸾罢歌舞。
画栋朝飞南浦云，珠帘暮卷西山雨。
闲云潭影日悠悠，物换星移几度秋。
阁中帝子今何在？槛外长江空自流。
</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 coral;
/* overflow: visable 默认是可见，溢出还是展示 */
/*overflow: hidden; !* 溢出部分直接隐藏 *!*/
overflow: scroll; /* 字体内容可以滚动 */
/*overflow: auto; !* 自动 *!*/
}
</style>
</head>
<body>
<p id="p1">
豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。
时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。
披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。
遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。四美具，二难并。穷睇眄于中天，极娱游于暇日。天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。关山难越，谁悲失路之人？萍水相逢，尽是他乡之客。怀帝阍而不见，奉宣室以何年？
嗟乎！时运不齐，命途多舛。冯唐易老，李广难封。屈贾谊于长沙，非无圣主；窜梁鸿于海曲，岂乏明时？所赖君子见机，达人知命。老当益壮，宁移白首之心？穷且益坚，不坠青云之志。酌贪泉而觉爽，处涸辙以犹欢。北海虽赊，扶摇可接；东隅已逝，桑榆非晚。孟尝高洁，空余报国之情；阮籍猖狂，岂效穷途之哭！
勃，三尺微命，一介书生。无路请缨，等终军之弱冠；有怀投笔，慕宗悫之长风。舍簪笏于百龄，奉晨昏于万里。非谢家之宝树，接孟氏之芳邻。他日趋庭，叨陪鲤对；今兹捧袂，喜托龙门。杨意不逢，抚凌云而自惜；钟期既遇，奏流水以何惭？
呜乎！胜地不常，盛筵难再；兰亭已矣，梓泽丘墟。临别赠言，幸承恩于伟饯；登高作赋，是所望于群公。敢竭鄙怀，恭疏短引；一言均赋，四韵俱成。请洒潘江，各倾陆海云尔：
滕王高阁临江渚，佩玉鸣鸾罢歌舞。
画栋朝飞南浦云，珠帘暮卷西山雨。
闲云潭影日悠悠，物换星移几度秋。
阁中帝子今何在？槛外长江空自流。
</p>
</body>
</html>
【3】头像案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
#d1{
width: 100px;
height: 100px;
border: 3px solid cyan;
background-image: url("1.png");
margin: 0 auto;
background-repeat: repeat;
background-size: contain;
overflow:auto;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="d1">
<img src="1.png" 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: coral;
left: 50px;/* 相较于原来的位置从左向右移动50px 如果是负数，方向则相反*/
top: 50px;/* 相较于原来的位置从上向下移动50px 如果是负数 方向则相反 */
/*!*position: static; *! 默认是 static 无法修改位置*/
/*position: 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;
}
#d1{
height: 100px;
width: 200px;
background-color: coral;
position: relative;/* 从静态标签变为已经移动过的标签 */
}
#d2{
height: 200px;
width: 400px;
background-color: pink;
position: absolute; /* 绝对定位 */
left: 220px;
top: 110px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
</body>
</html>
【4】固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#b{
position: fixed;/* 写了fixed后，接下来的定位就是依据浏览器窗口 */
bottom: 10px;
right: 20px;
height: 50px;
width: 80px;
background-color: cyan;
border: 2px solid hotpink;
}
</style>
</head>
<body>
<a href="" id="back"></a>
<div style="height: 500px;background-color: coral"></div>
<div style="height: 500px;background-color: gold"></div>
<div style="height: 500px;background-color: pink"></div>
<div id="b"><a href="#back">回到顶部</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模态框
【1】引入
-
前端界面其实是一个三维坐标系 z轴指向用户
-
动态弹出的分层界面 我们也称之为叫模态框
【2】层级
-
百度登录页面，其实是三层
-
最底部是正常的内容(a=0) - 最远的
-
接着是黑色的透明区(a=99) - 中间的
-
最后是白色的登陆注册区(a=100) - 最远的
-
【3】示例
-
z-index : 控制当前页面的权重，数字越大权重越高
<!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>
.font_both {
font-size: 40px;
font-weight: bold;
}
#p1 {
/* 可以修改颜色的透明度 但是他不能让字体变透明 */
background-color: rgba(255, 255, 255, 0.4);
}
#p2 {
background-color: rgb(255, 255, 255);
/* 既让颜色 又让字体都变透明 */
opacity: 0.4;
}
</style>
</head>
<body>
<p class="font_both" id="p1"> gdy </p>
<p class="font_both" id="p2"> hyt </p>
</body>
</html>
1284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
