再谈居中

通过text-align:center：让父元素中的所有【行内非替换级】元素居中；

//想让span居中，span是一个行内非替换元素，必须给父元素设置；
.box{
    text-align:center
}

//这个时候块级元素是不能居中的，应该text-align只让父元素中的行内非替换居中
//如果想让块级元素居中：需要设置margin:0 auto
.container{
    margin:0 auto;
}

<div class = "box">
    <span></span>
    <div class="container"></div>
</div>

因为块级元素会独占一行，【元素的宽度】=【内容width+margin】，默认设置宽度是给内容设置的，所以一旦内容的宽度没有大于元素的宽度，那么就会有多余的margin，所以设置margin值为auto，浏览器就可以平等分剩下的margin值。

认识列表元素

有序列表-ol-li

ol：有序列表，他的直接子元素只能是li。

li：列表中的每一项。

<h1>自己喜欢的电影排名：</h1>
<ol>
    <li>天龙八部</li>
    <li>射雕英雄传</li>
    <li>鹿鼎记</li>
</ol>

清除ol格式

但是在开发中，我们经常去除列表自带的序号：

ol,li{
    padding:0;
    margin:0;
    list-style:none;
}

无序列表-ul-li

ul：无序列表，直接子元素只能是li

li：列表中的每一项

清除ul格式

ul{
    padding:0;
    margin:0;
    list-style-type:none;
}

定义列表-dl-dt-dd

dl：定义列表，直接子元素只能是dt、dd

dt：是列表中的每一项；

dd：是对dt的描述、补充、解释，一个dt后面一般紧跟着1个或者多个dd；

重置：

dl,dt,dd{
    margin:0;
    padding:0;
}

网页常用清除

body,ul,li,a{
    padding:0;
    margin:0;
}

ul,li,ol{
    list-style:none;
}

a{
    text-decoration:none;
    color:#333;
}

代码规范

先完成结构
重置样式（body/a/ul）
先整体，后局部；从外往里，从上往下
去除重复的代码(css)

将重复的代码逻辑抽取到一个单独的class中
不同的代码放在不同的class中

表格元素

表格常见的元素：

table：表格
tr：表格中的【行】
td：行中的【单元格】（列）

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

表格的练习

<table>
    <tr>
        <td>排名</td>
        <td>股票名称</td>
        <td>股票代码</td>
        <td>股票价格</td>
        <td>股票涨跌</td>
    </tr>
    <tr>
        <td>1</td>
        <td>贵州茅台</td>
        <td>600519</td>
        <td>1800</td>
        <td>5%</td>
    </tr>
    <tr>
        <td>2</td>
        <td>腾讯控股</td>
        <td>00700</td>
        <td>400</td>
        <td>3%</td>
    </tr>
    <tr>
        <td>3</td>
        <td>五粮液</td>
        <td>000858</td>
        <td>160</td>
        <td>8%</td>
    </tr>
    <tr>
        <td>4</td>
        <td>东方财富</td>
        <td>300059</td>
        <td>25</td>
        <td>4%</td>
    </tr>
</table>

这样默认是没有边框线的，并且内容也不是居中；还要让每个边框合并防止出现小间隙；如果我们加边线，最好给td加；

<style>
    table{
        //边框合并，就不会出现间隙了，一定要在table中添加
        border-collapse:collapse;
    }
    td{
        borer:1px solid #333;
        padding:8px 16px;
        text-align:center;
    }
</style>

表格的其他元素

thead：实现第一行加粗的表头

caption：表格标题（一般自己写一个h元素，更方便书写）

tbody：专门存放内容，不写也可以

<table>
    <caption>表格标题</caption>
    <thead>
        <tr>
            <td>排名</td>
            <td>股票名称</td>
            <td>股票代码</td>
            <td>股票价格</td>
            <td>股票涨跌</td>
        </tr>
    </thead>
</table>

单元格合并

单元格合并分层2种情况：

跨列合并（往右跨）：使用colspan
- 在最左边的单元格写上colspan属性，并且省略掉合并的td；

跨行合并（往下跨）：使用rowspan
- 在最上面的单元格协商rowspan属性，并且省略掉后面tr中的td；

单元格合并练习

    <table>
        <tr>
            <td colspan="6">课程表</td>
        </tr>
        <tr>
            <td></td>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
        </tr>
        <tr>
            <td rowspan="4">上午</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
        </tr>
        <tr>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
        </tr>
        <tr>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
        </tr>
        <tr>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
        </tr>
    </table>

怎么给周一、周二那一排加粗？

可以为那一个tr加一个类：但是扩展性不强

<tr class="加粗类">
    <td colspan="6">课程表</td>
</tr>
<tr class="加粗类">
    <td></td>
    <td>星期一</td>
    <td>星期二</td>
    <td>星期三</td>
    <td>星期四</td>
    <td>星期五</td>
</tr>

通过结构伪类

table tr:nth-child(1),table tr:nth-child(2){
    
}

相互等价，下方更加的灵活，传入一个n，n的取值：【n和整数】，n表示所有；

前x行：-n + x

table tr:nth-child(-n+2){
    font-weight:700;
    font-size:20px;
}

大家记住n从0开始，然后将0带入即可；

前x行：-n + x

隔一行加粗一次：2n+1

想要给跨行的也是实现加粗效果：需要通过属性选择器

table tr td[rowspan]{
    font-weight:700;
    font-size:20px;
}

input元素的基本使用

developer.mozilla.org/zh-CN/docs/…

CSS-列表-表格-表单