【一】盒子模型
【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>