《Web技术基础》第6课页面布局(一)

第6课页面布局（一）知识回顾•CSS语法•CSS常用选择器•CSS属性•使用CSS•*层叠（多重）样式前馈及作业总结•较好：1、3、4、5、7、8组。–外边距所能设置的最小值是多少？王丽业–浮动需要在什么时候使用？傅爽•问题–组长没收齐，没说明原因。闫宏利、陈嘉兴、陈禄知。–没有提出问题（2、6组）。没交（11组、刘普华）。–张永恒、辛广悦。•格式-第X小组《Web技术基础》课程前馈表前馈检查•CSS盒模型4个组成部分有哪些？•CSS内边距属性是什么？•CSS边框属性是什么？•CSS外边距属性是什么？•Div标签显示类型是什么？•CSS定位方式有几种？•CSS相对定位是相对谁？•CSS绝对定位元素的位置与文档流有关吗？讲授内容•CSS盒模型•CSS定位11.1CSS盒模型——概述•CSS盒模型（BoxModel）规定了元素处理内容、内边距、边框和外边距的方式。CSS盒模型主要由四部分组成：–content：盒模型里的内容，即元素的内容。–padding：内边距，也称填充，指内容与边框的间距。–border：边框，指盒子本身。–margin：外边距，指与其他盒模型的距离。外边距默认是透明的，因此不会遮挡其后面的任何元素。11.1CSS盒模型——概述•内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边，盒模型内边距、边框和外边距按照顺时针的顺序，可分别为top、right、bottom和left四个边，11.1CSS盒模型——概述•在CSS中，width和height属性指的是盒模型内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加盒的尺寸。盒模型的宽度和高度要在width和height属性值基础上加上内边距、边框和外边距的距离。盒宽度=左外边距+左边框+左内边距+宽度+右内边距+右边框+右外边距。盒高度=上外边距+上边框+上内边距+高度+下内边距+下边框+下外边距。11.1CSS盒模型——概述•下面盒模型内容的宽度和高度分别为300px和200px。#box{width:300px;height:200px;padding:10px;border:1pxsolid#000;margin:15px;}•盒宽度=15+1+10+300+10+1+15=352px•盒高度=15+1+10+200+10+1+15=252px11.1CSS盒模型——CSS内边距•元素的内边距在边框和内容区之间，padding属性定义元素边框与元素内容之间的空白区域。内边距属性。属性描述padding简写属性。在一个声明中设置元素的所有内边距padding-bottom设置元素的下内边距padding-left设置元素的左内边距padding-right设置元素的右内边距padding-top设置元素的上内边距11.1CSS盒模型——CSS内边距1.padding属性•padding属性定义元素的内边距，属性值可以使用长度值或百分比值，但不允许使用负值。如希望所有h1元素的各边都有10像素的内边距：h1{padding:10px;}•还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值，如：h1{padding:10px0.25em2ex20%;}11.1CSS盒模型——CSS内边距2.单边内边距•通过使用padding-top、padding-right、padding-bottom和padding-left四个单独的属性，分别设置上、右、下、左内边距。如：h1{padding-top:10px;padding-right:0.25em;padding-bottom:2ex;padding-left:20%;}11.1CSS盒模型——CSS内边距3.内边距的百分比数值•可以为元素的内边距设置百分数值，百分数值是相对于其父元素的width计算的。上下内边距与左右内边距一致，即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。如下面这条规则把段落的内边距设置为父元素width的10%：p{padding:10%;}11.1CSS盒模型——CSS内边距•实例css(padding).html说明了如何设置CSS内边距。headtitlepadding/titlestyletype=text/cssdiv{border:1pxsolid#F00;margin-bottom:2px;}#div1{padding:1.5cm}#div2{padding:0.5cm2.5cm}/style/headbodydivid=div1span每个边拥有相等的内边距/span/divdivid=div2span上和下内边距是0.5cm，左和右内边距是2.5cm/span/div/body11.1CSS盒模型——CSS边框•元素的边框是围绕元素内容和内边距的一条或多条线，border属性允许规定元素边框的样式、宽度和颜色。边框属性。属性描述border简写属性，在一个声明中设置四个边的边框属性border-style设置元素所有边框的样式，或者单独地为各边设置边框样式border-width设置元素所有边框的宽度，或者单独地为各边边框设置宽度border-color设置元素所有边框中可见部分的颜色，或者单独地为各边边框设置颜色11.1CSS盒模型——CSS边框属性描述border-bottom简写属性，在一个声明设置下边框的所有属性border-bottom-color元素下边框的颜色border-bottom-style元素下边框的样式border-bottom-width元素下边框的宽度border-left简写属性，在一个声明设置左边框的所有属性border-left-color元素左边框的颜色border-left-style元素左边框的样式border-left-width元素左边框的宽度border-right简写属性，在一个声明设置右边框的所有属性border-right-color元素右边框的颜色border-right-style元素右边框的样式border-right-width元素右边框的宽度border-top简写属性，在一个声明设置上边框的所有属性border-top-color元素上边框的颜色border-top-style元素上边框的样式border-top-width元素上边框的宽度11.1CSS盒模型——CSS边框1.边框的样式•边框样式是边框最重要的属性，因为如果没有边框样式，就根本没有边框。CSS的border-style属性定义了10个边框样式。值描述none无边框hidden与none相同。不过应用于表时除外dotted点状。在大多数浏览器中呈现为实线dashed虚线。在大多数浏览器中呈现为实线solid实线double双线。双线的宽度等于border-width的值groove3D凹槽。其效果取决于border-color的值ridge3D垄状。其效果取决于border-color的值inset3Dinset。其效果取决于border-color的值outset3Doutset。其效果取决于border-color的值11.1CSS盒模型——CSS边框•可以为边框定义多个样式，如：.p1{border-style:soliddotteddasheddouble;}•如果希望为元素的某一个边设置边框样式，而不是设置所有边的边框样式，可以使用border-top-style、border-right-style、border-bottom-style和border-left-style11.1CSS盒模型——CSS边框•实例css(border).html使用了各种边框样式。11.1CSS盒模型——CSS边框2.边框与背景•元素的背景是内容、内边距和边框的背景，盒模型的边框绘制在“元素的背景之上”，元素的背景应当出现在边框的可见部分之间。见实例css(border).html的虚线边框。11.1CSS盒模型——CSS边框3.边框的宽度•可以通过border-width属性为边框指定宽度。为边框指定宽度有两种方法：可以指定长度值，比如2px或0.1em；或者使用3个关键字之一，它们分别是thin、medium（默认值）和thick。CSS没有定义3个关键字的具体宽度，所以一个浏览器可能把thin、medium和thick分别设置为等于5px、3px和2px，而另一个浏览器则分别设置为3px、2px和1px。11.1CSS盒模型——CSS边框•可以按照上、右、下、左的顺序设置元素的各边边框，如：p{border-style:solid;border-width:15px5px15px5px;}•也可以通过border-top-width、border-right-width、border-bottom-width和border-left-width属性分别设置边框各边的宽度。•如果希望显示边框，就必须设置边框样式。border-style的默认值是none，如果没有声明其他边框样式，即使设置边框宽度，边框也是不存在。如：p{border-width:50px;}11.1CSS盒模型——CSS边框4.边框的颜色•CSS使用border-color属性设置边框颜色，默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。如果元素没有任何文本，边框颜色是其父元素的文本颜色。颜色值可以使用命名颜色、十六进制颜色值和RGB值，如：p{border-style:solid;border-color:bluergb(25%,35%,45%)#909090red;}11.1CSS盒模型——CSS边框•通过border-top-color、border-right-color、border-bottom-color和border-left-color属性可以分别设置单边边框颜色•CSS边框颜色默认值是transparent，即边框颜色为透明，可以创建有宽度不可见边框。11.1CSS盒模型——CSS边框•实例css(border-transparent).html实现了透明边框的效果，页面显示时是一个没有边框的块，当鼠标指针指向“透明边框”时，显示红色的边框。11.1CSS盒模型——CSS外边距•围绕在元素边框周围的空白区域是外边距，设置外边距使用margin属性，margin属性接受任何长度单位、百分数值甚至负值。外边距属性。属性描述margin简写属性。在一个声明中设置所有外边距属性margin-bottom元素的下外边距margin-left元素的左外边距margin-right素的右外边距margin-top元素的上外边距11.1CSS盒模型——CSS外边距1.值复制•CSS定义了一些规则，允许为外边距指定少于4个值。规则如下：–如果缺少左外边距的值，则使用右外边距的值。–如果缺少下外边距的值，则使用上外边距的值。–如果缺少右外边距的值，则使用上外边距的值。11.1CSS盒模型——CSS外边距•换句话说，如果为外边距指定了3个值，则第4个值（即左外边距）会从第2个值（右外边距）复制得到。如果给定了两个值，第4个值会从第2个值复制得到，第3个值（下外边距）会从第1个值（上外边距）复制得到。最后一个情况，如果只给定一个值，那么其他3个外边距都由这个值（上外边距）复制得到。11.1CSS盒模型——CSS外边距•利用这个机制，只需指定必要的值，如：h1{margin:0.25em1em0.5em;}/*等价于0.25em1em0.5em1em*/h2{margin:0.5em1em;}/*等价于0.5em1em0.5em1em*/p{margin:1px;}/*等价于1px1px1px1px*/11.1CSS盒模型——CSS外边距2.margin属性•margin属