css布局:table,table-cell

html-css016

css布局:table,table-cell,第1张

table: 会作为块级表格来显示(类似 <table>)

table-row: 浏览器会默认创建一个表格行(类似<tr>)

table-cell: 作为一个表格单元格显示(类似 <td>和 <th>)

具体实现

结果:

左边宽度固定,右边自适应

结果:

结果:

结果:

我们要 <div class="box">B</div>" 整个可以使用 text-align: right 属性,也就是整个B框要在红色背景的右边,需要先将他们设置 inline-block 属性

结果:

1、设置表格的边框。在CSS中,可以通过border来设置表格或单元格的边框及其边框颜色,例如,下面设置表格为1px的蓝色边框。

2、在table表格里,默认是显示两个边框线的,如果要设置成一条边框,在CSS中需要使用border-collapse设置为collapse,合并为一条边框。

3、CSS设置表格的宽度和高度,使用width宽度和height高度来设置。

4、CSS设置表格的文本水平对齐方式。主要通过text-align来设置,有三个值:居左对齐left,居右对齐right,居中对齐center。

5、CSS设置表格的内边距。主要通过padding来设置,padding值越大,内边距越大,如图设置间距为15像素。

6、如图所示间距设置成功。

需要准备的材料分别有:电脑、chrome浏览器、html编辑器。

1、首先,打开html编辑器,新建一个html文件,例如:index.html。

2、其次,在index.html中的<style>标签中,输入css代码:table {margin: auto} body{text-align: center}。

3、最后,浏览器运行index.html页面,此时会发现通过用css让整个table在页面中水平居中成功。