深圳传智php基础班,传智PHP基础班笔记

传智PHP基础班笔记

昨日回顾 .box{ width:800px; margin:0px auto; border:1px solid #444; background-color:yellow; padding:10px; } .box .header{ height:90px; margin-bottom:10px; background-color:#6600ff; } .box .left{ width:590px; height:400px; float:left; background-color:#009900; } .box .right{ width:200px; height:400px; float:right; background-color:#ff9933; } .box .footer{ height:90px; margin-top:10px; background-color:#ccc; } .clear{clear:both;} display属性 l 功能：规则网页元素如何显示的问题。 l 取值：none(隐藏)、block(以块元素显示)、inline(以行内元素显示) l block：可以实现将行内元素转成块元素。 l inline：可以实现将块元素转成行内元素。 overflow属性：当内容溢出时，该如何显示 overflow：当内容溢出时，溢出的内容该如何显示。取值：visible(可见)、hidden(隐藏)、scroll(出现滚动条)、auto(自动) cursor光标类型 cursor：网页中光标的类型，取值：text(文本)help(帮助)、wait(等待)、pointer(手形)等。 CSS定位 l position：元素定位方式，取值static、fixed、relative、absolute l static：静态定位(默认状态、不定位)。 l Fixed：固定定位。 l Relative：相对定位。 l Absolute：绝对定位。 定位方式，要与定位属性配合使用 l 定位坐标：指定定位的元素，偏移目标元素多远的距离。 l left：定位元素，距离目标元素左边的距离。 l top：定位元素，距离目标元素上边的距离。 l right：定位元素，距离目标元素右边的距离。 l bottom：定位元素，距离目标元素下边的距离。 1、固定定位，position:fixed l 固定定位，是相对于浏览器窗口来进行的定位。 l 固定定位，不占空间，层级要高于普通元素。它不会随着网页的滚动而滚动。 l 如果不指定定位坐标的话，固定定位元素的位置在原地不动。 l 固定定位元素，一定是“块元素”，不管原来它是什么元素。 2、相对定位，position:relative; l 相对定位，是相对于“原来的自己”进行定位。 l 相对定位，依然占空间，层级高于普通元素。 l 如果不指定定位坐标的话，相对定位元素的位置在原地不动。 l 相对定位，原来是行内元素，定位后还是行内元素；原来是块元素，定位后还是块元素。 提示：相对定位和绝对定位，一般情况下是配合使用。 3、绝对定位，position:absolute l 相对于祖先定位元素(相对定位，绝对定位)，来进行的定位。 u 如果它的父元素没有进行任何定位的话，再往上找定位元素。 u 如果一直找到都没有找到定位元素的话，那就相对于来进行定位。 l 绝对定位元素，不占空间，层级要高于普通元素。 l 如果不指定定位坐标的话，绝对定位元素的位置在原地不动。 l 绝对定位元素，是一个“块元素”。 .box{ width:600px; border:1px solid #444; margin:100px auto; position:relative; /*相对定位*/ } .box .div1{ width:100px; height:100px; background-color:red; position:absolute; /*绝对定位*/ right:-50px; top:-50px; } .box .div2{ width:100px; height:100px; background-color:green; } .box .div3{ width:100px; height:100px; background-color:blue; } 课堂实例：限时抢 HTML引入CSS的方法 1、嵌入式 通过标记，来引入CSS样式。 语法格式： 提示：中的CSS样式，只能给当前网页来使用。 同一个网页中，标记可以多次出现。 2、外联式 通过标记，来入引一个外部的CSS文件(.css)，这样的话，可以实现公共的CSS代码被多个网页共享。 标记的常用属性 l rel：也就是引入的是什么类型的文件。取值：stylesheet l type：内容类型。 l href：引入的CSS文件地址。 提示：标记放在标记中。 同一个网页，可以使用多个来链入多个外部样式文件。 3、行内式(主要用于JS控制元素的样式) 每一个HTML标记，都有一些公共的属性：class、id、title、style。 HTML标记中的style属性的值，与CSS中样式一模一样。 提示：行内样式中，CSS代码不能写的过多； 行内样式中，多个CSS属性不能换行，也就是一行写完。 行内样式优先级是最高的，比ID选择器还要高。 CSS表格属性 border-collapse：表格边框线合并，取值：collapse。 盒子模型 我们可以把每一个HTML标记，都看成是一个“盒子”。 这个“盒子”有哪些特征：内容的高度或高度、边