HTML与JS与Jquery.docxVIP

HTML浮云原理（飘浮，释放空间）盒模型Margin:外边距Border:边框Padding:内边距在定义盒子的宽度时，要考虑到内填充，边框，外边距浮动原理解析float对象浮动后，它就脱离了当前的文档流，可以理解为漂起来了，它原来的地方就空出来了，它后的内容就会占用它原来的地方。清除浮动当元素有浮动属性时，会对其父元素或后面的元素产生影响，会出现一个布局错乱现象，可以通过清除浮动的方法来解决，浮动元素的影响。Clear:None:默认值，允许两边都可以有浮动Left:不允许左边有浮动对象Right:不允许右边有浮动对象Both:左右两侧不允许有浮动对象例：定位定位布局，就是可以通过元素position属性控制元素的位置。当我们使用绝对定位时，必须要有两个条件1必须给父元素加定位属性，一般建议使用position:relative;2给子元素，加绝对定位position:absolute；同时要加方向属性。相对定位与绝对定位的区别绝对定位是根据父元素为基准点，进行定位，----会脱离文档离相对定位是根据其自身为基准点，进行定位。离开原位置，但还点着原来的位置position属性( absolute | relative | static | fixed )详解什么是文档流？????? 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。????? 只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和相对定位。静态定位(static) ：????? static，无特殊定位，它是html元素默认的定位方式，即我们不设定元素的position属性时默认的position值就是static，它遵循正常的文档流对象，对象占用文档空间，该定位方式下，top、right、bottom、left、z-index等属性是无效的。相对定位(relative) ：????? relative定位，又称为相对定位，相对于自身在文档流的位置发生偏移。绝对定位(absoulte) ：?? ? ? absoulte定位，也称为绝对定位，虽然它的名字号曰“绝对”，但是它的功能却更接近于相对一词，为什么这么讲呢？原来，使用absoult定位的元素脱离文档流后，就只能根据祖先类元素(父类以上)进行定位，而这个祖先类还必须是以postion非static方式定位的z-index 跟具体数字如：div{z-index:100}注意：z-index的数值不跟单位。z-index的数字越高越靠前，并且值必须为整数和正数（正数的整数）。二、z-index使用条件 ? - ? TOPZ-index在使用绝对定位position:absolute属性条件下使用才能使用。通常我们让不同的对象盒子以不同顺序重叠排列，我们就是要z-index样式属性。三、z-index应用案例 ? - ? TOP为了方便观察z-index样式属性，我们设置3个DIV盒子，分别设置不同css背景颜色，设置相同CSS高度、CSS宽度。分别设置背景颜色为黑色、红色、蓝色。CSS width为100px，css height为50px3、z-index案例截图CSSCSS概述：css指层叠样式表CSS样式表极大地提高了工作效率CSS基础语法：1 selector{property:value}例：h1{color:red; font-size:14px;}属性大于1个之后，属性之间用分号隔开如果值大于1个单词，则需要加上引号：P{font-family:”sans serif”;}1选择器分组：H1,h2,h3,h4,h5,h6{color:red;}通配符：*{ color:red;}2继承：(子标签可继承父标签的样式)Body{color:green;}3派生类选择器li strong{color:red;}4 id选择器 1） Id选择器可以为标有id的HTML元素指定特定的样式Id选择器以“#”来定义2）ID选择器和派生选择器目前比较常用的方式是ID选择器常常用于建立派生选择器。5类选择器：以一个点显示也可以与派生类一起使用。6属性选择器对带有指定属性的HTML元素设置样式CSS3选择器1在 CSS3 中，追加了三个属性选择器分别为：[att*=val]、[att^=val]和[att$=val]，使得属性选择器有了通配符的概念。[att*=val]：表示包含属性包含val字符串的都加样式[att^=val]：表示首字符包含val字符串的加样式。[att$=val]：表示结束字符包含val字符串的加样式。例css3-1.html2 结构性伪类选择器p:first-line{ color:red;} //表示p元素的第一行加样式p:first-letter{color