一、内边距
非人为修改，则作用到内容级
会撑大内容
以使图片居中为例，了解padding —— 内边距
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="static/css/style1.css"> <title>调皮捣蛋的内边距(padding)</title> </head> <body> <!-- 将图片在容器中居中显示 --> <!-- 方法1: 重新设置原盒子的宽度--> <div class="box1"> <img src="static/images/girl.jpg" alt="小姐姐" width="200"> </div> <hr> <!-- 方法2: 宽度分离--> <div class="warp"> <div class="box2"> <img src="static/images/girl.jpg" alt="小姐姐" width="200"> </div> </div> <hr> <!-- 方法3: box-sizing--> <div class="box3"> <img src="static/images/girl.jpg" alt="小姐姐" width="200"> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
/*实现图片居中显示*/
/*********************** 方案1 *********************/
.box1 {
/*默认情况下,width是直接使用到盒子中的内容级content*/
width: 300px;
background-color: lightgreen;
border: 1px solid black;
}
/*使用padding让图片居中显示*/
/* 容器300*300,图片200*200,最直观的想法是添加50px的内边距 */
.box1 {
padding: 50px;
}
/* 会发现,内边距会增加盒子填充厚度,将盒子撑大 */
/*如果想保持原来盒子大小,只能手工修改box1的宽高*/
.box1 {
width: 200px;
}
/*********************** 方案2: 宽度分离 *********************/
/* 给box2认一个干爹,添加一个父级盒子wrap, 这时box2就是儿子了, width就有效了*/
.warp {
width: 300px;
}
/*.box现在就是wrap的内容*/
.box2 {
padding: 50px;
background-color: lightblue;
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: lightpink;
border: 1px solid black;
/*内边距不会撑开盒子, 因为宽度作用到了边框级, 与内容无关*/
padding: 50px;
}
/* 总结:
* 第一种方案DOM结构简单,但是要修改原盒子大小
* 第二种方案不需要修改原盒子大小,但需要增加一个容器盒子
* 第三种无疑是首选, 但是不同级别的盒元素,理解起来有困难
* 所以, 各有利弊, 在开发中,根据实际情况进行斟酌
*/运行实例 »
点击 "运行实例" 按钮查看在线实例
二、外边距
常出现问题：
1. 同级塌陷：兄弟标签出现margin谁大展现谁的效果，小的失
2. 嵌套传递：子元素设置外边距传递给了父元素
解决方案：给父元素设置padding，但要注意还原高
3. 自动挤压：左侧（右侧）添加auto,会尽可能将左侧空间分配给盒子左外边距,盒子被挤到最右边（左边），那么margin:auto;就是剧中
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="static/css/style2.css"> <title>捉摸不定的外边距(margin)</title> </head> <body> <!-- 常出现现象： 1.同级塌陷：兄弟标签出现margin谁大展现谁的效果，小的失效 2.嵌套传递：子元素设置外边距传递给了父元素 解决方案：给父元素设置padding，但要注意还原高度 3.自动挤压：左侧（右侧）添加auto,会尽可能将左侧空间分配给盒子左外边距,盒子被挤到最右边（左边） 那么margin:auto;就是剧中 --> <!-- 同级塌陷 --> <div class="box1"></div> <div class="box2"></div> <hr> <!-- 嵌套传递 --> <div class="box3"> <div class="box4"></div> </div> <hr> <!-- 自动挤压 --> <div class="box5"></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
/********** 同级塌陷 **********/
.box1 {
width: 100px;
height: 100px;
background-color: lightblue;
}
.box2 {
width: 100px;
height: 100px;
background-color: lightcoral;
}
/* .box1 添加下外边距 */
.box1 {
margin-bottom: 30px;
}
/* .box2 添加上外边距 */
.box2 {
margin-top: 30px;
}
/* 按正常思维,现在二个盒子上下应该有60px外边距,但是页面却未发生变化 */
/* 说明二个盒子之间的外边距仍是30,肯定有一个外边距没有生效,究竟是哪一个呢? */
/* 现在将box1的margin-bottom改为50px */
.box1 {
margin-bottom: 50px;
}
/* 发现变宽了, 看样子是box1生效了, box2无效 */
/* 再把box2的margin改为80px */
.box2 {
margin-top: 80px;
}
/* 发现上下间距又变宽了,再次检查发现box2的margin生效了,box1的margin失效了 */
/* 从而得出一个结论: 当二个盒子上下排列时,外边距会出现塌陷现象,小的会陷到大的里面去,简称:"同级塌陷" */
/* 下面演示当二个盒子相互潜逃,为父子关系时,设置了margin会出现哪些问题? */
/********** 嵌套传递 **********/
.box3 {
width: 200px;
height: 200px;
background-color: lightblue;
}
.box4 {
width: 100px;
height: 100px;
background-color: lightcoral;
}
/* 我们的任务是:使box4离box3顶部之间有50px的间距,通过margin-top来实现 */
.box4 {
margin-top: 50px;
}
/* 结果发现不对, 外边距跑到了外部盒子box3上面去了,这就是外边距的"嵌套传递"现象 */
/* 当给一个子盒子添加margin时,这个margin会自动传递到父级盒子上 */
/* 所以,正确的做法是,给父级盒子添加内边距来实现 */
/* 先复位 */
.box4 {
margin-top: 0;
}
.box3 {
padding-top: 50px;
/* 修改盒子高度,将撑开的50px的高度去掉 */
height: 50px;
}
/* 下面演示margin的自动挤压,这是布局中使用非常广泛 */
/********** 自动挤压 **********/
.box5 {
width: 100px;
height: 100px;
background-color: lightcoral;
}
.box5 {
/*margin默认值为: auto*/
/*左侧添加auto,会尽可能将左侧空间分配给盒子左外边距,盒子被挤到最右边*/
/*margin-left: auto;*/
/*如果我让右边距也自动分配, 会出现什么呢, 会自相矛盾吗?不会的*/
/*margin-right: auto;*/
/*居然自动居中了?为什么, 这就是互不相让的结果, 达到了恐怖平衡,就像单行道上的二个车互不相让*/
/*因为左右边距的值完全相同,所以可以简写, 因为左右值必须写到第二个参数位置上, 所以这里假定上下为0*/
/*margin: 0 auto;*/
/*或者干脆全部交给浏览器去处理吧, 咱们不管了*/
margin: auto;
}
/* 这个"自动挤压"使盒子居中对齐的特征,在页面布局中应用非常多,非常重要,好好理解 */运行实例 »
点击 "运行实例" 按钮查看在线实例
