• 1. 定位----position
  • 1. 不开启定位--static
  • 2. 相对定位-relative
  • 3. 绝对定位--absolute
  • 4.固定定位---fixed
• 2. 元素的层级---z-index
• 3. 透明度 ----opacity
• 4. 背景---background-image
  • 1. 背景的偏移与定位
  • 2. 雪碧图-----优化按钮闪烁问题
• 5. 简写背景属性
• 6. 表格----table
• 7. 长表格
• 8. 表格的布局
• 9. clearfix
• 9.表单
  • 1. form----创建表单
  • 2. filedset
  • 3. input ----文本框
  • 4. lable
  • 5. 单选按钮
  • 6. 多选框
  • 7. 下拉列表
  • 8. 下拉列表分组---optgroup
  • 9 .文本域---text---多行输入
  • 10. 按钮---input
  • 11. 按钮---button

1. 定位----position

定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素.通过position来设置元素的定位.

• 可选值
  • static:默认值,元素没有开启定位
  • relative:相对定位
  • absolute:绝对定位
  • fixed:固定定位,绝对定位的一种.

1. 不开启定位--static

position: static;
left:100px
<!-- 不开启定位,有偏移量也不移动 -->

position != static时,即为开启了定位;

2. 相对定位-relative

• position: relative;
  1. 当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
  2. 相对定位是相对于元素在文档流中原来的位置进行定位
  3. 相对定位的元素不会脱离文档流,元素移动后原来的位置还在
  4. 相对定位会使元素提升一个层级
  5. 相对定位不会改变元素的性质，块还是块，内联还是内联
  6. 相对定位不会导致元素的宽度丢失
• 设置偏移量;
  • left：元素相对于其定位位置的左侧偏移量
  • right：元素相对于其定位位置的右侧偏移量
  • top：元素相对于其定位位置的上边的偏移量
  • bottom：元素相对于其定位位置下边的偏移量
    • left:100px
  • 偏移量一般需要设置两个,水平 垂直

3. 绝对定位--absolute

• 绝对定位：
  1. 开启绝对定位，会使元素脱离文档流
  2. 开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化,但由于开启绝对定位脱离了文档流,定位元素后面的元素会上移
  3. 绝对定位是相对于离他最近的、开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位，都会同时开启父元素的相对定位）
     • 如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口左上角(0px 0px)进行定位
  4. 绝对定位会使元素提升一个层级
  5. 内联元素变成块元素，对内联元素设置的宽高生效,块元素的宽度和高度默认都被内容撑开
• 偏移量:-----水平 垂直
  • left:200px;
  • left:200px;

4.固定定位---fixed

• position:fixed;
  特殊的绝对定位它的大部分特点都和绝对定位一样
• 固定定位与绝对定位的不同:
  • 固定定位永远都会相对于浏览器窗口进行定位
  • 固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动
  • IE6不支持固定定位
• 偏移量: --左右 上下
  • left:100px;
  • top:200px;

2. 元素的层级---z-index

• z-index:指定一个正整数,设置元素层级,值越高会优先显示
  • 如果定位元素的层级是一样，则下边的元素会盖住上边的
  • z-index只能对开启定位的元素使用,没有开启定位的元素不能使用
  • 父元素的层级再高,也不能高过子元素

3. 透明度 ----opacity

• opacity:设置元素北京的透明,值在:0-1之间
  • 0 :完全透明
  • 1 :完全不透明
  • 0.5:半透明
• 在ie8 以及以下不能用,解决方法如下:
  • filter:alpha(opacity=50);----(0-100)
    • 0:完全透明
    • 100:完全不透明
    • 50:半透明

4. 背景---background-image

• background-image:url(img/2.jpg)
  • 图片使用相对路径
• 如果元素小于图片的大小,默认显示左上角的图片,
• 元素等于图片大小,讲北京图片全部显示
• 如果元素大于图片的大小,默认用图片大小来平铺铺满整个元素
  • 图片不平铺元素时的设置---background-repeat
    • background-repeate:repeate默认值,背景图片会双方向(水平 垂直)重铺(平铺)
    • background-repeate:no-repeat 不平铺
    • background-repeate:repeate-x----水平方向平铺
    • background-repeate:repeate-y----垂直方向平铺
• 同时为元素指定背景颜色和背景图片,背景颜色在背景图片的后面

.body{
    background-color:#bfa
    background-image:url(../img/1.jpg)       
}

• 可以用图片平铺的效果来实现背景颜色是渐变的导航条
  • 截取渐变颜色的导航条,垂直方向上的1px
  • 设置x方向的平铺

1. 背景的偏移与定位

• background-position:调整背景图片在元素中的位置

• 可选项:

  • 该属性可以使用 top right left bottom center中的两个值来指定一个背景图片的位置
    • top left
    • bottom left
    • center center
  • 如果中给出一个值,则第二个值默认是center

• xpx ypx---直接给定两个偏移量

  • 第一个值是水平偏移量
    • 如果指定的是一个正值，则图片会向右移动指定的像素
    • 如果指定的是一个负值，则图片会向左移动指定的像素
  • 第二个是垂直偏移量
    • 如果指定的是一个正值，则图片会向下移动指定的像素
    • 如果指定的是一个负值，则图片会向上移动指定的像素

• background-attachment用来设置背景图片是否随页面一起滚动

  • 可选值：
    • scroll，默认值，背景图片随着窗口滚动
    • fixed，背景图片会固定在某一位置，不随页面滚动
  • 不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素

2. 雪碧图-----优化按钮闪烁问题

• 问题描述:当我们为一个按钮在不同的状态下设置不同的亮度时, 做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，这个闪烁会造成一次不佳的用户体验

• 产生问题的原因：
  背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求,但是我们的外部资源并不是同时加载，浏览器会在资源被使用时才去加载资源,我们这个练习，一上来浏览器只会加载link.png
  由于hover和active的状态没有马上触发，所以hover.png和active.png并不是立即加载的,当hover被触发时，浏览器才去加载hover.png,当active被触发时，浏览器才去加载active.png
  由于加载图片需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现闪烁的情况

• 解决问题:

  • 为了解决该问题，可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了
  • 然后再通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（CSS-Sprite）
  • 优点：
    1. 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，提高访问效率，提高了用户体验。
    2. 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验

5. 简写背景属性

background-color:red;
background-image:url(/img/1.jpg);
background-position:center center;
background-repeat: no-repeat;
background-attachment:fixed;
<!-- 简写背景属性 -->
background:red  url(/img/1.jpg) center center no-repeat fixed

• 没有数量要求,没有顺序要求,不写的样式就是用默认值

6. 表格----table

• table创建表格
• th :创建表头,会有默认的字体,加粗
• tr创建表格中的行,有几行就有几个tr
• td创建单元格,有几个单元格就创建几个td,或者说列

• rowspan用来设置纵向的合并单元格
• colspan用来设置纵向的合并单元格
• border-collapse可以用来设置表格的边框合并
  • border-collapse: collapse;
• border-spacing
  • table和td边框之间默认有一个距离，通过border-spacing属性可以设置这个距离

<body>
    <!-- table创建表格 -->
    <table border="1" width="40%" align="center">
        <!-- tr创建表格中的行,有几行就有几个tr -->
        <tr>
            <!-- td创建单元格,有几个单元格就创建几个td,或者说列 -->
            <td>A1</td>
            <td>A2</td>
            <td>A3</td>
            <td>A4</td>
        </tr>
        <tr>
            <td>B1</td>
            <td>B2</td>
            <td>B3</td>
            <!-- rowspan用来设置纵向的合并单元格 -->
            <td>B4</td>
        </tr>
        <tr>
            <td>C1</td>
            <td>C2</td>
            <td rowspan="2">C3</td>
            <td>C4</td>
        </tr>
        <tr>
            <td>D1</td>
            <td>D2</td>
            <!-- <td>D3</td> -->
            <td>D4</td>
        </tr>
        <tr>
            <td>E1</td>
            <td>E2</td>
            <!-- colspan用来设置纵向的合并单元格 -->
            <td colspan="2">E3</td>
            <!-- <td>E4</td> -->
        </tr>
    </table>
</body>

• 设置表格的样式

<style type="text/css">


    table{
        /*设置表格的宽度*/
        width: 300px;
        /*居中*/
        margin: 0 auto;
        /*边框*/
        /*border:1px solid black;*/
        /*table和td边框之间默认有一个距离，通过border-spacing属性可以设置这个距离*/
        /*border-spacing: 10px;*/
        /*
        border-collapse可以用来设置表格的边框合并
        如果设置了边框合并，则border-spacing自动失效
        */
        border-collapse: collapse;
        /*设置背景样式*/
        /*background-color: #bfa;*/
    }
        /*设置边框*/
    th, td{
        border: 1px solid black;
    }
    /*设置隔行变色*/
        /*ie8不支持,ie9以及以上支持*/
    tbody > tr:nth-child(even){
        background-color: #bfa;
    }
    /*鼠标移入到tr以后，改变颜色*/
        /*ie6不支持*/
    tr:hover{
        background-color: yellow;
    }       
</style>

7. 长表格

• 表格
  • thead 表头,永远会显示在表格的头部
  • tbody 表格主体,永远都会显示表格的中间
  • tfoot 表格底部,永远都会显示表格的底部
  • 三者的显示和代码顺序无关,通常情况下,将thead tfoot 写在一起,便于修改和检查
• 三个部分的分析
  • 这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，都需要直接写到table中，tr需要写在这些标签当中
  • 如果表格中没有写tbody，浏览器会自动在表格中添加tbody,并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
    • 通过table > tr 无法选中行 需要通过tbody > tr

<thead>
    <tr>
        <th>日期</th>
        <th>收入</th>
        <th>支出</th>
        <th>合计</th>
    </tr>
</thead>


<tfoot>
    <tr>
        <td></td>
        <td></td>
        <td>合计</td>
        <td>100</td>
    </tr>
</tfoot>

<tbody>
    <tr>
        <td>2017.03.01</td>
        <td>500</td>
        <td>300</td>
        <td>2000</td>
    </tr>
    <tr>
        <td>2017.03.01</td>
        <td>500</td>
        <td>300</td>
        <td>2000</td>
    </tr>
    <tr>
        <td>2017.03.01</td>
        <td>500</td>
        <td>300</td>
        <td>2000</td>
    </tr>
</body>

8. 表格的布局

• table>(tr>td)*3
• 表格的列数由td最多的那行决定
• 表格是可以嵌套，可以在td中在放置一个表格

9. clearfix

<style type = 'text/css'>
    .clearfix:befor,.clearfix:after{
        content: '';
        display: table;
        clear: both;
    }
    .clearfix{
        zoom:1;
    }
</style>
<body>
    <div class="box3 clearfix">
        <div class="box4"></div>
    </div>

    <div class="box1 clearfix">
        <div class="box2"></div>
    </div>
</body>

9.表单

• 表单的作用就是用来将用户信息提交给服务器的
  • 比如：百度的搜索框 注册 登录这些操作都需要填写表单

1. form----创建表单

* form标签中必须指定一个action属性，该属性指向的是一个服务器的地址
    * 当我们提交表单时将会提交到action属性对应的地址
* 使用form创建的仅仅是一个空白的表单，我们还需要向form中添加不同的表单项

2. filedset

* 在表单中可以使用fieldset来为表单项进行分组，可以将表单项中的同一组放到一个fieldset中
* 在fieldset可以使用legend子标签，来指定组名

3. input ----文本框

* 使用input来创建一个文本框，它的type属性是text
    * 如果希望表单项中的数据会提交到服务器中，还必须给表单项指定一个name属性,name表示提交内容的名字

* 用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器:url地址?查询字符串
    * 格式：  
    属性名=属性值&属性名=属性值&属性名=属性值&……
* 在文本框中也可以指定value属性值，该值将会作为文本框的默认值显示

4. lable

* 该标签可以指定一个for属性，该属性的值需要指定一个表单项的id值

5. 单选按钮

• 使用input来创建一个单选按钮，它的type属性使用radio
• 单选按钮通过name属性进行分组，name属性相同是一组按钮
• 像这种需要用户选择但是不需要用户直接填写内容的表单项，还必须指定一个value属性，这样被选中的表单项的value属性值将会最终提交给服务器
• 如果希望在单选按钮或者是多选框中指定默认选中的选项，则可以在希望选中的项中添加checked

6. 多选框

使用input创建一个多选框，它的type属性使用checkbox

7. 下拉列表

• 使用select来创建一个下拉列表

  • 下拉列表的name属性需要指定给select，而value属性需要指定给option

  • 可以通过在option中添加selected="selected"来将选项设置为默认选中

  • 当为select添加一个multiple="multiple"，则下拉列表变为一个多选的下拉列表

8. 下拉列表分组---optgroup

• 同一个optgroup中的选项是一组,
• 可以通过label属性来指定分组的名字

9 .文本域---text---多行输入

<body>
    自我介绍<textarea name="info"></textarea>
</body>

10. 按钮---input

• 提交按钮
  • 提交按钮可以将表单中的信息提交给服务器
  • 使用input创建一个提交按钮，它的type属性值是submit
  • 在提交按钮中可以通过value属性来指定按钮上的文字

      <input type="submit" value="注册" />
  

• 重置按钮

  <!-- <input type="reset">可以创建一个重置按钮，点击重置按钮以后表单中内容将会恢复为默认值 -->
  <input type="reset">
  

• 单纯按钮

  <!-- 使用input type=button可以用来创建一个单纯的按钮，这个按钮没有任何功能，只能被点击 -->
  <input type="button" value="按钮">
  

11. 按钮---button

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>