2.4 表格与图片

表格

标题位置擦caption-side

属性值 说明
top 顶部(默认)
botton 底部

语法:

table
{
   caption-side:botton;
}

表格边框

合并border-collapse

属性值 说明
separate 有空隙(默认)
collapse 无空隙

table
{
   border-collapse:collapse;
}

间距border-spacing

table
{
   border-spacing:20px;<--!表示间距为20个像素-->
}

图片

大小

img
{
   width:20px;(宽度)
   height:20px;(高度)
}

边框

img
{
   border:1px solid red;
}

对齐

水平对齐text-align

在使用水平对齐的时候,最好拿吧图片放在div中,因为水平对齐是图片左右移动,他需要一个移动的范围。同时div的范围要比图片大,不然移动个屁。

属性值 说明
left 左对齐
center 居中对齐
right 右对齐

.div1
{
   text-align:center;
}

……

<div class="div1">
<img ……/>
</div>

垂直对齐vertical-align

属性值 说明
top 顶部对齐
middle 中部对齐
bottom 底部对齐
baseline 基线对齐
img
{
   vertical-align:middle;
}

文字环绕float

属性值 说明
left 文字向左浮动
right 元素向右浮动

img
{
   border-right: 20px solid white;(让文字与图片有一定的间距)
   float:left;
}

##

上一篇:Note -「0/1 Fractional Programming」


下一篇:人口信息普查系统-JavaWeb-五