表格
标题位置擦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;
}
##