-
1 盒子模型扩展
-
2 视频介绍
盒子模型
盒子的概念
1. 页面中的每一个标签,都可看做是一个 “盒子” ,通过盒子的视角更方便的进行布局
2. 浏览器在渲染(显示) 网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称之为盒子
盒子模型：
CSS中规定每个盒子分别由：
内容区域(content)、
内边距区域(padding)、
边框区域(border)、
外边距区域(margin) 构成,这就是盒子模型
<style> /* 纸箱子,填充泡沫 */ div { width: 300px; height: 300px; background-color: pink; /* 边框线 == 纸箱子 */ border: 1px solid #000; /* 内边距 == 填充泡沫: 出现在内容和盒子直接边缘 */ padding: 20px;
/* 外边距：出现在两个盒子之间,出现在盒子的外面 */ margin: 50px; } </style> |
盒子模型的浏览器效果
浏览器效果介绍：用谷歌浏览器检查 蓝色正方形是宽高，绿色是内边距，黄色是外边距
盒子模型- 内减模式
需求：盒子尺寸300*300,背景粉色,边框10px实线黑色,上下左右20px的内边框,如何完成?
解决方法一：手动内减
操作：自己计算多余大小,手动在内容中减去
缺点：项目中计算量大小,很麻烦
解决方法二：自动内减
操作：给盒子设置属性 box-sizing:border-box;即可
优点：浏览器会自动计算多余大小,自动在内容中减去
<style> div{ width: 100px; height: 100px; background: #FCB5B6; border: 10px solid #000; padding: 20px;
/*变成CSS3的盒子模型，加了border和padding不需要手动减法*/ box-sizing: border-box; } </style> |
盒子模型- 版心居中
<style> div { width: 1000px; height: 300px; background-color: pink; margin: 0 auto; } </style> |
盒子模型- 外边距合并问题
外边距折叠现象-合并现象
场景：垂直布局 的 块级元素, 上下的margin会合并
结果：最终两者距离选取margin的最大值
解决方法：只给其中一个合作设置margin即可
<style> div { width: 100px; height: 100px; background-color: pink; }
.one { /* margin-bottom: 50px; */ margin-bottom: 60px;
}
.two { margin-top: 50px; } </style> |
盒子模型- 外边距塌陷问题
外边距折叠现象-塌陷现象
场景：互相嵌套 的 块级元素,子元素的 margin-top 会作用在父元素上
结果：导致父元素一起往下移动
解决方法：
1. 给父元素设置border-top 或者 padding-top (分隔父子元素的margin-top)
2. 给父元素设置overflow:hidden
3. 转换成行内块元素
4. 设置浮动
<style> .father { width: 300px; height: 300px; background-color: pink; /* padding-top: 50px; */
/* 如果设计稿没有border,不能使用这个解决方法*/ /* border: 1px solid #000; */
/* 给父元素设置overflow:hidden */ /* overflow:hidden; */
/*3. 转换成行内块元素 */ /* display: inline-block; */
/*4. 设置浮动 */ float: left; }
.son { width: 100px; height: 100px; background-color: skyblue; margin-top: 50px; } </style> |
盒子模型- 行内元素的垂直内外边距问题
html行内元素有：a、b、u、span、img、input、strong、select、sub、sup、label、em、button、textarea、tt、var、samp、br、cite、code、font、strike等等。
场景：行内元素使用内外边距来改变位置
结果：行内元素垂直位置无法改变，只生效水平位置的改变
解决方法：1. 转换为别的显示模式
转换为块元素：display: block;
转换为行内元素：display: inline;
转换为行内块元素：display: inline-block;
2. 设置行高来改变垂直位置
<style> body { background-color: skyblue; } span { /* margin: 100px; padding: 100px; */
/* 不转显示模式,加行高就能使它垂直方向变动 */ line-height: 100px; } </style> </head>
<body> <!-- 行内元素 内外边距 margin padding -->
<!-- 行内元素如果想要通过margin或padding改变行内标签的垂直位置,无法生效，只生效水平位置 --> <!-- 行内标签的margin-top和bottom 不生效 --> <!-- 行内标签的padding-top或bottom 不生效 --> |
