html+css基础知识

     这是自己学习html时候做的一些记录，供大家参考
     <!--
             块和内联
             块元素:独占一行的元素
             div p h ul
             div没有任何语义，就是一个纯粹的快元素
                 就是为了方便布局

             span是内联元素（行内元素）：只会占用自身大小的元素，不会占用一行
                     常见的内联元素：a img iframe span
                 span没有任何意义，可以设置样式
             块元素主要用来实现页面布局，内联元素主要选中文本设置样式
                  一般情况下只是用块元素去包含内联元素，内联元素不去包含块元素
                 a元素可以包含任何元素，除去本身
                 p元素中不能放任何块元素
         -->
         <!--
             类选择器，id，class，id不能重复，class可以重复
                    class能赋多个值，使用空格隔开
                    class用.
                    id用#

             选择器分组
                 - 通过选择器可以同时选中多个元素
                 - 语法：选择器1，选择器2，。。。
             通配选择器：*{}
                 选中页面中所有元素

             复合选择器：
                 - 作用:
                     同时满足多个条件
                     选择器1选择器2.。 选择器中间没有间隔

             伪类选择器必须顺序使用如下，但他们的优先级是一样的
             伪类选择器：:link,:visited, :hover，:active, :focus, ::selection,
             伪元素(用来设置元素中的一些特殊位置)：:first-letter， :first-line
             :before, :after
                        before和after一般结合content使用，通过content添加内容
                                  例如：
                             p{
                                 content:"sdfsfdd";
                             }     

         -->
         <!--  ==========  -->
         <!--  = 属性选择器 =  -->
         <!--  ==========  -->
         <!--

             title属性，这个属性可以用于任何标签，指定提示文字
             例如<p title=" 这是一个title提示">十分士大夫的</p>

             属性选择器，选取拥有特定属性的标签。
             语法： [属性名]， [属性名=属性值]，
             [属性名^=属性值](选取以属性值开头的属性元素)，
             [属性名$=属性值](选取以指定内容结尾的属性标签)，
             [属性名=属性值](选取包含指定内容的属性标签)，
             例如p[title]{}，p[title=属性值]

             子元素选择器： ：first-child(选中第一个元素，并且自身是子元素)，:last-child
                          :nth-child(子元素的位置)，选定子元素任意位置。even表示偶数位的子元素，odd表示奇数位的子元素[IE8以下的浏览器是不支持的]
                          :first-of-type,:last-of-type[同一类中的第一个]
                                  父 > 子类型 IE6不支持　　

             兄弟选择器：
                       p +后一个兄弟元素{}
                       p ~后面所有类型的兄弟元素

                 否定伪类：可以从已经选中的元素中剔除某些元素
                 p:not(选择器){}
                 样式的继承，后代会继承祖先的样式,但是并不是所有的样式都会被子继承，例如，背景是不会被继承的

                 使用不同的选择器，选中同一个元素，设置相同的样式时、
                 这时候样式之间产生了冲突
                 优先级：内联样式>id>class>元素选择器>通配
                如果优先级相同，会选择靠后的一个
                可以在样式的最后，添加一个！important，将会获得最高优先级。但在开发中尽量避免使用
         -->

         <!--
                       这两个都表示强调的内容
             em 强调着重点，表示语气上的强调，em在浏览器中默认使用斜体显示
             strong 表示强调，比em更强列，默认使用粗体显示
         -->

         <!--
             i标签没有任何语义，没有着重的意义
             b只是丹村的加粗
         -->

         <!--
             small标签的内容文字较小
                  可以用于版权声明，合同
         -->

         <!--
             cite用于加书名号的内容，表示参考的内容
         -->

         <!--

             q标签表示一个引用，会自动加上引号

             blockquote 表示长引用，表示一个块元素

             sub,sup，下标和上标

             pre标签是一个预格式标签，保留格式空格，不会删除空格显示

         -->

         <!--

             列表有三种：
                 .有序列表 ol li
                 .无序列表 ul li
                 .定义列表 dl 包含dt(被定义的内容) dd（对定义内容的描述）

         -->

         <!--  ==========  -->
         <!--  = 长度单位 =  -->
         <!--  ==========  -->
         <!--
             长度单位
             px 像素
             百分比%  占父元素的比例
             em 和百分比相似
                根据当前的字体大小来计算的
               1em = 1font-size 当字体大小发生变化时，em也会变化
               设置字体相关的样式时，会使用

         -->

         <!--  ==========  -->
         <!--  = 字体样式 =  -->
         <!--  ==========  -->
         <!--

             line-height 表示行高 可以继承
             px时
             、行间距 = 行高 - 字体大小
                       定义一个百分数，相对于字体大小来说
                       直接指定行高，传入数值，行高会设置字体大小的倍数

              使用font定义字体时，如果不在font中指定，都会采用默认值，所以要么在font后定义单独样式，要么不指定
              font-family
              font-variant
              font-size
              font-weight
              font-style
              color
              line-height
         -->

         <!--

             关于文本的一些常用的样式

             text-transform(文字变形): 可以继承
                  值：none（默认）, capitalize(首字母大写)，uppercase(全部大写)，lowercase(小写)，inherent
             text-decoration(定义文本的修饰)：不可继承
                可选值：none（不加任何修饰）
                      underline（加下划线
                      、      overline 加上划线
                      line-through 为文本添加删除线

                      超链接会默认添加下划线，可以设置text-decoration 为none去除下划线
             letter-spacing（字符之间的间距）【中英文都有效】
             word-spacing 单词之间的距离【中文改变空格的大小，英文是词与词之间】
             text-align：文本的对齐 left right center justify（两端对齐）

             text-indent：首行缩进  em单位表示一个单词 如果是负值，字体就会隐藏
         -->

         <!--
             盒子
             width和height来设置盒子内容区的宽度和高度
             设置边框必须设置三个样式，缺一不可 但是他们都有默认值 ：border-weight（上 右 下 左， 上  左右  下， 上下  左右），border-color（上 右 下 左， 上  左右  下， 上下  左右），border-style
             可以设定border设置三个样式，没有顺序要求例如 border:10px red solid  border-right:none

             margin（外边距） padding(内边距)
             margin可以设置为auto（能设置多大，就设置多大） 一般只是设定水平方向的，left和right同时设置为auto，会一边一半，经常会使用这样来使盒子居中
             垂直方向设置auto，外边距默认为0，不起作用
             垂直外边距的折叠
                 在网页中垂直方向的相邻外边距会重叠
                   外边距重叠指的是兄弟元素相邻外边距会取最大值
                   如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素
                   解决方案：把父子元素的外边距给隔离，可以设置顶部border或者设置padding内边距

             浏览器设置了默认样式（为很多元素设置了padding和margin），为了在没有样式时，也有一个好的显示效果
             所以我们需要将浏览器默认设置的样式去掉，由于通配选择器是最低优先级，所以在通配选择器中设置margin和padding为0
             *{
               margin：；
               padding：；
               }
         -->

         <!--  ==========  -->
         <!--  = 内联元素和块元素 =  -->
         <!--  ==========  -->
         <!--

             内联元素和块元素的区别
             内联元素
                  内容块
                     不能设置width和height，没有用
                 内边距
                     可以设置padding，水平垂直都可以，但是垂直方向不会影响布局。
                 边框
                 可以设置边框，但是垂直方向不会影响布局
                 外边距
                 水平方向的外边距不会重叠，而是求和
                不支持垂直方向的外边距

             display:会改变元素的类型  inline-block block none（不显示且不占空间）
             visibility：是否显示，visible hidden（隐藏但是占用空间）
             overflow：对溢出的部分进行处理【注：在父元素中进行设置】
                      visible 默认值，在父元素以外的位置显示
                      hidden 溢出的内容会被修剪，不会显示
                      scroll 产生滚动条，使用滚动条查看溢出的内容
                             - 无论内容是否溢出，都会显示滚动条
                      auto：根据需要，来决定是否需要添加滚动条
         -->

        <!--  ==========  -->
        <!--  = 文档流和浮动 =  -->
        <!--  ==========  -->
         <!--
             一旦脱离文档流，元素不在区分块元素和内联元素，只是互补。如果是块元素，则会在快元素的基础上拥有内联元素的特性，反之，亦然

             一旦脱离文档流，可以去往任何位置。拥有所有特性，可以这么说 就是高层次的inline-block（内联和块元素的结合）

             文档流

                  文档流处在网页的底部，他表示的是一个页面中的位置
                  我们所创建的元素默认都在文档流里面

             元素在文档流中的特点
                 块元素：
                     .在文档流中独占一行
                内联元素：
                      。只占用自身的大小，从左到右排列

             把块元素水平排列，把块元素从文档流中剔除出来，可以用float实行

             元素与元素之间一般情况下都是换行显示，所以中间会有个空格，可使用float消除空格。
             float：只要元素浮动，下面的元素会顶上去被浮动的元素覆盖。只有下面的元素也设置浮动，才会浮动到同一水平位置上
                   none
                   left 从文档流中脱离出来，向页面左侧浮动
                   right从文档流中脱离出来，向页面右侧侧浮动

             一旦浮动，都会脱离文档流，可以设置宽高，和块元素一样
                          一旦脱离文档流，会相当于从当前布局脱离出去，就当不存在一样，剩余的布局从新界定
                    .高度塌陷问题，父元素不设定高度，子元素浮动之后，父元素会塌陷，没有高度。可以将父元素的高度写死，避免这种问题出现，但是一旦写死，父元素将不能自适应布局（不推荐使用）
         -->

         <!--  ==========  -->
         <!--  = 解决浮动问题产生的高度塌陷 =  -->
         <!--  ==========  -->

         <!--
             、
             根据w3c标准，在页面中元素都包含一个隐含的属性，BFC（blcok formatting context）
              默认是关闭的
              开启BFC主要解决浮动的问题
              当开启BFC时候，元素将会由如下特性
              　　　　１.父元素的垂直外边距不会和子元素重叠
              　　　　２.开启BFC的元素不会被浮动元素所覆盖
              　　　　３.开启BFC的元素可以包含浮动的子元素
              如何开启BFC
              　　　　１.设置元素浮动（不建议使用　，会导致布局混乱，父元素宽度丢失）
              　　　　２.设置inline－block（父元素宽度丢失，不推荐使用）
              　　　　３.设置绝对定位（一样的效果和第一个）
              　　　　４.将元素的overflow设置为非visible的值，一般使用auto和hidden
              　　　　推荐使用第四种方式
             但在IE６及以下版本不支持BFC，所以使用这种方式不能兼容IE6
             但是有另一个属性叫 Has Layout
             该属性的作用，和BFC类似，在IE6中可以开启这个属性来设置塌陷问题
             开启方式很多，我们直接使用一种副作用最小的
                直接将元素的zoom设置为1就行（zoom表示放大的意思，后边跟着一个数值，就是将我么的元素放大几倍。 zoom只在IE中支持）

             如果希望清除其他浮动元素对当前元素的影响，对当前元素应用clear属性
                 可选值：
                     none
                     left 清除左边浮动元素对当前元素的影响
                     right
                     both 清除对当前元素影响最大的

             解决塌陷方案一：
                  .1在父子中使用 overflow ，zoom消除外边距重叠影响
                  .2在兄弟中使用clear清除浮动影响
             解决塌陷方案二、：、
                 .1在父子中，在浮动元素下方添加一个div 在这个div中使用clear
                  .2在兄弟中直接使用clear
             w3c推荐使用
             解决塌陷问题方案三：
                .1通过after伪类选中父元素的后面，添加一个空元素
                div:after{
                    content:"";
                    display:block;
                    clear:both;
                }
                在IE6中不兼容，需要使用
                div{
                    zoom:;
                }
                .2在兄弟中直接使用clear
                最推荐的一种方式
                    同时解决父元素外边距和子元素相邻 ，高度塌陷问题
                           使用空的table标签可以做到这一点
                              div:after,div:before{
                                  content:"";
                                  display:table;
                                  clear:both;
                              }

         　　在IE６里面，块元素和内联元素都是看作块元素，这个要注意
         -->
         <!--  ==========  -->
         <!--  = 关于定位 =  -->
         <!--  ==========  -->
         <!--
             定位
                定位指的是将指定的元素放到任意的位置
                position
                   可选值：
                   static
                   relative
                   absolute
                   fixed

                  relative:
                          . 相对自身位置（在文档流中的原来位置）进行定位，通过left ，right，top , bottom来设置、
                          . 相对定位不会脱离文档流，原来的位置仍然占用
                          . 相对定位会使元素提升一个层级，如果发生重叠，会覆盖别的元素
                          . 相对定位不会改变元素的性质，块元素还是块元素，内联元素还是内联元素

                 absolute设置绝对定位
                         . 会使元素脱离文档流
                         . 开启绝对定位，不设置偏移量，位置不发生变化
                         .绝对定位是相当于离他最近的开启定位的祖先元素定位的（一般情况下，开启了子元素的绝对定位，父元素会开启相对定位）
                                           如果所有祖先元素没有开启定位，就会相对于浏览器进行定位
                         .绝对定位会提升一个层级
                         . 绝对定位会改变元素的性质
                                                内联元素变成块元素
                                               块元素的高度和宽度默认都被内容撑开
                 fixed定位（绝对定位的一种）
                         . 元素会脱离文档流
                         不同的是：
                                      固定定位永远都是根据浏览器窗口进行定位的
                                      固定定位不会随滚动条滚动
                     IE6不支持这个固定定位

                 关于层级：
                 如果元素都提升了等级，在布局上谁在下面，就会盖住上面的元素
                 通过z-index属性可以用来设置元素的层级：为z-index指定一个值，数值越高，越优先显示
                 对于没有开启定位的元素，z-index没有用
                父元素的层级再高，也不会遮挡子元素
         -->             

         <!--  ==========  -->
         <!--  = 透明 =  -->
         <!--  ==========  -->
         <!--

             opacity用于设置透明度

             在IE8及以下
             需要使用filter：alpha（opacity=）； 在IE tester中不行是个bug

         -->

         <!--  ==========  -->
         <!--  = 背景图片 =  -->
         <!--  ==========  -->
         <!--
             所有的背景可以用background一个属性来设置，属性之间没有顺序
             background-img来设置背景图片
                语法：background-img:url()
                - 背景元素大于当前大小，会显示左上角
                - 背景元素小于当前大小，则会默认平铺（用图片不断填充）
                - 背景颜色一定实在背景图片的后边

             background-repeat 设置背景图片的重复方式
               可选值：
                   repeat 双向重复
                   no-repeat 不重复,有多大就显示多大
                   repeat-x  横着重复，竖着不重复
                   repeat-y  竖着不重复，横着重复

             background-position 设定图片的显示位置
                 可选值： top left center bottmo right
                 也可以使用偏移量 一个水平 一个垂直 。 可以指定正值和负值

             background-attachment用来设置背景图片是否随页面一起滚动
                scroll 默认值 滚动
                fixed 固定在某一位置 不随页面滚动 背景图片永远相对于浏览器窗口进行布置，这个属性值一般只会设置个body元素，其他的基本不用
         -->

         <!--  ==========  -->
         <!--  = 表格 =  -->
         <!--  ==========  -->
         <!--

             table表格  colspan 横向合并单元格
                       rowspan 列合并
                       border-spacing 表格和单元格之间的距离
                       border-collapse 设置表格边框合并 如果设置了这个边框合并，border-spacing不起作用
                       th 表头
             提供了三个子标签来设置长标签 thead tbody tfoot 表示不同的主题，这三个是固定位置显示，可以不顺序写
             如果没有写tbody，会自动把tr放到tbody中
         -->

         <!--  ==========  -->
         <!--  = 表单 =  -->
         <!--  ==========  -->
         <!--
             使用fieldset来为表单项进行分组，使用legend来指定组名
             <fieldset>
                 <legend>

                 </legend>
             </fieldset>

             input类型   【输入框是通过name来提价数据到服务器端的，name是必不可少的】
             注意：
                 .像不需要用户去填的但是用户去选择的，必须写上value值，提交到服务器
                 .如果在单选或者多选希望选中默认值，可以使用checked=“checked”来设置选中
                 .在select中的option中添加selected=”selected“
                 .input 的placeholder提示文字，IE8及以下不支持，需要用js代码设置
                 .在IE6中，input的背景图片会滚动，在IE6中单独使用attachment=fixed，其他浏览器不用这么设置

                      text
                      password
                      radio 单选按钮 ，name必须相同实现单选
                      checkbox 多选框  name必须相同 value必须指定
                      select
                                     下拉列表  使用option来设置列表项，在select中添加一个multiple可以设置多选。  name属性需要指定给select， value指定给option
                                      在select中可以使用optgroup对选项进行分组，label设置组名
                     textarea 多行文本框
                     button
                     submit
                     reset
             button类型
                 submit
                 reset
                 button
             label标签 选中提示名 需要一个for属性，指定一个表单项的id
                 例如 <label for="myId">username</label>
                   <input id="myId" type="text" name="username" />

         -->

         <!--  ==========  -->
         <!--  = 框架集 =  -->
         <!--  ==========  -->
         <!--

             框架集和内联框架的作用相似，都是作用于一个页面中引入其他的外部的页面
             框架集可以引入多个页面，而内联框架只能引入一个

             使用一个frameset来创建一个框架集 frameset和body不能同时使用
             属性：
                 rows 指定框架集中的所有的框架，一行一行的排列
                 cols 列排列
                 这连个属性必须选择一个，指定框架占的比例
                 框架集中也可以嵌套框架集
                  他里卖的内容是不会被搜索引擎检索的，整个页面只能引用别的页面
                  引入一个页面，就会发送一个请求，用户体验较差
                  如果非要使用建议使用frameset 不建议使用iframe
             <frameset>
                 <frame src="url"/>
             </frameset>

         -->

         <!--  ==========  -->
         <!--  = 实现有选择性的执行css和js代码 =  -->
         <!--  ==========  -->
         <!--
             使用这个代码，可以选择性的在IE中执行，IE10及以上版本不支持这个代码
             条件hack
             <!--[if IE]>

              <![endif]-->
             <!--可以这样设置
                if lt IE   表示小于IE8版本的都会执行
                if ！ IE  不是IE8的都会执行
                if IE  等于
                if ht IE 8大于

                [if IE ]>

                    在body最后写js代码
                  解决IE6不支持png24，修复图片-->

         <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
         <script type="text/javascript">
             DD_belatedPNG.fix("要修复的元素选择器，另一个选择器");
         </script>
             -->

         <!--属性hack
             在属性前面添加符号，可以在IE版本中有选择性的执行
                _ 下划线 只有在IE6及版本以下才执行
                * 星号 只在IE7及以下执行
         在选择器前加 *html 只有IE６才能识别
         -->

          <!--  ==========  -->
         <!--  = 实战经验 =  -->
         <!--  ==========  -->
         <!--
             一
             设置按钮效果，使用背景图片设置按钮，设置背景的位置时，表示按钮的状态
                图片整合技术（css-sprite），把多张图片整合成一张图片，然后设置图片的位置，显示其中的不同图片
               优点：
                  . 浏览器只需要发送一次请求，加载多个图片。
                        提高用户体验
                  . 图片整合为一张图片，提高了请求的速度， 减小了图片大小

             IE6中队png24支持度不高
               如果使用的图片格式是png24，会导致透明效果消失
               解决方案，
               .可以把png24改为png8
               .使用js代码来解决该问题
                   <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
                   <script type="text/javascript">
                   DD_belatedPNG.fix("要修复的元素选择器，另一个选择器");
                   </script>
             二，
             每个浏览器设置空格的效果不大一样，这个需要注意
             三，
             设置pointer-events：none，可以让本元素丧失掉焦点。下级元素不会被遮挡事件处理
         -->