一、设置对象边框
1、边框的基本语法
边框是对象的边界框图。基本语法:
border:border-width | border-style | border-color
应用举例:
#myborder
{
border: 5px solid red;
}
<body>
<div id="myborder">
这是我的边框测试,宽度为5像素,实线红色
</div>
</body>
边框的其他属性:
border-top:border-width | border-style | border-color
border-right:border-width | border-style | border-color
border-left:border-width | border-style | border-color
border-bottom:border-width | border-style | border-color
2、边框颜色
border-color:color
颜色四边可以独立设置。
3、边框样式
border-style:none | dotted | dashed | solid | double | groove | ridge |inset | outset
4、边框宽度
border-width: medium | thin | thick | length
二、定位
1、定位的基本语法
定位有绝对定位和相对定位,绝对定位和相对定位不改变元素的大小形状,只改变元素的位置。基本语法:
position:static | absolution |relative
(1)默认值:该值下,忽略 top, bottom, left, right 或者 z-index 声明。
(2)绝对定位:把元素拿出文件流,不会占用原来的空间。文档流中的其他元素会重新定位。
(3)相对定位:元素移动后,仍然保留在文档流中占用的初始空间,其他元素不会占用,会导致元素的重叠。
2、设置对象的层叠顺序
z-index:auto | number
number的数值越大,越往前端显示。
3、设置对象的边框位置
设置对象的边框位置用方向属性。
top:auto | length
right:auto | length
bottom:auto | length
left:auto | length
三、CSS控制列表和表格
1、列表的基本语法
列表属性在CSS中用list-style表示,是复合属性。包含列表的图像、列表文本排列、列表预设标记类型。
list-style的语法:
list-style:list-style-image | list-style-positon | list-style-type
应用举例:
#l1{
border: 1px solid red;
margin-top: 5px;
list-style: none inside none;
}
<body>
<div id="l1">
<ul>
<li>表项一</li>
<li>表项二</li>
<li>表项三</li>
</ul>
</div>
</body>
2、设置列表的图像
list-style-image: none | url(url)
3、设置列表的文本排列
list-style-position: outside | inside
4、控制表格的基本语法
表格属性用border-collapse表示:
border-collapse:separate | collapse
设置为separate时,显示其边框;设置为collapse时,不显示其边框。
table-layout表示布局固定的算法:
table-layout:auto | fixed
参考: