黑马程序员技术交流社区

标题: 学习笔记——第3节盒模型的组成 [打印本页]

作者: Zy_阿匠 时间: 2017-1-3 16:13
标题: 学习笔记——第3节盒模型的组成
本帖最后由 Zy_阿匠于 2017-1-3 16:21 编辑

第一部分
第1课时
1、页面中所有的元素都是一个一个的矩形盒子，每一个矩形盒子都由内容、内填充、边框及
   外边距组成
2、他们属性如下：
   内填充属性为padding，为四个方向，padding-top、padding-right、padding-bottom、padding-left
   边框属性为border，也有四个方向，即：border-top、border-right、border-bottom、border-left
   外边距属性为margin，四个方向属性即：margin-top、margin-right、margin-bottom、margin-left
3、盒子元素可以设置宽高，实际开发中为每个元素设置的宽高，实际就是元素内容的宽高，并不是
   盒子的宽高；要计算盒子的宽高，还需加上padding和border的值

第2课时
1、在为页面元素设置背景色时，背景色是穿透padding的，并且也会对border产生影响的
2、目前，主流浏览器都是支持html5,并且在页面实际开发中，一定要保证文档头部信息中
   文档声明一定要时html5标准的
第3课时
1、边框的属性设置，由样式、宽度及颜色组成，其中样式的属性值有：solid、none、double、dotted、dashed
   设置某一边的属性基本语法为：border-top-style: solid; border-top-width: 12px;border-top-color: red;
   *这里注意，一定要设置style，才会显示color及width
2、边框某一遍属性的合写方式为：border-top: 12px solid red;
3、边框四个边的属性值书序依次为：上、右、下、左，即border-width:12px 13px 14px 15px
   边框所有边合写方式为：border: 12px solid red;
第4课时
盒子模型的应用案例：圣诞树

第二部分
第1课时
1、盒子模型的外边距属性为margin，其也有四个方向，分别为margin-top、margin-right、margin-bottom、margin-left
2、外边距属性的合写为margin: 12px 13px 14px 15px，四个属性值分别代表着margin的四个方向
3、emmet的语法，.box$*n，其代表着快速生成n个class为box的div，其中$代表盒子编号

第2课时
1、实际开发中所设置的width及height是指其内容的宽高，这里的值并不包括盒子的宽高
2、要计算盒子所占空间的宽高，还需要加上其padding及border的值，即：
   盒子的宽度=左border+左padding+内容的宽度+右padding+右border

第3课时
——两个盒子margin合并第一种情况：
1、当两个块级元素垂直相邻时，他们的外边距会合并！并且上面元素具有margin-bottom,下面元素具有margin-top，
两个块级元素的垂直距离是其中较大者；例如：上面元素的margin-bottom：30px;下面元素的margin-top: 20px;
两个块级元素的垂直距离是30px
2、这是块级元素合并的情况之一，实际开发中，页面布局此种情况非常常见，一定要注意

第4课时
——两个盒子margin合并第二种情况：
当块级元素嵌套时，如果父元素没有设置padding-top及border-top时，其子元素的margin-top会与其父元素的
Margin-top进行合并

案例-圣诞树.png (283.99 KB, 下载次数: 14)

案例-盒子.png (252.63 KB, 下载次数: 13)

作者: 烟雨清寒时 时间: 2017-1-3 23:02
楼主厉害啊厉害

作者: 浮世散人 时间: 2017-1-5 01:12
很不错的东西，很值得分享

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2