CSS學習3（對象邊框、定位、CCS控制列表和表格）

原創

herryone123

2020-07-05 08:12

一、設置對象邊框

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>