网页设计与制作教程-Web前端开发第7版课件第6章 CSS3的盒模型

上传人：h*** IP属地：山东上传时间：2024-12-14 格式：PPTX 页数：175 大小：5.49MB 积分：15 举报 版权申诉

已阅读5页，还剩170页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

页面中的每个元素都包含在一个矩形区域内，这个矩形区域通过一个模型来描述其占用空间，这个模型被称为盒模型（BoxModel），也称框模型。第6章CSS3的盒模型6.1CSS盒模型的组成和大小目录第6章CSS的盒模型6.1CSS盒模型的组成和大小6.2CSS盒模型的属性6.3CSS布局属性6.4CSS盒子定位属性 6.5CSS3多列属性6.6CSS基本布局样式 6.7实训——制作社区网网页6.8练习6.1CSS盒模型的组成和大小6.1.1盒子的组成1.内容区域contentarea2.内边距区域paddingarea3.边框区域borderarea（1）边框与背景（2）边框的样式（3）边框的宽度（4）边框的颜色4.外边距区域marginarea6.1CSS盒模型的组成和大小6.1.2盒子的大小1．盒子的宽度和高度的计算盒子的宽度=margin-left（左边距）+border-left（左边框）+padding-left（左填充）+width（内容宽度）+padding-right（右填充）+border-right（右边框）+margin-right（右边界）6.1CSS盒模型的组成和大小2.盒子的高度盒子的高度=margin-top（上边距）+border-top（上边框）+padding-top（上填充）+height（内容宽度）+padding-bottom（下填充）+border-bottom（下边框）+margin-bottom（下边界）6.1CSS盒模型的组成和大小#test{margin:10px20px;/*定义元素上下外边距为10px，左右外边距为20px*/padding:20px10px;/*定义元素上下内边距为20px，左右内边距为10px*/border-width:10px20px;*定义元素上下边框宽度为10px，左右边框宽度为20px*/border:solid#f00; *定义元素边框类型为实线型，颜色为红色*/width:100px;/*定义元素宽度为100px*/height:100px;/*定义元素高度为100px*/}*{margin:0;/*清除外边距*/padding:0;/*清除内边距*/}6.1CSS盒模型的组成和大小2．盒模型的几点提示一是理解一个孤立的盒子的内部结构；二是理解多个盒子之间的相互关系。6.1CSS盒模型的组成和大小6.1.3块级元素与行级元素的宽度和高度【例6-1】块级元素与行级元素宽度和高度的区别，本例文件6-1.html在浏览器中的显示效果，如图6-2所示。6.1CSS盒模型的组成和大小<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>块级元素与行级元素</title><styletype="text/css">.special{border:1pxsolidred;/*元素边框为1px红色实线*/width:300px;/*元素宽度300px*/height:100px;/*元素高度100px*/background:yellow;/*背景色为黄色*/margin:5px;/*元素外边距5px*/}</style></head><body><divclass="special">这是div元素</div><spanclass="special">这是span元素</span></body></html>6.1CSS盒模型的组成和大小<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>块级元素与行级元素</title><styletype="text/css">.special{border:3pxsolidred;/*元素边框为3px红色实线*/width:300px;/*元素宽度300px*/height:100px;/*元素高度100px*/background:yellow;/*背景色为黄色*/margin:50px;/*元素外边距50px*/

display:block;/*块级元素显示*/}</style></head><body><divclass="special">这是div元素</div><spanclass="special">这是span元素</span></body></html>祝贺你又学完了一章《网页设计与制作教程：Web前端开发（第7版）》刘瑞新主编配套资源padding-border-margin模型是一个通用的描述盒子布局形式的方法。对于任何一个盒子，都可以分别设定4条边各自的padding、border和margin，实现各种各样的排版效果。第6章CSS3的盒模型6.2CSS盒模型的属性目录第6章CSS的盒模型6.1CSS盒模型的组成和大小6.2CSS盒模型的属性6.3CSS布局属性6.4CSS盒子定位属性 6.5CSS3多列属性6.6CSS基本布局样式 6.7实训——制作社区网网页6.8练习6.2CSS盒模型的属性6.2.1CSS内边距属性padding1.顶边的内边距属性padding-top语法：padding-top:auto|length|百分比|inherit示例：h1{padding-top:32pt;}6.2CSS盒模型的属性2.右边的内边距属性padding-right语法：padding-right:auto|length|百分比|inherit示例：div{padding-right:12px;}6.2CSS盒模型的属性3.底边的内边距属性padding-bottom语法：padding-bottom:length|百分比|inherit示例：body{padding-bottom:15px;}6.2CSS盒模型的属性4.左边的内边距属性padding-left语法：padding-left:auto|length|百分比|inherit示例：img{padding-left:32pt;}6.2CSS盒模型的属性5.四边的内边距属性padding语法：padding:auto|length|百分比|inherit示例：h1{padding:10px11px12px13px;}/*顺序为上右下左，顺时针*/p{padding:12.5%;}div{padding:10%10%10%10%;}6.2CSS盒模型的属性6.边距值的复制在设置边距时，如果提供全部4个参数值，按照上右下左的顺时针顺序列出。例如：padding:10px10px10px10px;如果按照简写的形式，CSS将按照一定的规则顺序复制边距值。例如：padding:10px;由于padding:10px只定义了上内边距，按顺序右内边距将复制上内边距，变成如下形式：padding:10px10px;由于padding:10px10px只定义了上内边距和右内边距，按顺序下内边距将复制上内边距，变成如下形式：padding:10px10px10px;6.2CSS盒模型的属性由于padding:10px10px10px只定义了上内边距、右内边距和下内边距，按顺序左内边距将复制右内边距，变成如下形式：padding:10px10px10px10px;根据这个规则，可以省略相同的值。例如：padding:10px5px15px5px可以简写为padding:10px5px15px。padding:10px5px10px5px可以简写为padding:10px5px。但是，有时虽然出现了重复却不能简写，例如：padding:10px5px5px10px和padding:5px5px5px10px。6.2CSS盒模型的属性【例6-2】CSS内边距属性示例，本例文件6-2.html在浏览器中的显示效果，如图6-4所示。6.2CSS盒模型的属性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>CSS内边距</title><styletype="text/css">h3.title{padding-top:10px;padding-right:2em;padding-bottom:20px;padding-left:10%;background-color:coral;}.box{width:200px;height:80px;padding:20px30px10px20px;background-color:aqua;}</style></head><body><h3>CSS内边距属性</h3><hr><h3class="title">内边距属性padding</h3><hr><pclass="box">内容</p></body></html>6.2CSS盒模型的属性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>CSS内边距</title><styletype="text/css">h3.title{padding-top:50px;padding-right:8em;padding-bottom:20px;padding-left:30%;background-color:coral;}.box{width:200px;height:80px;padding:50px30px10px50px;background-color:aqua;}</style></head><body><h3>CSS内边距属性</h3><hr><h3class="title">内边距属性padding</h3><hr><pclass="box">内容</p></body></html>6.2CSS盒模型的属性6.2.2CSS外边距属性margin1．上外边距属性margin-top语法：margin-top:auto|length|百分比|inherit示例：body{margin-top:12.5%;}6.2CSS盒模型的属性2．右外边距属性margin-right语法：margin-right:auto|length|百分比|inherit示例：div{margin-right:10px;}6.2CSS盒模型的属性3．下外边距属性margin-bottom语法：margin-bottom:auto|length|百分比|inherit示例代码如下。h1{margin-bottom:auto;}6.2CSS盒模型的属性4．左外边距属性margin-left语法：margin-left:auto|length|百分比|inherit示例：img{margin-left:10px;}

6.2CSS盒模型的属性5．四边的外边距属性margin语法：margin:auto|length|百分比|inherit示例代码如下。body{margin:20px30px;}body{margin:10.5%;}body{margin:10%10%10%10%;}6.2CSS盒模型的属性【例6-3】CSS外边距属性示例，本例文件6-3.html在浏览器中的显示效果，如图6-5所示。6.2CSS盒模型的属性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>CSS外边距</title><styletype="text/css">h3.title{margin-top:20px;margin-right:30px;margin-bottom:50px;margin-left:20px;background-color:coral;}.box{width:200px;height:80px;margin:0.6cm;background-color:aqua;}</style></head><body><h3>CSS外边距属性</h3><hr><h3class="title">外边距属性padding</h3><hr><pclass="box">内容</p><hr><h3class="box">CSS外边距属性padding</h3></body></html>6.2CSS盒模型的属性6.2.3CSS边框属性border1.边框的样式属性border-style语法：border-top-style|border-right-style|border-bottom-style|border-left-style|border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit6.2CSS盒模型的属性2.边框的宽度属性border-width语法：border-top-width|border-right-width|border-bottom-width|border-left-width|border-width:medium|thin|thick|length|inherit6.2CSS盒模型的属性3．边框的颜色属性（border-color）语法：border-top-color|border-right-color|border-bottom-color|border-left-color|border-color:color6.2CSS盒模型的属性【例6-4】CSS边框属性示例，本例文件6-4.html在浏览器中的显示效果，如图6-6所示。6.2CSS盒模型的属性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>边框的样式属性</title><styletype="text/css">p{margin:20px;/*外边距为20px*/border-width:5px;/*边框宽度为5px*/border-color:#000000;/*边框颜色为黑色*/padding:5px;/*内边距为5px*/background-color:#FFFFCC;/*淡黄色背景*/}</style></head>6.2CSS盒模型的属性<body><pstyle="border-style:none">无边框none</p><pstyle="border-style:hidden">隐藏边框，不显示边框hidden</p><pstyle="border-style:dotted">点线边框dotted</p><pstyle="border-style:dashed">虚线边框dashed</p><pstyle="border-style:solid">实线边框solid</p><pstyle="border-style:double">双线边框double</p><pstyle="border-style:groove">3D凹槽边框groove</p><pstyle="border-style:ridge">3D凸槽边框ridge</p><pstyle="border-style:inset">3D凹入边框inset</p><pstyle="border-style:outset">3D凸起边框outset</p><pstyle="border-style:inherit">从父元素继承边框样式inherit</p></body></html>6.2CSS盒模型的属性4.边框复合属性border语法：border:border-width|border-style|border-color【例6-5】边框复合属性示例，本例文件6-5.html在浏览器中的显示效果，如图6-7所示。

6.2CSS盒模型的属性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>边框的复合属性</title><styletype="text/css">h1{border:2pxsolidred;text-indent:2em;}.pa{border-bottom:reddashed3px;border-top:bluedouble3px;}.box{border-bottom:25pxsolidred;border-left:25pxsolidyellow;border-right:25pxsolidblue;border-top:25pxsolidgreen;}</style></head><body><h1>边框的复合属性</h1><p>这是一个段落，没有设置任何边框属性。</p><pstyle="border:coraldashed5px">这个段落的边框设置为了珊瑚色，边框样式为虚线，宽度为5像素。</p><pclass="pa">这个段落的上边框是双线蓝色，下边框是虚线红色。</p><pclass="box">这个段落的每条边框都有25像素宽，颜色分别是红色、黄色、蓝色和绿色。</p></body></html>6.2CSS盒模型的属性6.2.4圆角边框属性border-radius语法：border-radius:none|length{1,4}[/length{1,4}]【例6-6】圆角边框属性示例，本例文件6-6.html在浏览器中的显示效果，如图6-8所示。6.2CSS盒模型的属性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>圆角边框</title><styletype="text/css">#corner{background:yellow;border:2pxsolid#32CD99;padding:20px;margin:5px;width:150px;height:100px;float:left;}#corner1{background:#32CD99;background:url(images/sunshine.jpg);background-position:lefttop;background-repeat:repeat;padding:20px;width:150px;height:100px;float:left;}div{border:2pxsolid#a1a1a1;padding:10px40px;background:#dddddd;width:300px;border-radius:25px;float:left;}</style></head><body><pid="corner"style="border-radius:25px;">指定相同的4个圆角</p><pid="corner"style="border-top-right-radius:30px;border-bottom-left-radius:50%20px;">指定右上、左下圆角</p><pid="corner1"style="border-radius:2em6em/3em10em;">指定背景图片的圆角</p><div><p>为元素添加圆角边框</p></div></body></html>6.2CSS盒模型的属性6.2.5盒模型的阴影属性box-shadow语法：box-shadow:h-shadowv-shadowblurspreadcolorinset【例6-7】圆角边框属性示例，本例文件6-7.html在浏览器中的显示效果，如图6-9所示。6.2CSS盒模型的属性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>阴影</title><styletype="text/css">div{margin:20px;border:1pxsolid;width:100px;height:100px;border-radius:50px50px/50px50px;background-color:#70f3ff;float:left;}.box{border-radius:30px;/*1个圆角边框*/box-shadow:100px0px5pxred,200px0px10pxyellow,300px0px15pxgreen;/*1个阴影，包括3个圆*/}</style></head><body><divstyle="box-shadow:10px10px;">1</div><divstyle="box-shadow:10px10px20px;">2</div><divstyle="box-shadow:10px10px20px5px;">3</div><divstyle="box-shadow:10px10px20px5px#999;">4</div><divstyle="box-shadow:20px10px10px10px#999inset;">5</div><brstyle="clear:both;/"><divstyle="border-radius:10px10px/10px10px;box-shadow:10px10px;">6</div><divclass="box">7</div></body></html>6.2CSS盒模型的属性6.2.6图片边框属性border-image语法：border-image:sourceslicewidthoutsetrepeat6.2CSS盒模型的属性【例6-8】图片边框属性示例，本例文件6-8.html在浏览器中的显示效果，如图6-11所示。6.2CSS盒模型的属性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>图像边框</title><styletype="text/css">div{border:15pxsolidtransparent;width:300px;padding:10px20px;}#round{border-image:url(images/poker.png)3030round;}#stretch{border-image:url(images/poker.png)3030stretch;}</style></head><body><divid="round">图片铺满整个边框。</div><br><divid="stretch">图片被拉伸以填充该区域。</div><p>使用的原始图片：</p><imgsrc="images/poker.png"></body></html>6.2CSS盒模型的属性6.2.7CSS轮廓属性outline轮廓线条的颜色属性outline-color语法：outline-color:color|invert|inherit6.2CSS盒模型的属性2.线条轮廓的样式属性outline-style语法：outline-style:none|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit示例：img{outline-color:orange;outline-style:solid;outline-width:medium;}6.2CSS盒模型的属性3.线条轮廓的宽度属性outline-width语法：outline-width:medium|thin|thick|length|inherit示例：img{outline-color:orange;outline-style:solid;outline-width:medium;}6.2CSS盒模型的属性4.轮廓属性outline语法：outline:outline-color|outline-style|outline-width|inherit6.2CSS盒模型的属性5.线条轮廓的偏移量属性outline-offset语法：outline-offset:length|inherit示例：规定边框边缘之外15像素处的轮廓：div{border:2pxsolidblack;outline:2pxsolidred;outline-offset:15px;}6.2CSS盒模型的属性【例6-9】轮廓属性示例，本例文件6-9.html在浏览器中的显示效果，如图6-13所示。6.2CSS盒模型的属性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>轮廓属性示例</title><styletype="text/css">p{border:bluesolid2px;outline-color:#FF0000;outline-width:2px;}p.none{outline-style:none;}p.dotted{outline-style:dotted;}p.dashed{outline-style:dashed;}p.solid{outline-style:solid;}p.double{outline-style:double;}p.groove{outline-style:groove;}p.ridge{outline-style:ridge;}p.inset{outline-style:inset;}p.outset{outline-style:outset;}p.inherit{outline-style:inherit;}div.offset{width:200px;height:100px;margin:10px;border:2pxsolidcyan;outline:2pxsolidred;}</style></head>

6.2CSS盒模型的属性<body><pclass="none">无轮廓none</p><pclass="dotted">点线轮廓dotted</p><pclass="dashed">虚线轮廓dashed</p><pclass="solid">实线轮廓solid</p><pclass="double">双线轮廓double</p><pclass="groove">凹槽轮廓groove</p><pclass="ridge">凸槽轮廓ridge</p><pclass="inset">凹入轮廓inset</p><pclass="outset">凸起轮廓outset</p><pclass="inherit">从父元素继承轮廓inheri</p><p><b>注意:</b>outline轮廓线不占空间。</p><hr/><divclass="offset">线条轮廓无偏移量</div><divclass="offset"style="outline-offset:5px;">线条轮廓的偏移量5px</div></body></html>6.2CSS盒模型的属性【例6-10】轮廓属性示例，本例文件6-10.html在浏览器中的显示效果，如图6-14所示。6.2CSS盒模型的属性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>轮廓属性</title><styletype="text/css">div{width:100px;height:100px;margin:20px;background:lightgreen;}.box-outline{outline:3pxsolidred;}.box-border{border:3pxsolidblue;}.box{width:100px;height:100px;margin:20px;background:lightgreen;outline:3pxsolidred;border:3pxsolidblue;}input{width:180px;height:25px;border-radius:6px;outline:none;/*取消焦点的轮廓线*/}</style></head><body><divclass="box-outline">outline</div><divclass="box-border">border</div><divclass="box">borderandoutline</div>

用户名：<inputtype="text"placeholder="请输入你的用户名"/>

密码：<inputtype="password"placeholder="请输入你的密码"/></body></html>6.2CSS盒模型的属性6.2CSS盒模型的属性6.2CSS盒模型的属性6.2.8调整大小属性resize语法：resize:none|both|horizontal|vertical示例：设置可以由浏览者调整div元素的大小：div{resize:both;overflow:auto;}6.2CSS盒模型的属性【例6-11】resize属性示例，本例文件6-11.html在浏览器中的显示效果如图6-16所示，鼠标拖动框的右下角的拖动柄可以改变大小。6.2CSS盒模型的属性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>resize属性示例</title><styletype="text/css">div{border:2pxsolid;padding:10px30px;width:360px;overflow:auto;}</style></head><body><div>resize属性规定是否可由用户调整元素尺寸。</div><hr><divstyle="resize:both;cursor:se-resize;">可以调整宽度和高度</div><hr><divstyle="resize:horizontal;cursor:ew-resize;">可以调整宽度</div><hr><divstyle="resize:vertical;cursor:ns-resize;">可以调整高度</div></body></html>祝贺你又学完了一章《网页设计与制作教程Web前端开发第7版》刘瑞新主编配套资源CSS为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠。第6章CSS3的盒模型6.3CSS布局属性目录第6章CSS的盒模型6.1CSS盒模型的组成和大小6.2CSS盒模型的属性6.3CSS布局属性6.4CSS盒子定位属性 6.5CSS3多列属性6.6CSS基本布局样式 6.7实训——制作社区网网页6.8练习6.3CSS布局属性6.3.1元素的布局方式概述1.一切皆为盒块级元素

“块盒子”（或称块框）。行级元素

“行级盒子”（或称行级框）。6.3CSS布局属性2.CSS定位机制

元素的布局方式，也称CSS定位机制，CSS有三种基本的定位机制：

普通文档流、浮动和定位。（1）普通文档流（简称普通流）（2）浮动6.3CSS布局属性（2）浮动6.3CSS布局属性6.3CSS布局属性3.布局属性CSS布局属性（LayoutProperties）是用来控制元素显示位置、文档布局方式的属性。按照功能可以分为如下三类。控制浮动类属性，包括float、clear属性。控制溢出类属性overflow。控制显示类属性，包括display，visibility属性。6.3CSS布局属性6.3.2CSS浮动属性float语法：float

:none|left|right|inherit示例：img{float:right}6.3CSS布局属性【例6-12】浮动属性示例，本例文件6-12.html在浏览器中的显示效果，如图6-20所示。6.3CSS布局属性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>CSS浮动</title><styletype="text/css">img{width:100px;height:60px;}</style></head>

6.3CSS布局属性<body><p>这里是普通文档流演示文字<imgsrc="images/sunflower.jpg">这里是普通文档流演示文字…这里是普通文档流演示文字…这里是普通文档流演示文字…这里是普通文档流演示文字…这里是普通文档流演示文字…</p><p>这里是浮动框外围的演示文字<imgsrc="images/sunflower.jpg"style="float:left;">这里是浮动框外围的演示文字……这里是演示文字…这里是演示文字…这里是演示文字…这里是演示文字…这里是演示文字…这里是演示文字…</p><p>这里是浮动框外围的演示文字<imgsrc="images/sunflower.jpg"style="float:right;">这里是浮动框外围的演示文字…这里是演示文字…这里是演示文字…这里是演示文字…这里是演示文字…这里是演示文字…这里是演示文字…这里是演示文字…</p></body></html>6.3CSS布局属性6.3.3清除浮动属性clear语法：clear:

none|left|right|both|inherit示例：div{clear:left}6.3CSS布局属性【例6-13】清除浮动属性示例，本例文件6-13.html在浏览器中的显示效果，如图6-23左图所示。6.3CSS布局属性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>清除浮动</title><styletype="text/css">.box{width:450px;height:200px;}.box_left{float:left;width:200px;background:aquamarine;}.box_right{float:right;width:200px;background:burlywood;}.clear{clear:both;}</style></head>6.3CSS布局属性<body><divclass="box"><divclass="box_left"><imgsrc="images/sunflower.jpg"style="width:150px;height:90px;"></div><divclass="box_right"><p>111这里是浮动框外围的演示文字…</p></div><divclass="clear"></div><p>222这里是浮动框外围的演示文字…</p></div></body></html>6.3CSS布局属性6.3.4裁剪属性clip-path语法：clip-path:none|<basic-shape>|<geometry-box>|<SVG-clipPath-element>示例：.clip-path-circle{clip-path:circle(50%at50%50%);}6.3CSS布局属性【例6-14】clip-path属性在CSS中用于裁剪图像或其他HTML元素，本例将会创建一个形状为圆形的HTML元素。本例文件6-14.html在浏览器中显示如图6-23所示。6.3CSS布局属性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>clip-path属性示例</title><style>div{width:200px;height:200px;background-color:lightblue;clip-path:circle(50%);}</style></head><body><div></div></body></html>6.3CSS布局属性6.3.5内容溢出时显示方式属性overflow语法：overflow:

visible|auto|hidden|scroll|inherit示例：body{overflow:hidden;}div{overflow:scroll;height:100px;width:100px;}6.3CSS布局属性【例6-15】overflow属性属性示例，本例文件6-15.html在浏览器中的显示效果，如图6-25所示。6.3CSS布局属性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>overflow属性示例</title><styletype="text/css">.div1{border:1pxsolid;}.div2{border:1pxsolid;width:400px;height:50px}</style></head>

6.3CSS布局属性<body><divclass="div1">

正常元素框。这里的文本内容会溢出元素框。这里的文本内容会溢出元素框。这里的文本内容会溢出元素框。这里的文本内容会溢出元素框。这里的文本内容会溢出元素框。

</div><p></p><divclass="div1"style="overflow:scroll;">

总是显示滚动条。这里的文本内容会溢出元素框。这里的文本内容会溢出元素框。这里的文本内容会溢出元素框。这里的文本内容会溢出元素框。这里的文本内容会溢出元素框。

</div><p>当设置了元素框的宽和高后，显示出元素内容超出元素框的情况。</p><divclass="div2">

这里的文本内容会溢出元素框。这里的文本内容会溢出元素框。这里的文本内容会溢出元素框。这里的文本内容会溢出元素框。这里的文本内容会溢出元素框。

</div><p></p><divclass="div2"style="overflow:auto;">

</div><p></p><divclass="div2"style="overflow:hidden;">

</div></body></html>6.3CSS布局属性6.3.6元素显示方式属性display语法：display:none|block|inline|inline-block|table|inherit示例：img{disply:block;float:right;}6.3CSS布局属性【例6-16】display属性示例，本例文件6-16.html在浏览器中的显示效果，如图6-26所示。6.3CSS布局属性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>display属性</title><styletype="text/css">p{display:inline;}span{display:block;}span.inline_box{border:redsolid1px;display:inline-block;width:200px;height:50px;text-align:center;}</style></head>

6.3CSS布局属性<body><p>display属性的值为"inline"的结果，</p>元素前后没有换行符，

<p>两个元素显示在同一水平线上。</p><span>display属性值为"block"的结果，</span>元素前后会有换行符，<span>可以设置它的宽度和上、右、下、左的内外的内外边距。</span><spanclass="inline_box">display属性值为"inline-block"的结果，</span>但具有block元素的某些特性，<spanclass="inline_box">两个元素显示在同一水平线上。</span></body></html>6.3CSS布局属性6.3.7元素可见性属性visibility语法：visibility:hidden|visible|collapse|inherit示例：img{visibility:hidden;float:right;}6.3CSS布局属性【例6-17】visibility属性示例，本例文件6-17.html在浏览器中的显示效果，如图6-27所示。6.3CSS布局属性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>visibility属性示例</title><styletype="text/css">h1.hidden{visibility:hidden;}h2.display{display:none;}</style></head><body><h1>这是一个可见标题</h1><h1class="hidden">这是一个隐藏标题</h1><p>注意,本例中的visibility:hidden隐藏标题仍然占用空间。</p><h1class="display">这个标题不被保留空间</h2><p>注意,本例中的display:none不显示标题不占用空间。</p></body></html>祝贺你又学完了一章《网页设计与制作教程Web前端开发第7版》刘瑞新主编配套资源定位（Positioning）它允许用户定义元素框相对于其正常位置应该出现的位置或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。CSS为定位提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠。第6章CSS3的盒模型6.4CSS盒子定位属性目录第6章CSS的盒模型6.1CSS盒模型的组成和大小6.2CSS盒模型的属性6.3CSS布局属性6.4CSS盒子定位属性 6.5CSS3多列属性6.6CSS基本布局样式 6.7实训——制作社区网网页6.8练习6.4CSS盒子定位属性6.4.1定位位置属性top、right、bottom、left语法：top:auto|lengthright:auto|lengthbottom:auto|lengthleft:auto|length示例：div{left:20px}6.4CSS盒子定位属性6.4.2定位方式属性position设置元素的定位类型。语法：position:static|absolute|relative|sticky6.4CSS盒子定位属性1．静态定位【例6-18】静态定位示例。本例文件6-18.html在浏览器中的显示效果，如图6-28所示。6.4CSS盒子定位属性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>静态定位</title><styletype="text/css">body{margin:20px;}#father{background-color:#a0c8ff;border:1pxdashed#000000;padding:10px;}#box1{background-color:#fff0ac;border:1pxdashed#000000;padding:20px;}</style></head><body><h2>这是一个没有定位的标题</h2><divid="father"><divid="box1">盒子1</div></div></body></html>6.4CSS盒子定位属性2．相对定位【例6-19】相对定位示例。本例文件6-19.html在浏览器中的显示效果，如图6-29所示。6.4CSS盒子定位属性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>相对定位</title><styletype="text/css">body{margin:20px;/*页面整体外边距为20px*/}#father{background-color:#a0c8ff;/*父容器的背景为蓝色*/border:1pxdashed#000000;/*父容器的边框为1px黑色实线*/padding:10px;/*父容器内边距为10px*/}#box1{background-color:#fff0ac;/*盒子背景为黄色*/border:1pxdashed#000000;/*边框为1px黑色实线*/padding:10px;/*盒子的内边距为10px*/margin:10px;/*盒子的外边距为10px*/position:relative;/*relative相对定位*/left:30px;/*距离父容器左端30px*/top:30px;/*距离父容器顶端30px*/}h2.left_top{position:relative;/*relative相对定位*/top:-40px;left:-30px;}</style></head>6.4CSS盒子定位属性<body><h2>这是一个没有定位的标题</h2><h2class="left_top">这个标题是根据其正常位置向左向上移动</h2><divid="father"><divid="box1">盒子1</div></div></body></html>6.4CSS盒子定位属性3．绝对定位【例6-20】absolute绝对定位示例，本例文件6-20.html在浏览器中的显示效果，如图6-30所示。6.4CSS盒子定位属性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>absolute绝对定位</title><styletype="text/css">h3{position:absolute;left:200px;top:50px;}</style></head>6.4CSS盒子定位属性<body><h3>这是一个绝对定位了的标题。标题放置距离左边的页面100px和距离页面的顶部150px的元素。</h3><p>用绝对定位，一个元素可以放在页面上的任何位置。</p><p></p><p></p><divstyle="border:3pxsolidblue;width:100px;height:100px;">蓝色的div位于正常文档流中</div><divstyle="border:3pxdottedred;width:100px;height:100px;position:absolute;top:100px;left:50px;">红色的div脱离了文档流</div><hr><span>绿色div和粉色div都设置成绝对定位div，但粉色div它的父元素是绿色div，所以粉色div计算相对位置是根据绿色div的原点计算的</span><divstyle="width:200px;height:200px;bord

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

网页设计与制作教程-Web前端开发第7版课件第6章 CSS3的盒模型

文档简介

温馨提示

最新文档

评论

网页设计与制作教程-Web前端开发 第7版 课件 第6章 CSS3的盒模型

文档简介

温馨提示

最新文档

评论

相关文档

网页设计与制作教程-Web前端开发第7版课件第6章 CSS3的盒模型