整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
果圖:
核心點:
寬度自適應 width
默認情況下, 塊級元素不設置寬度, 默認為整個屏幕寬度或者和父級同寬
如果元素脫離了文檔流(浮動或者定位), 那么元素的寬度由元素的內容決定相關介紹: MDN
resize 生效的條件: 不支持內聯元素; 塊級元素，需要overflow屬性的計算值不是visible。整體布局
<div class="container">
<!-- resizable 用于拉伸的工具 -->
<div class="resizable"></div>
<!-- content 要展示的內容區域 -->
<div class="content">content</div>
</div>基礎知識, 拉伸區域的實現, 右下角出現可拉伸圖標
.content {
width: 200px;
height: 200px;
resize: horizontal;
cursor: ew-resize;
overflow: hidden; // 必須要配合overflow來使用resize, 否則拉伸圖標無法顯示
border: 1px solid red;
}
<div class="content">content</div>
限制拉伸尺寸
通過設置min-width、min-height、max-width和max-height可以限制拉伸尺寸。所有代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
position: relative;
/* 脫離文檔流 */
float: left;
}
.resizable {
width: 200px;
height: 200px;
overflow: scroll;
resize: horizontal;
cursor: ew-resize;
opacity: 0;
min-width: 200px; // 盒子寬度最小為200px
}
/* 更改拖拽圖標的大小和父容器一樣大 */
.resizable::-webkit-scrollbar {
width: 20px;
height: 200px;
}
/* 使用定位, 將容器定位到父容器的正中間, 跟著父容器的大小改變而改變 */
.content {
margin: 0;
height: 200px;
position: absolute;
top: 0;
/* 留出5px為了鼠標放上去可以顯示拖拽 */
right: 5px;
bottom: 0;
left: 0;
border: 1px solid;
}
</style>
</head>
<body>
<div class="container">
<!-- resizable 用于拖拽的工具 -->
<div class="resizable"></div>
<!-- content 要展示的內容區域 -->
<div class="content">content</div>
</div>
</body>
</html>
層級圖
調查了身邊五六年經驗以上的幾個前端同學和同事，盡然發現絕大部分人都不知道，當然，在看到這個文章之前，我也不知道這個，平時雖然都一直在做web前端開發，但真沒涉及到這塊，或者說涉及到了，也解決了，但是還真沒探究過這個問題，你是否躺槍了呢？
這是一個很讓人困惑的CSS特征，我之前也談到過它。我們大家都知道，當按百分比設定一個元素的寬度時，它是相對于父容器的寬度計算的，但是，對于一些表示豎向距離的屬性，例如padding-top,padding-bottom,margin-top,margin-bottom等，當按百分比設定它們時，依據的也是父容器的寬度，而不是高度。
下面是一個實例演示代碼，你可以調整容器的寬度，但你會發現，黃塊塊的padding-bottom的距離也會隨之寬度而變大或變小。
HTML代碼
<div class="wrapper" id="w">
<div class="box" id="b"></div>
</div>
<input type="range" min="120" max="400" value="400" class="range" id="r">
<output>寬度是: <span id="op">400px</span></output>
<output>黃塊塊的Padding bottom是:<br><span id="op2">10%</span></output>
CSS代碼
body {
font-family: Arial, sans-serif;
padding-top: 30px;
text-align: center;
}
.wrapper {
width: 400px;
margin: 0 auto;
border: solid 1px black;
}
.box {
width: 100px;
height: 100px;
background: gold;
margin-left: auto;
margin-right: auto;
padding-top: 10%;
padding-bottom: 10%;
margin-bottom: 5%;
}
.range {
display: block;
margin: 20px auto;
}
output {
text-align: center;
display: block;
font-weight: bold;
padding-bottom: 20px;
}
output span {
font-weight: normal;
}
上面的代碼中，我們對內部子元素聲明了3個豎向的距離，都是百分比形式。當移動滑塊時，我們的js代碼只需修改了容器的寬度。但是，這個這三個屬性高度都跟隨著變化，可以看出，它們的百分比計算是基于容器的寬度，而不是高度的。
切圖網致力于web前端技術開發，關注用戶體驗，關注移動web前端，響應式，微場景等技術，如果你對此感興趣請加公眾微信賬號：qietuwang
天我們說下HTML標簽中的div、span和圖像標簽。其實div和span是上一節就要講的標簽內容，但是當時時間比較晚了，就沒有說。
<div>和<span>是沒有語義的，就是一個盒子，用來裝內容的。這和android開發中的font很像，也是一個個的盒子，將內部包起來。可以這么來寫:
<div>這是頭部</div> <span>我是內容</span> 兩個都是雙標簽。
div是division的縮寫，表示分割分區(豎著); span意為跨度、跨距(橫著)。div單獨占一行，實例如下: 理解為一個大盒子
看下HTML代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
<div>我是一個div標簽，我自己獨占一行</div>
<div>我是一個div標簽，我自己獨占一行</div>
</body>
</html>
可以看到，寫了兩個<div>標簽，一個占一行
<span>一行可以放很多個標簽，理解為 小盒子，舉例如下:
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
<div>我是一個div標簽，我自己獨占一行</div>
<div>我是一個div標簽，我自己獨占一行</div>
<span>我是一個span標簽</span>
<span>我是一個span標簽</span>
</body>
</html>
效果如下:
接下來說一個很重要的標簽---圖像標簽
HTML標簽中，使用<img>標簽用于定義HTML頁面中的圖像，是一個單標簽。img是image的縮寫，src是<img>標簽的必須屬性，用于指定圖像文件的路徑和文件名。屬性，指的是屬于這個圖像標簽的特性。對于圖片，需要將圖片和html文件放到一起。
代碼圖示：
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
<img src="HTML5.jpeg"/><br />
<!-- <img src="HTML5.jpeg"> -->
</body>
</html>
效果如下:
如果我們再加入同樣的一行代碼，看看顯示(加上換行)
代碼如圖:
代碼內容如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
<img src="HTML5.jpeg"/><br />
<img src="HTML5.jpeg">
</body>
</html>
效果如下:
可以看到<img src="xxx"> 后面不寫 / 也是可以的，<br />后面不寫斜杠也行，即使都是用單個的情況。src是source的縮寫。
接下來說下圖像標簽的其他屬性:
alt 替換文本，圖像不能顯示的文字
title 文本，提示文本，鼠標放到圖像上，顯示的文字，類似于 hover
width 像素，設置圖像的寬度(和android中的差不多)
height 像素，設置圖像的高度(和android中的差不多)
border 像素，設置圖像的邊框粗細
具體我們看下實例:
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
<img src="HTML5.jpeg" />
<br />
alt替換文本，圖像顯示不出來的時候用文本代替<br />
<img src="HTML5.jpeg" alt="圖像不展示時，使用文本展示">
</body>
</html>
看下展示效果:
發現 alt后替換文本并沒有起作用，圖像還是顯示的。這是為什么呢？
其實原因很簡單，就是先判斷src后的圖像是否存在，如果存在，就展示圖像，如果不存在，就展示文本。上面語句中，圖像的地址是正確的，所以會展示圖像。可以將圖像地址進行修改。我們再試下
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
<img src="HTML5.jpeg" />
<br />
alt替換文本，圖像顯示不出來的時候用文本代替<br />
<img src="HTML51.jpeg" alt="圖像不展示時，使用文本展示">
</body>
</html>
我們來看看效果，alt后的文本是否能展示
說明我們的測試是正確的。
2.title 提示文本
先看效果:
看下代碼和代碼展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
title提示文本<br />
<img src="HTML5.jpeg" title="鼠標hover上，就展示了" />
<br />
</body>
</html>
好的，今天先到這里，一會我們繼續。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
