列表样式
1.1 list-style
简写属性在⼀个声明中设置所有的列表属性。设置顺序:
list-style-type,
list-style-position,
list-style-image。
默认值为:disc outside none。
1.2 list-style的几个属性
1. list-style-type 设置列表标记样式
- none :没有任何样式
-
默认值: disc(实⼼圆)
-
circle(空⼼圆)
-
square(⽅形)
-
decimal(0开头的数字标记)
-
lower-roman(小写罗马数字)
-
upper-roman(大写罗马数字)
2. list-style-position 设置在何处放置列表标记
-
默认值: outside
-
inside 列表项目标记放置在文本以内,且环绕文本根据标记对齐。
3. list-style-image 设置使⽤图像来替换列表项的标记
-
none 不指定图⽚,默认内容标记将被 list-style-type 代替
-
url 使⽤绝对或相对地址指定列表项标记图⽚,如果图像地址⽆效,默认内容标记将被 list-style-type 代替
ul {
list-style-type:square;
list-style-position: inside;
list-style-image:url('');
}
表格样式
1.1 width
设置宽度
1.2 height
设置⾼度
1.3 border
设置边框粗细
table, th, td
{
border: 1px solid black;
}
1.4 border-collapse
collapse 设置表格的边框是否被折叠成一个单一的边框或隔开(去除单元格和单元格之间的缝隙)
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
1.5 text-align
⽔平⽅向对⻬⽅式,它的值: left | center | right
td
{
text-align:right;
}
1.6 vertical-align
垂直⽅向对⻬⽅式,它的值:top | middle | bottom
td
{
height:50px;
vertical-align:bottom;
}
表格示例:
<table width="" height="" bgcolor= "" border="" align= "" cellpadding="" cellspacing="" >
<caption align= "" ></caption>
<tr align="" valign= "" bgcolor= "" >
<th></th>
<th></th>
</tr>
<tr>
<td rowspan="" colspan="" width="" height="" align=" left|center|right" valign= "top|middle|bottom" bgcolor="" ></td>
<td></td>
</tr>
</table>
display和overflow
1 display
1.1 定义和属性
display 属性规定元素应该⽣成的框的类型
-
none 不显示元素
-
block 转换为块元素
-
inline 转换为行内元素
-
inline-block 转换为行内块元素
-
table-cell 转换为table中的td格式,可以设置文字垂直方向的对其方式vertical-align: bottom;
1.2 用法
<style>
p.inline { display:inline; }
</style>
<p class="inline"> 我是p标签我是p标签我是p标签我是p标签 </p>
<p> 我是p标签我是p标签我是p标签我是p标签 </p>
2 overflow
2.1 定义和属性
overflow 属性规定当内容溢出元素框时发⽣的事情
-
visible 不变
-
hidden 超出隐藏
-
scroll 滚动条显示内容
-
auto 超出显示滚动条
2.2 用法
<style>
div{
background-color:#00ffff;
width:150px;
height:150px;
overflow: auto;
}
</style>
<p>如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。</p> <div> 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。 </div>