黑马程序员网站WEB前端教程：04CSS进阶笔记.docVIP

传智播客 前端与移动开发学院 前端开发工程师、移动HTML5开发工程师、全栈开发培训 传智播客 前端与移动开发学院 第 PAGE \* MERGEFORMAT 第 PAGE \* MERGEFORMAT 22 页 CSS3进阶课程笔记  目录 TOC \o 1-3 \h \u HYPERLINK \l _Toc3967 目录 PAGEREF _Toc3967 2 HYPERLINK \l _Toc23241 1.1 CSS盒模型 PAGEREF _Toc23241 3 HYPERLINK \l _Toc22719 1.2 边框 PAGEREF _Toc22719 5 HYPERLINK \l _Toc4622 1.3 内边距 PAGEREF _Toc4622 8 HYPERLINK \l _Toc5246 1.4 外边距 PAGEREF _Toc5246 8 HYPERLINK \l _Toc27207 1.5 外边距合并 PAGEREF _Toc27207 8 CSS盒模型 网页中所有的元素都是矩形的，所以可以看出一个个盒子。 网页由多个盒子组成。 盒子：边框+内边距+内容区域+外边距组成。 IE6的盒模型的bug：背景色不能穿透 边框。 而且如果不设置争取的doctype的话，ie6显示的盒子也不是标准的盒子。 边框 边框可以被背景色穿透，边框包括三部分可以进行设置：边框的宽度、边框的颜色、边框的样式。 可以分别分开设置，也可以进行合写进行统一设置。所有的边框相关设置在如下的代码中： !DOCTYPE html html lang=en head meta charset=UTF-8 title02CSS设置盒子边框/title style .box { height: 200px; width: 200px; background-color: green; /*设置上边框的宽度*/ border-top-width: 20px; /*设置上边框的颜色*/ border-top-color: red; /*设置上边框的样式： 虚线、实线、点线..*/ border-top-style: double; border-bottom-color: yellowgreen; border-bottom-width: 5px; border-bottom-style: solid; /*边框的样式设置也可以进行合写*/ /*border-top: 宽度 样式 颜色;*/ border-left: 5px solid blue; /*可以用一行css设置上下左右所有的边框的样式*/ border: 10px dashed blue; } /style /head body div class=box /div /body /html 去掉图片的边框的写法：（在某些老的浏览器中图片是默认有边框） /* 去掉默认的边框 ，兼容性最好的写法是*/ border: 0 none; 内边距 内边距是设置盒子与子盒子之间的距离。 Pading: 10px; 设置上下左右都是10px的内边距。 Padding： 10px 12px; 设置上下是10培训的宽度，左右是12像素的宽度。 Pading： 10px 12px 13px 14px; // 分别设置的是 上 右 下 左 如果设置三个值： 上 左右 下 外边距 外边距设置兄弟元素之间的距离。 Margin的设置跟padding的一样。 Margin： 0 auto; 可以让 块级元素水平的居中。 原理： auto是设置外边距自动赋值。如果左右都是auto的时候，会把盒子所在行剩余的宽度除以2，然后分别赋值给左右的magin值，自然就会让盒子居中显示了。 行内元素的margin（padding）只能在水平方向起作用。垂直方向不起作用。 外边距合并 第一种外边距合并的情况： 当两个块级元素，上面块级元素拥有下外边距，下面的块级元素拥有上外边距的时候。两个盒子上下的距离会取 两个边距的最大值，而不是把两个盒子的边距进行加和处理。 第二种外边距合并的情况： 当块级元素进行嵌套的时候，如果父盒子没有设置上边框和上内边距的话，子盒子的上外边距和 复盒子的上外边距会进行合并。 浮动 标准流 标准流就是浏览器默认布局的方式，也就是从上往下，从左向右的默认的排班布局的方式。 浮动布局方式 浮动的本质：就是解决图片和文字并排的格式问题。 元素浮动后，会脱离标准流