CSS(盒子模型)

《网站设计》CSS的盒子模型电子信息学院吴克文CSS的盒子模型盒子模型是CSS的基石之一，它指定元素如何显示以及（在某种程度上）如何相互交互页面上的每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容、填充、边框和边界组成。网页就是由许多个盒子通过不同的排列方式（上下排列，并列排列，嵌套排列）堆积而成。电子信息学院吴克文CSS的盒子模型电子信息学院吴克文CSS的盒子模型每个HTML元素都可以看作是一个装了东西的盒子盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其它盒子之间，还有边界(magin),如图所示默认情况下盒子的边框是无，背景色是透明，所以我们在默认情况下看不到盒子box_model.html电子信息学院吴克文contentpadding-toppadding-bottompadding-leftpadding-rightborder-topborder-bottomborder-rightborder-leftmargin-rightmargin-leftmargin-topmargin-bottomwidthheight电子信息学院吴克文元素盒子大小的计算一个元素实际宽度=左边界＋左边框＋左填充＋内容宽度＋右填充＋右边框＋右边界电子信息学院吴克文由“盒子”堆出来的网页版面电子信息学院吴克文IEquirk模式下盒子的宽度当将文档声明DOCTYPE删除后，IE对网页的解释会进入quirk（怪异）模式，此时盒子的宽度等于左边界＋宽度＋右边界因此当使用了盒子属性后切忌删除DOCTYPE!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN电子信息学院吴克文styletype=text/css#box1{background-color:#ddd;margin:15px;padding:5px;}#box2{color:black;background-color:#aaa;margin:20px;padding:10px0px10px10px;width:100px;}body{border:1pxdotted#FF0000}/style/headbodydivid=box1divid=box2这是里面的盒子/div/bodybox_in_box.html电子信息学院吴克文盒子模型的特性边界值margin可为负，填充padding不可为负边框border默认值为0，即不显示行内元素，如a，定义上下边界不影响行高(由line-height属性决定)电子信息学院吴克文对盒子模型的思考边框是实的，我们可以看到实实在在的边框，而填充和边界都是虚的，我们只能看到他们对元素的影响盒子模型中只能设置两类颜色，即边框颜色和背景颜色盒子模型可设置三类距离，即边界距离margin，填充距离padding和边框值border电子信息学院吴克文属性值的简写形式方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义将有所区别，具体含义如下：如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性；如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性；如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。电子信息学院吴克文盒子模型的应用1.美化表单网页中的表单控件在默认情况下背景都是灰色的，文本框边框是粗线条，不够美观。通过CSS改变表单的边框样式、颜色和背景颜色让文本框，按钮等变得漂亮些。Eg:表单美化.html电子信息学院吴克文盒子模型的应用2.用盒子美化表格用css为table元素加一个1象素宽的border制作1象素虚线边框（td）Eg:美化表格.html《网站设计》盒子的定位王斌电子信息学院吴克文盒子的三种定位形式在标准流下的定位（默认）在浮动属性下的定位在定位属性下的定位电子信息学院吴克文标准流HTML元素在标准状况下的定位方式行内元素在同一行内横向排列块级元素占满整个一行，在页面中竖向排列元素不会移动到其它地方去，各元素的盒子之间不会发生重叠，对于嵌套的元素盒子也是嵌套的关系电子信息学院吴克文标准流下的盒子排列分析styletype=text/css*{border:2pxdashed#FF0066;padding:10px;margin:2px;}/stylebodydiv网页的banner（块级元素）/divahref=#行内元素1/aahref=#行内2/aahref=#行内3/adiv这是无名块p这是盒子中的盒子/p/div电子信息学院吴克文行内元素的盒子行内元素的盒子永远只能在浏览器中得到一行高度的空间（行高由line-height属性决定，如果没设置该属性，则是内容的默认高度），如果给它设置上下border，margin，padding等值，导致其盒子的高度超过行高，那么它的盒子上下部分将和其他元素的盒子重叠。因此，不推荐对行内元素直接设置盒子属性，一般先设置行内元素以块级元素显示，再设置它的盒子属性。电子信息学院吴克文改变行内元素的高度如图所示，当增加行内元素的边界和填充时，行内元素a占据浏览器的高度并没有增加，下面这个div块仍然在原来的位置，导致行内元素盒子的上下部分重叠，而左右部分不会受影响电子信息学院吴克文display属性通过display属性可控制元素是以行内元素显示还是以块级元素显示，或不显示display:block|inline|none|list-item电子信息学院吴克文block元素block元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非用width设定一个宽度div,p,h1,form,ul和li是块元素的例子。电子信息学院吴克文inline元素inline元素的特点是：和其他元素都在一行上高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。span,a,label,input,img,strong和em是inline元素的例子电子信息学院吴克文标准流下定位的应用－制作竖直导航菜单#nava{font-size:14px;color:#333333;text-decoration:none;background-color:#CCCCCC;display:block;width:140px;padding:6px10px4px;border:1pxsolid#000000;margin:2px;}#nava:hover{color:#FFFFFF;background-color:#666666;}竖直导航条.html《网站设计》盒子的浮动电子信息学院吴克文浮动的作用在标准流中，块级元素的盒子都是上下排列，行内元素的盒子都是左右排列，这在网页排版和表现中未免太单调。例如：有时我们希望相邻块级元素的盒子左右排列（所有盒子浮动）或者希望一个盒子被另一个盒子中的内容所环绕（一个盒子浮动）做出图文混排的效果，这时最简单的办法就是运用浮动属性电子信息学院吴克文盒子浮动后的特点给元素添加浮动属性后，元素会发生如下一些改变：设置元素浮动后，浮动后的盒子将以块级元素显示，但宽度不会自动伸展。浮动的盒子将脱离标准流，即不再占据浏览器原来分配给它的位置（IE6例外）。未浮动的盒子将占据浮动盒子的位置，同时未浮动盒子内的内容会环绕浮动后的盒子。电子信息学院吴克文浮动（float）浮动模型是在布局中用到的最重要的概念之一，使用float属性进行控制。浮动的框可以左右移动，直到它的外边缘碰到包含它的框的内边缘或另一个浮动框的边缘;CSS允许任何元素浮动。对一个元素应用float属性会自动将它转变成一个块级元素，其它元素的内容在其周围流动。利用这个特性我们可以让文字环绕在图片周围，形成Word中文字环绕的效果。float可以取三个可能的值left：向左浮动；right：向右浮动；none：消除浮动电子信息学院吴克文一个盒子浮动浮动的盒子被未浮动的盒子的内容所环绕，浮动盒子不占据原来的空间float_one.html电子信息学院吴克文多个盒子浮动的一些规则（1）多个浮动元素不会相互覆盖，一个浮动元素的框碰到另一个浮动元素的框后便停止运动。框1框2框3未浮动框1框2框3向右浮动电子信息学院吴克文多个盒子浮动（2）若包含的容器太窄，无法容纳水平排列的三个浮动元素，那么其他浮动块向下移动。但如果浮动元素的高度不同，那当它们向下移动时可能会被卡住。框1没有足够的水平空间框2框3框1不同高度的框框2框3电子信息学院吴克文浮动的清除使用CSS属性clear进行控制，它的值为：left：清除左边浮动对象right:清除右边浮动对象both：两边都不允许有浮动对象《网站设计》CSS定位属性…..电子信息学院吴克文定位属性定位属性position用于定义一个元素是否absolute（绝对)、relative（相对）、static（静态）、或者fixed（固定）。语法如下。Position：static|absolute|fixed|relativestatic：Static值是元素的默认值，表示不使用定位属性定位，也就是盒子按照标准流或浮动方式布局。fixed称为固定定位，它和绝对定位类似，只是总是以浏览器窗口为基准进行定位，但IE6浏览器不支持该属性值。(不用)电子信息学院吴克文相对定位relative：Relative使元素偏移一定的距离，偏移的方向及幅度由top、right、bottom和left偏移属性联合指定。#mydiv{position:relative;left:50%；top:30px;}top、left、bottom、right四个偏移属性仅对设置了定位属性的元素有效电子信息学院吴克文使用相对定位的盒子的位置定位依据常以标准流的排版方式为基础，然后使盒子相对于它在原来的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。电子信息学院吴克文相对定位举例#mybox{position:relative;left:20px;top:20px;}电子信息学院吴克文相对定位的特点元素原来占据的位置仍然会保留，也就是说相对定位的元素未脱离标准流；因为是使用了定位属性的元素，所以会和其他元素发生重叠。相对定位.html电子信息学院吴克文绝对定位absolute：absolute使元素从HTML普通流中分离出来，并把它送到一个完全属于自己的定位中。通过设置top、right、bottom和left的值，可以使绝对定位的元素放置到任何地方。这意味着它们对其他元素的盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。电子信息学院吴克文绝对定位－设置包含框但要注意的是，设置为绝对定位（position:absolute;）的元素，并非总是以浏览器窗口为基准进行定位。实际上，绝对定位元素是以它的包含框为基准进行定位的，所谓包含框是指距离它最近的设置了定位属性的父级元素的盒子。如果它所有的父级元素都没设置定位属性，那么包含框就是浏览器窗口我们对em元素的父级元素p设置定位属性，使p元素成为em元素的包含框，这时，em元素就不再以浏览器窗口为基准进行定位了，而是以它的包含框p元素的盒子为基准进行定位，电子信息学院吴克文绝对定位－不设置包含框em{background-color:#0099FF;position:absolute;left:60px；top:30px;