使用CSS布局网页培训课件.pptx

使用CSS布局网页;学习目标;一. 样式表布局概述;想一想？;二. 盒模型;CSS的盒子模型;页面中的所有文档元素都可以理解为盒模型。这些文档元素视为一个矩形框，称其为盒子,包括以下几个组成部分:;默认情况下盒子的边框是无，背景色是透明，所以我们在默认情况下看不到盒子。;设置页面元素的背景颜色或图片，实际是设置盒模型边框内的区域的背景。 边框外的边界区域是透明的，呈现的是该元素的父元素的背景效果。;盒模型的宽和高;例如 这个区域的宽度=左边界+左边框+左填充+内容宽度+ 右填充+右边框+右边界 = 10px+3px+5px+70px+5px+3px+10px = 106px;如果一个盒子里面嵌套有第二个盒子，那么： 两个盒子边框之间的距离= 外盒子的填充值(padding)＋内盒子的边距值(margin);盒子模型属性——填充属性;1. 四个方向取值相同 2. 左右方向和上下方向取值各自相同 3. 四个方向取值不完全相同 4. 左右取值相同，上下取值不同;2.边框属性;边框样式;边框宽度;边框颜色;综合定义边框;（1）四个方向边框均相同 #box1{border:solid 5px #c00;} （2）四个方向边框效果各不相同 #box2{ border-top:solid 5px #c00; border-right:dotted 5px #00c; border-bottom: solid 5px #c00; border-left: dotted 5px #00c; };3.边界属性;边界（margin）的定义与填充（padding）类似，可以汇总定义，也可分别定义 。;利用margin实现居中效果 将margin的左右边界设置为auto;边界重叠;#p1{margin-right:10px;} #p2{margin-left:20px;};边界（margin）可以取负值。页面中的两个相邻元素，若其中某个边界取负值时，仍会发生重叠。此时垂直方向和水平方向的重叠规则相同，即两个元素之间的距离是正的边界值减去负的边界值的绝对值，或者表示为正的边界值和负的边界值之和。 ;对盒子模型的思考;各种元素盒子属性的默认值;思考：下面网页代码的效果？ #container{margin:0;padding:0;border:1px solid red;} #content{margin:20px;padding:30px;border:1px solid blue;} div id=“container” div id=“content” paaaaaaa/p/div /div ;发现container跟外面依然存在间距，哪里出现的呢？ 加入样式如下： body{padding:0;margin:0;} 发现什么不同？ ;三.块元素和内嵌元素;1.块元素;2.内嵌元素;3.块元素和内嵌元素混合排列;.block { /*定义块元素显示效果*/ background-color: #CCC; height: 100px; width: 200px; line-height: 2em; } .inline { /*定义内嵌元素显示效果*/ background-color: #666; color: #FFF; } span class=inline第1个内嵌元素/span div class=block第1个块元素/div span class=inline第2个内嵌元素/span;4.块元素和内嵌元素的转换;#nav li a:link,a:visited{ display:block; color:#000000; text-decoration:none; padding-top:4px; width:180px; height:22px; text-align:center; background-color:#6FC; font-family:黑体; };四.元素定位方式;1.定位属性;边偏移属性;绝对定位;绝对定位:使用负边界(margin)使绝对定位元素居中;在绝对定位下，定位元素的位置是相对于“最近”的“已定位”的“祖先”元素而言的。 已定位：position属性被设置且不是static。 祖先：从该元素开始所有外层元素。 最近：距该元素距离最短的一个外层元素。 ;相对定位的参照原点是元素本身在默认情况时（即position值为static时）的位置。要注意的是，元素相对定