简单的网页制作-盒模型.pdfVIP

简单的⽹页制作-盒模型 1. 划分好区域，编写⼀个html 框架 !DOCTYPE html html head lang=en meta charset=UTF-8 title/title link rel=stylesheet href=../css/reset.css/ link rel=stylesheet href=../css/boxmodle.css/ /head body divCSS 盒⼦模型/div article header p⽹页设计中常听的属性名：内容(content) 、填充(padding) 、边框(border) 、边界(margin) ， CSS 盒⼦模式都具备这些属性。/p p 这些属性我们可以⽤⽇常⽣活中的常见事物 —— 盒⼦作⼀个⽐喻来理解，所以叫它盒⼦模式。/p pCSS 盒⼦模型就是在⽹页设计中经常⽤到的CSS 技术所使⽤的⼀种思维模型。/p /header h1 原理/h1 p 先说说我们在⽹页：内容(content) 、填充(padding) 、边框(border) 、边界(margin) ， CSS 盒⼦模式都具备这些属性。/p p 这些属性我们可以把它转移到我们⽇常⽣活中的盒⼦（箱⼦）上来理解，⽇常⽣活中所见的盒⼦也就是能装东西的⼀种箱⼦，也具有这些属性，所以叫它盒⼦模式。 /p h1 特点/h1 p 想象⼀个盒⼦，它有：外边距（margin ）、边框（border ）、内边距（padding ）、内容（content ）四个属性；/p p 让我们俯视这个盒⼦，它有上下左右四条边，所以每个属性除了内容（content h1 结构/h1 p 内容（CONTENT ）就是盒⼦⾥装的东西；/p p ⽽填充(PADDING) 就是怕盒⼦⾥装的东西（贵重的）损坏⽽添加的泡沫或者其它抗震的辅料；/p p 边框(BORDER) 就是盒⼦本⾝了；⾄于边界(MARGIN) 则说明盒⼦摆放的时候的不能全部堆在⼀起，要留⼀定空隙保持通风，同时也为了⽅便取出。在⽹页设计上，内容常指⽂字、图⽚等元素，但是也可以是⼩盒⼦（DIV 嵌套），与现实⽣活中盒⼦不同的是， p 填充只有宽度属性，每个HTML 标记都可看作⼀个盒⼦；/p footer p内容来源：a href=CSS 盒⼦模型-百度百科/a/p p作者：百度百科/p /footer /article /body /html 2. 编写css 规则 body{ padding: 20px 50px; background