CSS設置寬高的小技巧

、css寬高自適應：

1.寬度自適應：

元素寬度設為100%（塊狀元素的默認寬度為100%）

注：應用在通欄效果中

2.高度自適應：

height:auto;或者不設置高度

3.最小，最大高度，最小，最大寬度：

a)最小高度 min-height:value;

IE6不識別min-height屬性，解決方案如下：
 
方案一：min-height:100px; _height:100px;
 
方案二：min-height:100px; height:auto!important; height:100px;

b)最大高度：

max-height:value;

c)最大寬度：

max-width:value;

d)最小寬度：

min-width:value;

注：塊狀元素設置最小寬度時，需要將元素轉換為內聯塊狀元素，添加display:inline-block;

注：以上四個屬性IE6及以下版本瀏覽器不支持

4.高度塌陷問題：

描述：子元素浮動，父元素高度自適應，造成父元素高度為0，簡稱高度塌陷問題

解決方案：

方案一：

給父元素添加overflow:hidden;
 
優點：簡單，兼容性好
 
缺點：當有position:relative;出現時，會影響頁面顯示效果

方案二：

給父元素固定的高度 height:value;
 
缺點：不靈活，高度無法自適應

方案三：

在子元素的末尾添加一個空div，并設置樣式
 
.clear{height:0; overflow:hidden;clear:both;}
 
優點：所有瀏覽器都支持
 
缺點：在頁面中添加一個無意義的div，造成代碼冗余

方案四：（萬能清除浮動法，推薦使用）

通過偽元素的方式清除浮動

父元素:after{
 content:"";
 height:0;
 overflow:hidden;
 clear:both;
 display:block;
 visibility:hidden;
}

注：偽元素是內聯元素,轉換為塊元素設置寬高才能生效

height:0;在IE6下不兼容，添加overflow:hidden;兼容IE6

二、元素隱藏不可見的兩種方式（display:none;和visibility:hidden的區別）

1.display:none;元素隱藏不可見，位置不保留

2.visibility:hidden;元素隱藏不可見，位置保留

三、窗口高度自適應

首先，給html，body設置高度為100%

html,body{height:100%;}
 
然后給元素設置高度100%
 
div{height:100%}
 
注：常用于窗口內容不滿一屏或者沒有內容body高度為0時

四、水平居中和垂直居中：

1.行內元素水平居中設置

設置文本、圖片等行內元素水平居中，給父元素設置text-align:center;

2.定寬塊狀元素水平居中設置

給定寬塊狀元素設置左右margin值為auto

注：當元素設置float或絕對定位，固定定位時，左右margin為auto失效

3.不定寬塊狀元素水平居中

方法一：

給父元素設置 {display:table;margin:0 auto;}

注： display:table;將元素轉換為表格的形式

方法二：

子元素設置： {display:inline-block;}

父元素設置：{text-align:center;}

五、元素水平垂直都居中

1.未知寬高元素在屏幕窗口水平垂直都居中

方法一：

元素{
 
width:value;
 
height:value;
 
position:fixed;
 
left:50%;
 
top:50%;
 
margin-left:-width/2+px;
 
margin-top:-height/2+px;
 
}

方法二：

元素{
width:value;

height:value; 

position:fixed;

left:0;

top:0;

right:0;

bottom:0;

margin:auto;
}

2.未知寬高元素在父元素中水平垂直都居中

方法一：

元素{
 
width:value;
 
height:value;
 
position:absolute;
 
left:0;
 
top:0;
 
right:0;
 
bottom:0;
 
margin:auto;
 
}

方法二：

父元素{
 
width:value;
 
height:value;
 
display:table-cell;
 
vertical-align:middle;
 
text-align:center;
 
}

注：display:table-cell;將元素轉換為表格單元格形式

谷歌統計，全球有700多種編程語言，是不是聽上去很聳人聽聞？！現今，各種框架和各種編程語言一直是你方唱罷我登場，來來往往。

而對于HTML，不管你習慣與否，它始終在那。無論選擇哪種框架或后端語言，所有Web開發人員都必須躲不開使用HTML。個人認為，即使是實現相同的功能，最好還是使用HTML編寫，而非JS，盡管我也承認編寫HTML可能顯得比較“重體力”，而且很無聊。

HTML有如此廣泛的用途和“堅強的生命力”，仍有開發人員所不太知曉的標簽和屬性。以下是您應該了解的5個HTML標記和屬性：

1 . 懶加載圖片

懶加載避免加載瀏覽器上那些不需要去即可加載的圖像，而是當向下滑動頁面或接近圖像時，圖像才開始加載。

換句話說，當用戶下滑頁面時加載圖像，呈現他們，否則不做加載。懶加載圖像可以幫助提高網站性能和響應速度。

這可以通過HTML輕松實現，所要做的就是將loading=“lazy”屬性添加到圖像文件中。

添加屬性后，我們的圖片元素會是這樣：

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

通過使用Google的Lighthouse工具，你可以get到相關的一些技巧。

相關地址：https://developers.google.com/web/tools/lighthouse/

2 . 輸入推薦

用戶在做搜索錄入時，如果能夠拿到相關的輸入內容推薦，應該會提升使用體驗。

如今，輸入補全推薦功能是相當普遍的，你可以在天貓、頭條、抖音等太多平臺見到。你可以通過JS添加輸入補全推薦，方法是在輸入字段上設置事件偵聽，這樣能夠把搜索到的詞條與預定義推薦進行匹配。

但是，通過HTML也可以使用<datalist>標簽顯示一組預定義的補足推薦，需要注意下，此標記的ID屬性必須與輸入字段列表屬性相同。

<label for="country">Choose your country from the list:</label>
<input list="countries" name="country" id="country">
<datalist id="countries">
  <option value="UK">
  <option value="Germany">
  <option value="USA">
  <option value="Japan">
  <option value="India">
</datalist>

3 . 圖片標簽

你是否曾經遇到圖像無法按預期縮放的情況？我是遇到過的，譬如當我要使用大圖，同時把它顯示為縮略圖時，很可能會發生這種情況。

更改viewport width時，你會注意到某些圖像未按預期縮放。幸運的是，HTML通過使用<picture>標記使開發人員很容易地解決這個問題，該標記允許你添加適合不同寬度的多個圖像，而不必單個縮放。

如下所示：

<picture>
  <source media="(min-width:768px)" srcset="med_flag.jpg">
  <source media="(min-width:495px)" srcset="small_flower.jpg">
  <img src="high_flag.jpg" alt="Flags" style="width:auto;">
</picture>

如你看到的，我們指定了必須顯示特定圖像的最小寬度。

這個標簽和<audio>和<video>標簽非常相似。

4 . base URL

在創建網站索引或站點地圖的時候，這應該算是我最喜歡的標簽之一。

如果我們有很多錨標簽重定向到某個URL，并且所有URL都以相同的base address開頭時，這個標簽應該非常有用。

例如，如果我要指定zhang san和wang er的微博handles的URL，則URL的開頭會相同，而其后是它們各自的ID。通常，我必須將鏈接與相同的域名一起粘貼兩次。

不過，HTML有一個<base> tag，這使我可以設置基本URL的標記，如下所示：

<head>
  <base href="https://www.weibo.com/" target="_blank">
</head>
<body>
<img src="zhangsan" alt="Zhang San">
<a href="wanger">Wang Er</a>
</body>

上面的代碼將生成一個圖像重定向到“ https://www.weibo.com/zhangsan”和一個錨標記重定向到“ https://www.weibo.com/wanger”。

這個<base> tab應該要么是具有“href”或是所提供對象的屬性。

5 . 文檔刷新

如果要把用戶重定向到另一個頁面，那么是可以用純HTML來輕松實現的。

過往你打開某些網站的時，可能注意到了這個功能：彈出“你會在5秒鐘內被重定向”。

你是可以通過<meta> tab，并對它進行設置http-equiv=“refresh”從而使用它。

<meta http-equiv="refresh" content="4; URL='https://google.com' />

在此，content屬性指定重定向發生的秒數。

HTML加CSS是很強大，我們其實是可以僅使用它們兩就構建出像樣的網站的，只要你足夠沉浸于其中，不斷學習。

級標簽

一個頁面的布局就像一張報紙需要排版，需要分為多個區塊。塊內為多行逐一排列的文字、圖片、超鏈接等內容，這些區塊一般稱之為塊級標簽；而文字、圖片、超鏈接等稱之為行級標簽。

塊級標簽顯示的外觀按“塊”來顯示，具有一定的高度和寬度，如：<div>、<p>等；

行級標簽顯示的外觀按“行”來顯示，類似于文本的顯示，如：<img>、<a>等。

1.基本的塊級標簽

1.1.標題標簽<h1>~<h6>

標題標簽表示一段文字的標題（主題），并且支持多層次的內容結構，一級標簽使用<h1>，二級標簽使用<h2>，以此類推。html提供六級，<h1>最大，<h6>最小代碼及顯示效果如下：

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>標題標簽對比</title>
	</head>	
	<body>
		<h1>一級標簽</h1>
		<h2>二級標簽</h2>
		<h3>三級標簽</h3>
		<h4>四級標簽</h4>
		<h5>五級標簽</h5>
		<h6>六級標簽</h6>
	</body>
</html>

標題標簽代碼預覽

1.2.段落標簽<p>

段落標簽是表示一段文字內容的，一個段落可以包含多行文字，文字內容將隨瀏覽器窗口的大小自動換行。

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>段落標簽</title>
	</head>	
	<body>
		<h1>標題</h1>
		<p>第一段文字</p>
		<p>第一段文字</p>
	</body>
</html>

段落標簽代碼預覽

1.3.水平線標簽<hr/>

水平線標簽顯示一條水平線，這個標簽比較特殊沒有結束標簽，直接是用來<hr/>表示標簽的開始和結束。

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>段落標簽</title>
	</head>	
	<body>
		<h1>標題</h1>
    <hr/>
		<p>第一段文字</p>
		<p>第一段文字</p>
	</body>
</html>

水平線標簽代碼預覽

2.常用于布局的塊級標簽

2.1.有序列表標簽<ol>

使用<ol>,</ol>(有序列表)，<li></li>(列表項)HTML代碼如下：

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>有序列表</title>
	</head>	
	<body>
		<ol>
			<li>第一條數據</li>
			<li>第二條數據</li>
			<li>第三條數據</li>
		</ol>
	</body>
</html>

有序列表代碼預覽

2.2.無序列表標簽<ul>

使用<ul>,</ul>(無序列表)，<li></li>(列表項)HTML代碼如下：

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>無序列表</title>
	</head>	
	<body>
		<ul>
			<li>第一條數據</li>
			<li>第二條數據</li>
			<li>第三條數據</li>
		</ul>
	</body>
</html>

無序列表代碼預覽

2.3.定義列標簽<dl>

使用<dl>（定義列表）<dt> （定義列表中的項目）和 <dd> （列表中項目的描述）HTML代碼如下：

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>dl-dt-dd的使用</title>
	</head>	
	<body>
		<dl>
			<dt>項目名稱</dt>
			<dd>項目描述的第一行</dd>
			<dd>項目描述的第二行</dd>
		</dl>
	</body>
</html>

定義列標簽<dl>代碼預覽

2.4.表格標簽<teble>

使用<teble>，</teble>（表格），<tr>，</tr>（行），<td>，</td>（列）HTML代碼如下：

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>table標簽的使用</title>
	</head>	
	<body>
		<table width="200" border="1">
			<tr>
				<td>姓名</td>
				<td>年齡</td>
			</tr>
			<tr>
				<td>張三</td>
				<td>20</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>22</td>
			</tr>
		</table>
	</body>
</html>

表格標簽代碼預覽

2.5.表單標簽<form>

使用<form>,</form>（表單），<input/>（內容）HTML代碼如下：

<html>
	<head>
		<meta http-equiv="content-type" content="text/html" ;charset="gb2312">
		<title>form的使用</title>
	</head>
	<body>
		<form action="" method="post">
			<p>
				用戶名：
				<input name="username" type="text" size="20" />
			</p>
			<p>
				密   碼：
				<input name="password" type="password" size="20" />
			</p>
			<input name="submit" type="button" value="登錄" />
		</form>
	</body>
</html>

form標簽代碼預覽

2.6.分區標簽<diy>

<diy>標簽相當于一個大容器，可以容納無序、有序列表，表格等標簽，也可以容納圖片、文字、標題、段落等內容HTML代碼如下：

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>div的使用</title>
	</head>	
	<body>
		<div style="width: 500; height: 300; background-color: aquamarine;">
			<p>段落標簽</p>
			<h1>標題標簽</h1>
			<ul>
				<li>無序列表標簽第一行</li>
				<li>無序列表標簽第二行</li>
			</ul>
			文字可以直接輸入在這里
		</div>
	</body>
</html>

div標簽代碼預覽

在線咨詢

上一篇：JS常用方法和一些封裝：dom相關
下一篇：紅色故事：一封遲到的信（PPT課件）