整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
切圖公司的web前端項(xiàng)目外包中，有的情況需要用背景圖片來(lái)替代圖片，使用背景圖片替換img標(biāo)簽時(shí)，img標(biāo)簽可以根據(jù)屏幕寬度自適應(yīng)高度，而背景圖片卻無(wú)法適應(yīng)高度，使用css的內(nèi)邊距（padding）可以解決高度問(wèn)題，因?yàn)榇怪狈较虻膒adding值，根據(jù)寬度的大小來(lái)計(jì)算的，辦法如下；
<style>
.wrap{
width: 100%;
}
.banner{
width: 100%;
max-width: 490px; /**圖片的寬度不大于圖片實(shí)際像素**/
height: 0;
max-height: 329px;
padding-bottom: 67.14%; /**根據(jù)圖片高寬比計(jì)算*/
margin: 0 auto;
background: url("images/test.jpg") no-repeat center;
background-size: cover;
}
@media only screen and (min-width: 490px) {
/**屏幕大于490時(shí)，將背景框高度設(shè)置為圖片高度的實(shí)際像素**/
.banner{
height: 329px;
padding-bottom: 0;
}
}
</style>
<div class="wrap">
<!--role屬性 aria-label屬性增強(qiáng)html的可讀性，更語(yǔ)義化-->
<div role="img" aria-label="banner img" class="banner"></div>
</div>
來(lái)源：切圖網(wǎng) qietu.com
口單位(Viewport units)
什么是視口？
在PC端，視口指的是在PC端，指的是瀏覽器的可視區(qū)域；
而在移動(dòng)端，它涉及3個(gè)視口：Layout Viewport（布局視口），Visual Viewport（視覺視口），Ideal Viewport（理想視口）。
視口單位中的“視口”，PC端指的是瀏覽器的可視區(qū)域；移動(dòng)端指的就是Viewport中的Layout Viewport。
根據(jù)CSS3規(guī)范，視口單位主要包括以下4個(gè)：
1.vw：1vw等于視口寬度的1%。
2.vh：1vh等于視口高度的1%。
3.vmin：選取vw和vh中最小的那個(gè)。
4.vmax：選取vw和vh中最大的那個(gè)。
vh and vw：相對(duì)于視口的高度和寬度，而不是父元素的（CSS百分比是相對(duì)于包含它的最近的父元素的高度和寬度）。1vh 等于1/100的視口高度，1vw 等于1/100的視口寬度。
比如：瀏覽器高度950px，寬度為1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。
vmax相對(duì)于視口的寬度或高度中較大的那個(gè)。其中最大的那個(gè)被均分為100單位的vmax。
vmin相對(duì)于視口的寬度或高度中較小的那個(gè)。其中最小的那個(gè)被均分為100單位的vmin。
請(qǐng)看下面簡(jiǎn)單的栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>VW&VH</title>
</head>
<style>
* {
padding: 0;
margin: 0
}
.left {
float: left;
width: 50vw;
height: 20vh;
background-color: blue;
text-align: center;
line-height: 20vh;
font-size: 3rem
}
.right {
float: right;
width: 50vw;
height: 20vh;
background-color: green;
text-align: center;
line-height: 20vh;
font-size: 3rem
}
</style>
<body>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>網(wǎng)頁(yè)布局中經(jīng)常要定義元素的寬和高。但很多時(shí)候我們希望元素的大小能夠根據(jù)窗口或子元素
自動(dòng)調(diào)整，這就是pc自適應(yīng)。
自適應(yīng)的優(yōu)點(diǎn)：
元素自適應(yīng)在網(wǎng)頁(yè)布局中非常重要，它能夠使網(wǎng)頁(yè)顯示更靈活，可以適應(yīng)在不同設(shè)備、不同窗口和不同分辨率下顯示。
元素寬度設(shè)置為100%。（塊元素寬度默認(rèn)為100%）
或者不設(shè)置寬度（width）;（寬度是父元素的寬度）
1)自適應(yīng)元素高度：height:auto;或者不設(shè)置;（是子元素?fù)伍_父元素的高度）
?
2)元素高度自適應(yīng)窗口高度
設(shè)置方法：html,body{height:100%;}
注：如果設(shè)置子元素的高度跟隨父元素的高度變化而變化，那么父元素必須有高度。
min-height屬性：最小高度；(IE6瀏覽器不識(shí)別該屬性) ?
hack1:min-height:value;_height:value; ?
hack2:min-height:value; height:auto!important;height:value;
當(dāng)子元素有浮動(dòng)并且父元素沒有高度的情況下父元素會(huì)出現(xiàn)高度塌陷
hack1：給父元素添加聲明overflow:hidden;(觸發(fā)一個(gè)BFC)
hack2: 在浮動(dòng)元素下方添加空div,并給該元素添加 聲明：div{clear:both; height:0; overflow:hidden;}
hack3:萬(wàn)能清除浮動(dòng)法
選擇符:after {
content: "";
clear: both;
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
}visibility:hidden;和display:none;的區(qū)別：
visibility:hidden;屬性會(huì)使對(duì)象不可見，但該對(duì)象在網(wǎng)頁(yè)所占的空間沒有改變，等于留出了一塊空白區(qū)域，而 display:none屬性會(huì)使這個(gè)對(duì)象徹底消失不顯示，也不再占用位置。
1）、::after : 與content屬性一起使用，定義在對(duì)象后的內(nèi)容。
語(yǔ)法：選擇符:：after{content:”文字”;}
選擇符:：after{content:url(圖片路徑)；}
如：div::after{content:url(logo.jpg);}
div::after{content:"文本內(nèi)容";}
2）、::before: 與content屬性一起使用,定義在對(duì)象前 的內(nèi)容。
div::before{content:"在其前放內(nèi)容";}
3）、::first-letter 定義對(duì)象內(nèi)第一個(gè)字符的樣式。
說(shuō)明：
*(該偽元素只能用于塊級(jí)元素)
4）、::first-line:定義對(duì)象內(nèi)第一行的樣式。
*(該偽元素只能用于塊級(jí)元素。)
本文轉(zhuǎn)自知乎號(hào)：千鋒HTML5學(xué)院
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
