一、table标签

 <table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

table的构成
table表示表格开始表格结束
tr表示表格中的行标签,一个表格中有多少行就应该书写多少对tr标签 + td表示表格中的单元格标签一行中有多少个单元格就应该书写多少对td标签
表格中所有的内容都必须在放置在td标签里面也就是说只有td标签才能存放内容
th表示标题单元格这个单元格里面的文本会加粗显示并且会居中
table常用属性
width height 宽高
align 对齐:left right center
valign 用来设置行里面的内容垂直对齐方式
border 边框像素
border-collapse:collapse 合并边框
td th的属性
align
valign
colspan 横向合并
rowspan 纵向合并

二、选择器的权重

选择器的权重
CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式.
权重值的计算可以把样式的应用方式分为几个等级，按照等级来计算权重：
!important，加在样式属性值后，权重值为 10000
行内样式内联样式，如：style=””，权重值为1000
ID选择器，权重值为100
类，权重值为10
标签选择器,权重值为1

三、定位

文档流
文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。
关于定位
我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：

relative 生成相对定位元素，一般是将父级设置相对定位，子级设置绝对定位，子级就以父级作为参照来定位，否则子级相对于body来定位。

absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。

fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
定位元素的偏移
定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。
定位元素层级
定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级

伪代码如下:

.box01{
    ......
    position:absolute;  /* 设置了绝对定位 */
    left:200px;            /* 相对于参照元素左边向右偏移200px */
    top:100px;          /* 相对于参照元素顶部向下偏移100px */
    z-index:10          /* 将元素层级设置为10 */
}

新增相关样式属性

/* 设置元素透明度,将元素透明度设置为0.3，此属性需要加一个兼容IE的写法 */
opacity:0.3;
/* 兼容IE */
filter:alpha(opacity=30);

四、background背景图

属性解释
background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：
background-color 设置背景颜色
background-image 设置背景图片地址
background-repeat 设置背景图片如何重复平铺
background-position 设置背景图片的位置
background-attachment 设置背景图片是固定还是随着页面滚动条滚动
属性连写
实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，这里面的“#00ff00”是设置background-color；“url(bgimage.gif)”是设置background-image；“no-repeat”是设置background-repeat；“left center”是设置background-position；“fixed”是设置background-attachment，各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。

最后看一个雪碧图的案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>background</title>
    <style>
    .list{
        width: 300px;
        /* border: 1px solid black; */
        margin: 0px auto;
        list-style: none;
    }
    .list li{
        height: 60px;
        border-bottom: 1px dotted black;
        background: url("images/bg01.png") no-repeat 0 10px;
        text-indent: 50px;
        line-height: 60px;
    }
    /* 图片间距是80px */
    .list .l2{
        background-position-y: -70px;
    }
    .list .l3{
        background-position-y: -150px;
    }
    .list .l4{
        background-position-y: -230px;
    }
    .list .l5{
        background-position-y: -310px;
    }
    .list li a{
        text-decoration: none;
        color: black;
    }
    </style>
</head>
<body>

    <ul class="list">
        <li><a href="#">我们的我们</a></li>
        <li class="l2"><a href="">我们的我们</a></li>
        <li class="l3"><a href="">我们的我们</a></li>
        <li class="l4"><a href="">我们的我们</a></li>
        <li class="l5"><a href="">我们的我们</a></li>
    </ul>

</body>
</html>

html和css进阶二

一、table标签

二、选择器的权重

三、定位

四、background背景图

猜你喜欢