收藏
批改状态：合格
老师批语：css的主要功能是样式与布局, 而布局主要通过浮动与定位, 多多练习
一，理解并写出外边距的三个特征: 同级塌陷,嵌套传递,自动挤压的案例;
当两个盒子上下排列时,外边距会出现塌陷现象,小的会陷到大的里面去,简称:"同级塌陷"
当二个盒子相互潜逃,为父子关系时,给子盒子添加的外边距跑到了父盒子上面去了,这就是外边距的"嵌套传递"
给外边距左侧添加auto,会尽可能将左侧空间分配给盒子左外边距,盒子被挤到最右边，让右边距也自动分配,居然自动居中了，这就是“自动挤压”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style751.css"> <title>外边距规则</title> </head> <body> <div class="box1"></div> <div class="box2"></div> <hr> <div class="box3"> <div class="box4"></div> </div> <hr> <div class="box5"></div>
style751.css
/************同级塌陷************/
.box1 {
width: 200px;
height: 200px;
background-color: red;
}
.box2 {
width: 200px;
height: 200px;
background-color: blueviolet;
}
.box1 {
margin-bottom: 50px;
}
.box2 {
margin-top: 50px;
}
/* 按正常思维,现在二个盒子上下应该有100px外边距,但是页面却未发生变化 */
/* 说明二个盒子之间的外边距仍是50px,肯定有一个外边距没有生效,究竟是哪一个呢? */
/* 现在将box1的margin-bottom改为80px */
.box1 {
margin-bottom: 80px;
}
/* 发现变宽了, 看样子是box1生效了, box2无效 */
/* 再把box2的margin改为100px */
.box2 {
margin-top: 100px;
}
/* 发现上下间距又变宽了,再次检查发现box2的margin生效了,box1的margin失效了 */
/************嵌套传递************/
.box3 {
width: 200px;
height: 200px;
background-color: red;
}
.box4 {
width: 100px;
height: 100px;
background-color: blueviolet;
}
/* 我们的任务是:使box4离box3顶部之间有50px的间距,通过margin-top来实现 */
.box4 {
margin-top: 50px;
}
/* 结果发现不对, 外边距跑到了外部盒子box3上面去了,这就是外边距的"嵌套传递"现象 */
/* 当给一个子盒子添加margin时,这个margin会自动传递到父级盒子上 */
/* 所以,正确的做法是,给父级盒子添加内边距来实现 */
.box4 {
margin-top: 0;
}
.box3 {
padding-top: 50px;
/* 修改盒子高度,将撑开的50px的高度去掉 */
height: 150px;
}
/************自动挤压************/
.box5 {
width: 200px;
height: 200px;
background-color: red;
}
.box5 {
/*margin默认值为: auto*/
/*左侧添加auto,会尽可能将左侧空间分配给盒子左外边距,盒子被挤到最右边*/
/*margin-left: auto;*/
/*让右边距也自动分配, 会出现什么呢, 会自相矛盾吗?不会的*/
/*margin-right: auto;*/
/*居然自动居中了, 这就是互不相让的结果, 达到了平衡,*/
/*因为左右边距的值完全相同,所以可以简写, 因为左右值必须写到第二个参数位置上, 所以这里假定上下为0*/
/*margin: 0 auto;*/
/*或者全部交给浏览器去处理 */
margin: auto;}二，内边距对盒中内容的影响,以及解决的三种方案是什么
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style752.css"> <title>调皮捣蛋的内边距(padding)</title> </head> <body> <!-- 将图片在容器中居中显示 --> <!-- 方法1: 重新设置原盒子的宽度--> <div class="box1"> <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4151170903,256805738&fm=26&gp=0.jpg" alt="哆啦A梦" width="200"> </div> <hr> <!-- 方法2: 宽度分离--> <div class="warp"> <div class="box2"> <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4151170903,256805738&fm=26&gp=0.jpg" alt="哆啦A梦" width="200"> </div> </div> <hr> <!-- 方法3: box-sizing--> <div class="box3"> <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4151170903,256805738&fm=26&gp=0.jpgg" alt="哆啦A梦" width="200"> </div> </body> </html>
style752.css
/*实现图片居中显示*/
/*********************** 方案1 *********************/
.box1 {
/*默认情况下,width是直接使用到盒子中的内容级content*/
width: 300px;
background-color: lightblue;
border: 1px solid black;
}
/*使用padding让图片居中显示*/
/* 容器300*300,图片200*200,最直观的想法是添加50px的内边距 */
.box1 {
padding: 50px;
/* 会发现,内边距会增加盒子填充厚度,将盒子撑大 */
/*如果想保持原来盒子大小,只能手工修改box1的宽高*/
width: 200px;
}
/*********************** 方案2: 宽度分离 *********************/
/* 给box2认一个干爹,添加一个父级盒子wrap, 这时box2就是儿子了, width就有效了*/
/*这是利用于嵌套盒子之间,只有宽度可以继承的特征*/
.warp {
width: 300px;
}
/*.box现在就是wrap的内容*/
.box2 {
padding: 50px;
background-color: lavender;
border: 1px solid black;
}
/*********************** 方案3: box-sizing 盒尺寸 *********************/
/*经过前面学习, 知道了在默认情况下, 宽度是作用到盒中的内容上的*/
/*而一个盒子有content,padding,border,margin四部分组成,所以改变宽度会造成盒子大小不确定*/
/*方案2: 是将width宽度直接作用到了外部盒子上, 而box2此时就自动变成了warp的内容,所以会应用到width*/
.box3 {
width: 300px;
/*让宽度width作用到边框级,作用到内容级仍会撑开盒子的*/
/*box-sizing: content-box;*/
box-sizing: border-box;
background-color: lavenderblush;
border: 1px solid black;
/*内边距不会撑开盒子, 因为宽度作用到了边框级, 与内容无关*/
padding: 50px;
}
/* 总结:
* 第一种方案DOM结构简单,但是要修改原盒子大小
* 第二种方案不需要修改原盒子大小,但需要增加一个容器盒子
* 第三种无疑是首选, 但是不同级别的盒元素,理解起来有困难
* 所以, 各有利弊, 在开发中,根据实际情况进行斟酌
*/三，浮动的实现原理与清除的技巧
实现原理：浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
清除的技巧：添加额外的标签<div style="clear:both;"></div>
四，相对定位: 元素并未脱离文档流,是以元素在文档流中的原始位置为参照物进行定位的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位与相对定位(position:relative)</title> </head> <body> <!-- 相对定位小案例: 在页面中创建一个彩色十字架--> <div class="box1" style="width: 150px; height: 150px;background-color: lightblue;position: relative; left: 150px;"></div> <div class="box2" style="width: 150px; height: 150px;background-color: lightgray;position: relative;"></div> <div class="box3" style="width: 150px; height: 150px;background-color: lightgreen;position: relative; left: 300px;top: -150px;"></div> <div class="box4" style="width: 150px; height: 150px;background-color: lightcoral;position: relative; left: 150px; top: -300px;"></div> <div class="box5" style="width: 150px; height: 150px;background-color: lightpink;position: relative; left: 150px; top: -300px"></div> </body> </html>
绝对定位: 元素脱离文档流重新排列,所有必须要有一个定位父级做为参照物，不论元素之前是什么类型,全部转为块元素,支持宽高
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绝对定位</title> </head> <body> <!-- 相对定位小案例: 在页面中创建一个彩色十字架--> <div class="parent" style="position: relative; border: 1px dashed gray; width: 450px; height: 450px;"> <div class="box1" style="width: 150px; height: 150px; background-color: lightblue; position: absolute; /* 第一个区块只需要右移150px,即可 */ left: 150px;"></div> <div class="box2" style=" width: 150px; height: 150px; background-color: lightgray; position: absolute; /* 第二个区块, left不用设置,只需要top=150px,将它从左上角顶下来即可 */ top: 150px;"></div> <div class="box3" style="width: 150px; height: 150px; background-color: lightgreen; position: absolute; /* 第三个区块向右跨二个区块位置,并向下移一个区块位置 */ left: 300px; top: 150px;"></div> <div class="box4" style="width: 150px; height: 150px; background-color: lightcoral; position: absolute; /* 第四个区块,向右向下各移动一个区块位置 */ left: 150px; top: 150px;"></div> <div class="box5" style=" width: 150px; height: 150px; background-color: lightseagreen; position: absolute; /* 第五个区块,向右移动一个区块位置,向下移动二个区块位置 */ left: 150px; top: 300px;"></div> </div> </body> </html>
五，模仿完成课堂上的二个定位案例:模拟php中文网登陆(遮罩+绝对定位)和固定定位广告的展示方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>遮罩+绝对定位</title> </head> <body style=" margin: 0; background-image:url(https://img.php.cn//upload/image/574/382/346/1535509625681731.jpg); background-size: cover; height: 2000px;"> <!-- 模拟php中文网的登录页面 --> <div class="shade" style=" position: absolute; left: 0;top: 0; width: 100%; height: 100%; background-color: black; opacity: 0.7;"> </div> <div class="login" style=" background-color: white; position: absolute; left: 50%; top: 50%; margin-left: -190px; margin-top: -230px; "> <img src="https://img.php.cn//upload/image/574/382/346/1535509625681731.jpg" alt="" style=" width: 380px; height: 460px;"> </div> <h1>实现广告位</h1> <div class="ads" style=" width: 350px; height: 250px; background-color: lightblue; position: fixed; right: 0; bottom: 0;"> <button onclick="this.parentNode.style.display = 'none'" style="float: right; margin-top: 10px; margin-right: 20px; border: none; background: none; color: red; font-size: 2em;">X</button> <h2>人生的意义是什么？</h2> <h1>怎么实现人生的价值？</h1> </div> </body> </html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
