CSS佈局和屬性

阿新 • • 發佈：2022-04-04

一、尺寸屬性

auto:無特定寬度值，由內容決定大小(預設值)。

<length>：用長度值來設定寬/高度。不允許負值。

<percentage>: 用百分比來設定寬度。不允許負值。

高度為100%是由內容的大小決定的,所以100%的高度是無效的。

解決方法1：設定當前容器的父元素的高度為100%或設定當前容器為position: absolute;

解決方法2：使用css3中的vh單位。

我們一般通過px設定高度

二、盒子模型

盒子模型:所有HTML元素可以看作盒子模型(box model)，用來設計和佈局時使用。

CSS盒模型本質上是一個盒子,封裝周圍的HTML元素，

它包括：邊距，邊框，填充和實際內容

。

內邊距padding

外邊距margin

1個值（4個方向），2個值（上下，左右），3個值（上，左右，下）4個值（上，右，下，左）

檢視程式碼

<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.father{      /* 高寬一旦定了便不可再改變 */
		width: 100px;
		height: 100px;
		padding: 10px;
		border: 5px double #0000FF;
		background-color: greenyellow;
		/* 背景內容，包括邊框，只要在border內都會變色 */
		margin: 10px;
	}
	.son{
		width: 100px;
		height: 100px;
		background-color: red;
	}
</style>

<div class="father">
	<div class="son"></div>
</div>

border

border: 2px solid #D2691E;

border-radius: 10px;

border-radius: 50%;

box-shadow: 0px 5px 10px darkgrey,-5px 5px 10px darkgrey;

transition: box-shadow 1s; shadow變化的速度

display和visibility

display可以設定元素的顯示級別

block：行級塊，獨佔一行，可以設定大小，行高，內外邊距

Inline-block:內聯塊，可以設定大小，行高，內外邊距，不能獨佔一行

內聯塊，不能獨佔一行，不能設定大小。要想設定大小，行高，內外邊距，需要將內聯塊顯示為block。

None:不顯示，該元素在普通流中的位置消失

Visibility:顯示和隱藏

Visible：正常顯示

Hidden:隱藏，在普通流中的位置還有

脫離文件流
display: none;

雖然看不見但所佔空間還存在
visibility: hidden;

三、佈局屬性

CSS 有如下三種基本的佈局模式：

普通流:是按照文件順序佈局，預設是從上到下，從左到右。

浮動流:設定元素按照向某一個方向傾斜浮動的方式進行佈局。

相對/絕對/固定定位：直接定位元素在文件或在父元素中的位置(詳見定位屬性)。

普通流：根據塊級元素的標籤在HTML裡的順序。

行內元素在水平（內間距、邊框、外邊距）方向上橫向佈局,行內元素無法設定高度寬度等。

可通過設定行內元素的行高line-height調整元素高度。

將行內元素的style屬性裡設定一個display:inline-block，可將其轉化成內聯塊元素。

塊級元素按照從上到下的方式進行佈局，高度寬度邊距等屬性都生效。

居中：* { margin: 0; padding: 0; } div { margin: 0 auto; }

浮動和清理浮動

clear常用取值範圍

none：允許左側和右側有浮動效果(預設值)。
both：清除左右兩側的浮動效果。
left/right：清除左邊/右邊的浮動效果。

float常用取值範圍

none：不浮動（預設值）。
left/right：向左/右浮動。

float

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.father{
			height: 100px;
			/* 不管清不清理浮動必須設定寬高 */        
			/* 1、清理浮動2、設定高度 */
		}
		.clear{
			clear: both;
		}
		.one{
			height: 100px;
			width: 300px;
			background-color: red;
			float: left;
			margin-right: 10px;
		}
		.two{
			height: 100px;
			width: 400px;
			background-color: #008000;
			float: left;
			margin-right: 10px;
		}
		.three{
			height: 100px;
			width: 400px;
			background-color: yellow;
			float: left;
			margin-right: 10px;
		}
		.four{
			margin-top: 10px;
			height: 100px;
			/* clear: both; */
			background-color: #7FFFD4;
		}
	</style>
	<body>
		<div class="father">
			<div class="one"></div>
			<div class="two"></div>
			<div class="three"></div>
			<!-- <div class="clear"></div> -->
			<!-- 不清理浮動設定高度也可以 -->
		</div>
		<!-- <div class="clear"></div> -->
		<div class="four"></div>
	</body>
</html>

定位

定位屬性：設定元素是否脫離正常的文件流，“漂浮”在指定的位置上的css屬性。

position:設定物件的定位方式。
static:物件遵循普通流(預設值)。
relative:相對定位，物件遵循普通流，當前元素參照父元素的左上角進行位置偏移。
absolute:絕對定位，物件脫離普通流，當前元素偏移屬性參照的是離自身最近的相對定位元素，如果沒有相對定位的元素，則一直追溯到文件。
fixed:與absolute一致，但偏移位置是以視窗為參考。當出現滾動條時，物件不會隨著滾動。
z-index:檢索或設定物件的層疊順序。取值範圍:
auto:設定當前元素的層疊順序為0。
<integer>:用整數值來定義堆疊級別,可以為負值。
top/right/bottom/left:設定當前元素距離父容器或網頁頂邊界向下/左/上/右偏移位置。取值範圍:
auto:預設值，根據HTML定位規則在文件流中分配。
<length>:用長度值來定義距離頂部/右邊/底部/左邊的偏移量，可以為負值。
<percentage>:用百分比來定義距離頂部/右邊/底部/左邊的偏移量。

相對定位

.div2{
	background-color: #DA70D6;
	/* 設定定位方式，相對定位後元素位置沒有變化，並且沒有影響其他元素 */
	position: relative;/* 相對於本來的位置進行定位,保留在普通流中的位置 */
    /* position: absolute; */
	left: 10px;
	top:10px;
	/* 為設定了定位的元素設定元素的層疊測序，預設值為0，值越大層次越向上 */
	z-index: -1;
}

絕對定位

檢視程式碼

.div2 {
	background-color: #DA70D6;
	/* 設定定位方式絕對定位後，元素位置沒有變化但脫離了普通流，位置仍是在普通流中的位置 */
	position: absolute;
	/* 定位的參照物是瀏覽器視窗的邊界 */
	left: 10px;
	top: 10px;
}

.div3 {
    width: 150px;
    height: 150px;
	background-color: yellow;
}

.father {
	width: 200px;
	height: 200px;
	background-color: #D2691E;
	position: relative;
}

<div class="div1"></div>
<div class="father">
	<div class="div2"></div>
</div>
<div class="div3"></div>

固定定位

.fixed{
	width: 40px;
	height: 400px;
	border: 1px solid black;
	position: fixed;
	right: 10px;
	bottom: 10px;
}
.fixed img{
	width: 100%;
}

四、背景屬性

background: 複合屬性，設定物件的背景特性。
background-color: 設定物件的背景顏色。
background-image: 設定物件的背景影象。
background-attachment: 設定物件的背景影象是隨物件內容滾動還是固定的。
fixed:固定的
Scroll:滾動
background-position: 設定物件的背景影象位置。
background-repeat: 設定物件的背景影象如何鋪排填充。
repeat-x：背景影象在橫向上平鋪。
repeat-y：背景影象在縱向上平鋪。
repeat：背景影象在橫向和縱向平鋪。
no-repeat：背景影象不平鋪。
<percentage>:用百分比指定背景影象填充的位置。可以為負值。
<length>:用長度值指定背景影象填充的位置。可以為負值。
center:背景影象橫向和縱向居中。
left:背景影象在橫向上填充從左邊開始。
right:背景影象在橫向上填充從右邊開始。
top:背景影象在縱向上填充從頂部開始。
bottom:背景影象在縱向上填充從底部開始。
background-size:設定物件的背景圖片的大小，取值範圍：
auto:第一個值為x方向的大小，第二個值為y方向的大小，auto預設大小
也可以寫畫素值，和百分比。如果一個值寫auto，另一個值寫畫素值，則auto的一方會隨著等比例變化

背景漸變：

通過設定背景圖片實現
通過css3中新增的漸變屬性實現

css3中新增的漸變型別：

線性漸變（Linear Gradients）- 從兩點之間顏色變換。
徑向漸變（Radial Gradients）- 從中心點向外圍顏色變換。

固定背景圖片

檢視程式碼

.app{
	width: 100%;
	height: 100%;
	background-image: url(../img/微信圖片_20220330135707.jpg);
	background-repeat: :no-repeat;
	background-size: cover;
	background-position: center;
	position: fixed;
}

漸變

檢視程式碼

.div1 {
	width: 100%;
    height: 90px;
	background-image: url(../img/微信圖片_20220330135707.jpg);
	background-position: 50%;
	/*圖片的中心點*/
	background-size: auto 100px;
}

	background-image: linear-gradient(to right, red, yellow, green);

	background-image: radial-gradient(circle, red, pink);

五、文字屬性

透明度

cursor: pointer;

opacity: 0.9;/*圖片變亮可以通過調節透明度來實現*/

文字

normal: 正常的字型。相當於數字值400。

bold: 粗體。相當於數字值700。

bolder: 定義比繼承值更重的值。

lighter: 定義比繼承值更輕的值。

<integer>: 用數字表示文字字型粗細。取值範圍：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

絕對長度單位：一般使用畫素單位，預設瀏覽器body標籤內的文字大小為16px。

相對長度單位:em、rem等相對長度單位。

通過媒體查詢對設定瀏覽器的字型基準。

文字、圖片、表單元素採用rem單位設定大小。

p{
	font-size: 30px;
	font-weight: bold;
	font-family: "楷體";
	font-style: italic;/*斜體*/
	width: 260px;
	height: 100px;
	background-color: skyblue;
	color: #0000FF;
	text-align: center;/* 設定一個block或inline-block級別元素的內容的水平對齊 */
	line-height: 50px;
	margin: 0 auto;/* 設定block級別元素在父元素內水平局中 */
	text-decoration: overline;/* 上劃線 */
	text-decoration: underline;/* 下劃線 */
	text-decoration: line-through;/* 刪除線 */
	text-decoration-color: green;/* 線的顏色 */
	text-decoration-style: wavy;/* 線的型別 */
	text-decoration-line:underline;
}

六、過渡效果

檢視程式碼


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background-color: red;;
			}
			div:hover{
				width: 200px;
				height: 200px;
				opacity: 0.5;
				/*過渡效果,第1個引數，過渡的屬性，第2個引數，時長*/
				transition: :width 2s,height 2s,opacity 2s;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

七、2D轉換

Transform：2D轉換，可以對元素進行平移，旋轉，縮放

TanslateX(),TanslateY(),Tanslate(x方向的值，y方向的值)

rotateX(),rotateY(),rotateZ()旋轉

scaleX(),scaleY()縮放

檢視程式碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			img:hover {
				/*2D轉換，平移，x方向,y方向平移*/
				/* transform: translate(100px,100px); */
				/*旋轉，沿X，Y，Z，角度的單位deg*/
				/* transform: rotateZ(180deg); */
				/*縮放，x方向，y方向*/
				transform: scale(1.02, 1.02);
				transition: transform 1s;
				cursor: pointer;
				opacity: 0.9;
			}

			div {
				width: 390px;
				height: 256px;
				overflow: hidden;
				border-radius: 5px;
			}
		</style>
	</head>
	<body>
		<div>
			<img src="../img/scenic3.jpg">
		</div>
	</body>
</html>