长度单位 盒子模型
一、长度单位
长度单位 | 解析 |
像素 |
① 屏幕(显示器)实际上是由一个个的小点点构成的 ② 不同的屏幕像素大小是不同,像素越小的屏幕显示的效果越清晰 ③ 相同像素在不同的设备下显示效果不同 |
百分比 | 设置百分比可以使子元素跟随父元素的改变而改变 |
em |
① em是相对于元素的字体大小来计算的 ② 1 em = 1 font-size(一般为16px) ③ em会根据字体大小的改变而改变 |
rem | rem是相对于根元素的字体大小来计算的 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>长度单位</title> <style> .box1{ width: 200px; height: 200px; background-color: orange; } /* 百分比的使用,可以使其随着父元素大小的改变而发生相对应的改变 */ .box2{ width: 50%; height: 20%; background-color: green; } .box3{ width: 20em; /* 相对于该元素的字体大小而言的,即20*16px */ height: 20em; background-color: yellow; font-size: 20px; /* 宽高都为20*20px */ } .box4{ width: 20rem; /* 相对于根元素的字体大小而言的 */ height: 20rem; background-color: pink; font-size: 20px; /* 大小没有发生变化 */ } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> <div class="box3"> <p>春宵一刻值千金,花有清香月有阴。</p> </div> <div class="box4"> <p>春宵一刻值千金,花有清香月有阴。</p> </div> </body> </html>
二、盒子模型(盒模型/框模型/box model)
2.1 标准盒子模型
2.1.1 border 边框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border</title> <style> /* border的各个属性: border-width - border-width: 2px 4px 1px 8px; 上 右 下 左 - border-width: 2px 4px 1px; 上 左右 下 - border-width: 2px 4px; 上下 左右 border-color border-style - solid 单实线 - dotted 圆点虚线 - double 双实线 - dashed 线性虚线 border的不同方位: border-top border-right border-bottom border-left */ .box1{ width: 200px; height: 200px; background-color: #1065ff73; border: 5px solid #22ff9994; } </style> </head> <body> <div class="box1"></div> </body> </html>
2.1.2 padding 内边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>padding</title> <style> /* padding的大小了border-width的写法类似 */ .box1{ width: 200px; height: 200px; background-color: #1065ff73; /* padding: 10px; */ /* padding: 10px 20px; */ /* padding: 10px 20px 5px; */ /* padding: 10px 3px 5px 20px; */ } </style> </head> <body> <div class="box1"></div> </body> </html>
2.1.3 margin 外边距 (与padding类似)
2.1.3.1 垂直外边距折叠(重叠)
① 产生条件:相邻垂直方向的外边距会发生重叠现象
② 兄弟元素
- 如果相邻的外边距都为正值,取两者的较大值
- 如果相邻的外边距一正一负,取两者的和
- 如果相邻的外边距都为负值,取两者绝对值的较大值
③ 父子元素
- 父子元素相邻的外边距,子元素的会传递给父元素(上边距)
- 父子的折叠会影响页面,必须进行修改(方法有四种——③使用伪元素和设置display: table; ④定位)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>垂直外边距的重叠</title> <style> .box1{ width: 200px; height: 200px; background-color: #1065ff73; margin-bottom: 150px; } .box2{ width: 200px; height: 200px; background-color: red; /* margin-top: 100px; */ margin-top: -100px; } /* .box3{ width: 100px; height: 100px; background-color: green; margin-top: 20px; 发生父子元素向下移动 } */ /* 方案一: .box1{ width: 200px; height: 199px; background-color: #1065ff73; margin-bottom: 150px; border-top: 1px solid #1065ff73; } .box3{ width: 100px; height: 99px; background-color: green; margin-top: 99px; } */ /* 方案二: .box1{ width: 200px; height: 100px; background-color: #1065ff73; margin-bottom: 150px; padding-top: 100px; } .box3{ width: 80px; height: 100px; background-color: green; } */ </style> </head> <body> <div class="box1"> <div class="box3"></div> </div> <div class="box2"></div> </body> </html>
2.2 盒子的水平布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>padding</title> <style> /* 一个元素在其父元素中,水平布局必须满足以下等式: margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容区的宽度(必须满足) 0 + 0 + 0 +200 + 0 + 0 +0 = 800 0 + 0 + 0 +200 + 0 + 0 +600 = 800 100 + 0 + 0 +200 + 0 + 0 +400 = 800 100 + 0 + 0 +200 + 0 + 0 +500 = 800 - 以上等式必须满足,如果相加结果使等式不成立,则称为过渡约束,则等式会自动调整 - 调整情况: 如果这七个值中没有为 auto 的情况,则浏览器会自动调整margin-right - 这七个值中有三个值若设置为auto width margin-left margin-right - 如果某个值为auto,则会自动调整为auto的那个元素以使等式成立 0 + 0 + 0 + auto + 0 + 0 + 0 = 800 auto = 800 0 + 0 + 0 + auto + 0 + 0 + 200 = 800 auto = 600 200 + 0 + 0 + auto + 0 + 0 + 200 = 800 auto = 400 auto + 0 + 0 + 200 + 0 + 0 + auto = 800 auto = 300 - 如果将一个宽度和一个外边距设置为auto,则宽度调整到最大,外边距为0 - 如果将三个值都设置为auto,则外边距都是0,宽度调整到最大 - 如果将两个外边距设置为auto,宽度固定值,将会将外边距设置为相同的值 - width:xxx px; margin: 0 auto; (水平居中) */ .box1{ width: 100px; height: 50px; background-color: #1065ff73; } .box2{ width: 50px; height: 50px; background-color: red; margin-left: auto; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html>
2.3 盒子垂直方向的布局
问题:溢出(父元素设置overflow)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>垂直方向的布局</title> <style> /* 子元素在父元素中会出现移除现象。 解决办法:在父元素上设置overflow - 可选值: - visible:默认值,子元素会溢出,在父元素外部显示。 - hidden:溢出内容将会被裁剪,不会显示。 - scroll:生成两个滚动条,通过滚动条来查看完整内容。 - auto:根据需要生成滚动条 也可以通过水平和垂直方向单独设置: overflow-x overflow-y */ .box1{ width: 300px; height: 100px; background-color: green; /* overflow: visible; */ /* overflow: hidden; */ /* overflow: scroll; */ /* overflow: auto; */ /* overflow-x: hidden; */ /* overflow-y: scroll; */ } .box2{ width: 200px; height: 200px; background-color: red; } </style> </head> <body> <div class="box1"> <div class="box2">1、要相信大自然的声音是美妙的,我听见了春天花儿开放的声音夏天蛐蛐歌唱的声音,秋天大雁南迁时的鸣叫的声音和冬天风儿呼呼刮过的声音,不同的时间大自然总会给我们不同的声音,让我们无时无刻都在享受着美妙的大自然的声音。 2、学会懂得,默默陪伴,无需海誓山盟,却也能相伴永远;有一种懂得,即使不言不语,却总会暖到落泪。懂得,是一种幸福。默默相伴,寂然不语,静静温暖,悄悄落泪。人的一生,都在寻找一个知音,一个与自己拥有着一模一样灵魂的人。高山流水,一曲相知。魂交集,心贴近,情相系,爱皈依。看不见,摸不着,却浓浓牵挂。不言不语,即已心灵相通。没有誓言,不要承诺,却日日相伴,静静相守。 3、我们的生命是一条美丽而曲折的幽径,路旁有妍花的丽蝶,累累的美果,但我们很少去停留观赏,或咀嚼它,只一心一意地渴望赶到我们幻想中更加美丽的豁然开朗的大道。然而在前进的程途中,却逐渐树影凄凉,花蝶匿迹,果实无存,最后终于发觉到达一个荒漠。 4、月儿被朦胧的薄云遮住了,模糊的月光也是朦胧的。薄云似是一层层洁白无暇的轻纱在夜空飘浮,成为夜空的天然裙摆。像是被风儿吹动,“裙摆”似水的荡漾。闪烁着,躲在薄云后的璀璨的星星,一颗颗散了出来。你眨一下眼睛,我眨一下眼睛,卖弄着自己的眼睛是那么的玲珑剔透。是水晶?不,应该是镶在夜空的钻石! 5、真正美丽的生命执著地追求着真善,它不会趋炎附势地扭曲自己的形象,涂改自己灵动的线条,更不会让自己美丽的底色染上尘污。除非用烈火将其燃为灰烬,使之化为尘埃,否则,美丽的生命就像一条清澈的小溪,永远百折不回、乐观坚强地奔向大海,直到最后一滴。 6、渐渐的天凉了,树叶的色变得快,干得快,掉得也快。裸露的大地,深浅不一的展现着土黄,褐黄,黑黄。上面点缀着荒草,茬梗,静悄悄的。秋风起了,在旷野上无遮拦的刮着,卷起的黄烟在地陇上回旋,枯枝败叶天上地下的碰撞。看得见,地皮上匍匐着最后的星点绿意,已经发黑定影了,又一阵风刮来,吹嘣了角质草芥,绒绒的籽絮瞬时飘散,荡起了一溜白雾。 7、远处的河岸上,粉红色的桃花,雪白的梨花,开始缀满了花蕾,它们招引来一群群蜜蜂在上面飞舞着;柳树发出嫩绿的新芽,开始舒展着她那长长的辫子,在春风中摇摆着;柳树旁边的小草长得嫩绿嫩绿的,它们正在为长得茂盛而努力着,正在为长成一片“绿海”而奋斗着;在未来的“绿海”中,还有几朵野花在“海”中绽放了,有白的、黄的、粉红色的…… 8、离别的那日,夕阳残照,如血嫣红。漠然回望,我宿命的悬崖边,是一座枯萎的空城,城墙上长满荒草,如一滴凄清的泪,悬挂在宿命的指尖。曾经祥和的幸福美满,如今在面前,已经碎裂成云烟。天空退却了亘久的蔚蓝,星辰开始渐次陨落。那一年,繁华落尽,满目尽是凄凉的荒芜。也许,我这一生,注定要以孤单来承兑对你的所有幻想。</div> </div> </body> </html>