CSS中width和height的默認值auto與%案例詳解
發(fā)布時間：2020-09-30 11:57:49 作者：佚名 
我要評論
我要評論這篇文章給大家介紹了CSS中width和height的默認值auto與%案例，本文通過實例案例給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧
結論
- width的%：定義基于包含塊（父元素）寬度的百分比寬度，會突破父級的限制
- width的auto：盡量被父級包裹
- height的%：基于包含它的塊級對象的百分比高度，會突破父級的限制
- height的auto：盡量被父級包裹
案例
一定復制代碼跑一遍，花幾分鐘體會一下盡量被父級包裹與突破父級的限制
width案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;padding: 0;
}
body {
background: #dcdcdc;
}
.box {
width: 400px;
border: 3px solid red;
padding: 0 50px;
}
.box1 {
width: auto;
height: 100px;
background: pink;
padding: 0 50px;
margin: 0 50px;
border-width: 0 50px;
border-style: solid;
border-color: green;
}
.box2 {
width: 100%;
height: 100px;
background: gold;
padding: 0 50px;
margin: 0 50px;
border-width: 0 50px;
border-style: solid;
border-color: green;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
height案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;padding: 0;
}
body {
background: #dcdcdc;
}
.box {
width: 400px;
border: 3px solid red;
padding: 50 0px;
height: 400px;
}
.box1 {
width: 200px;
height:auto;
background: pink;
padding: 50px 0px;
margin: 50px 0px;
border-width: 50px 0px;
border-style: solid;
border-color: green;
}
.box2 {
width: 200px;
height:100%;
background: gold;
padding: 50px 0px;
margin: 50px 0px;
border-width: 50px 0px;
border-style: solid;
border-color: green;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
到此這篇關于CSS中width和height的默認值auto與%案例詳解的文章就介紹到這了,更多相關css width和height默認值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
CSS中height和width在IE和其他瀏覽器中的區(qū)別圖文詳解
這篇文章主要介紹了CSS中height和width在IE和其他瀏覽器中的區(qū)別，需要的朋友可以參考下2014-05-12css行內(nèi)元素padding,margin,width,height沒有變化
這篇文章主要介紹了css行內(nèi)元素設置padding,margin,width,height沒有變化的解決方法，需要的朋友可以參考下2014-05-07IE6不支持CSS中的min-width/height屬性問題的解決方法
min-width與min-height在css中是相當好用的語法，可以讓HTML元素最少仍保持一定的寬和高，而需要時仍隨著元素的內(nèi)容增加寬和高。2009-09-08- 關鍵字描述：最大 圖片 控制 這個 var // 寬度 maxwidth if 科汛CMS官方模板中自帶了一段JS用來控制文章中的圖片的最大高度和寬度。不過我也很奇怪，為什么這個j2009-06-06