盒模型
盒模型包括四個部分：
content：內(nèi)容區(qū)。盒子中的內(nèi)容(如圖中的手機)脊凰。
padding：內(nèi)邊距。盒子與內(nèi)容之間的距離茂腥。
border：邊框狸涌。盒子的邊緣(盒子本身)。
margin：外邊距最岗。盒子與盒子之間的距離帕胆。
注：塊元素、內(nèi)聯(lián)塊元素可以設(shè)置寬高般渡。內(nèi)聯(lián)元素設(shè)置寬高無效懒豹，瀏覽器不支持芙盘。
image.png
width
默認值為auto
塊級元素: 盒模型的寬度(m + b + p + w) = 包含塊內(nèi)容區(qū)的100%
內(nèi)聯(lián)元素,行內(nèi)塊: 靠內(nèi)容撐開
絕對定位元素: 靠內(nèi)容撐開
相對定位元素: 元素特性不變 盒模型的寬度(m + b + p + w) = 包含塊內(nèi)容區(qū)的100%
固定定位: 靠內(nèi)容撐開
浮動元素:靠內(nèi)容撐開
是否是繼承屬性 否
百分比參照于誰 包含塊的width
height
默認值為auto
都是代表靠內(nèi)容撐開
是否是繼承屬性 否
百分比參照于誰 包含塊的height
padding
margin
默認值為0
是否是繼承屬性 否
百分比參照于誰 包含塊的width
border
border-width (一般直接指定px值 不寫百分比)
left right top bottom
默認值:auto
是否是繼承屬性 否
百分比參照于誰 包含塊的width
計算盒模型
image.png
image.png
盒子的總寬度：width+padding-left+padding-right+border-left+border-right=122px
盒子的總寬度：width+padding-left+padding-right+border-left+border-right+margin-left+margin-right=142px（盒子在瀏覽器中占用的空間大小）
<!DOCTYPE html>
<html lang="zh-cn">
<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>mi demo</title>
<style>
.box{
width: 100px;
height: 100px;
padding: 10px;
border: 1px dotted #4ff86e;
margin: 10px;
background-color: brown;
}
</style>
</head>
<body>
<div class="box">mi 8</div>
</body>
</html>
盒模型的寬高
盒模式中 width 和 height 默認定義的是內(nèi)容區(qū)的尺寸脸秽，不包括 padding儒老，border 和 margin。
可以使用 px 和 %（占父元素的百分比） 定義內(nèi)容區(qū)的大小记餐。
image.png
<!DOCTYPE html>
<html lang="zh-cn">
<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>盒模式的寬與高</title>
<style>
html,body{
/* html是body的父元素驮樊，所以body的寬度會受父元素html的影響 */
/* body默認的高度是內(nèi)容的高度，將html和body的高度設(shè)置為100%后片酝，body會占滿整個瀏覽器 */
height: 100%;
}
.box{
/* 用像素px來定義寬高 */
width: 100px;
height: 100px;
background-color: brown;
}
.child{
/* 用百分比%來定義寬高囚衔，百分比是相對于父元素--.box的寬高來定義的 */
width: 50%;
height: 50%;
}
</style>
</head>
<body>
<div class="box">
<div class="child">child</div>
</div>
</body>
</html>
padding--內(nèi)邊距
公式：四面相等，只設(shè)一個雕沿，對面相等练湿，后者省略。
<!DOCTYPE html>
<html lang="zh-cn">
<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>padding demo</title>
<style>
div{
background-color: brown;
margin: 10px;
width: 100px;
height: 100px;
}
.simple1{
/* 四邊相等只設(shè)一個 */
padding:5px;
}
.simple2{
/* 順時針--上右下左 */
/* padding-top: 5px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 7px; */
padding:5px 10px 6px 7px;
}
.simple3{
/* 上下审轮，左右 */
padding: 10px 11px;
}
.simple4{
/* padding: 10px 11px 5px 11px; */
/* 對面相等鞠鲜，后者省略 */
padding: 10px 11px 5px;
}
</style>
</head>
<body>
<div class="simple1">lorem.</div>
<div class="simple2">lorem.</div>
<div class="simple3">lorem.</div>
<div class="simple4">lorem.</div>
</body>
</html>
border--邊框
注：如果不設(shè)置邊框的顏色border-color，則邊框采用字體的顏色color.
<!DOCTYPE html>
<html lang="zh-cn">
<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>border demo</title>
<style>
div{
width: 100px;
height: 100px;
background-color: yellow;
margin: 10px;
}
.simple1{
/* 如果不設(shè)置邊框的顏色断国，則邊框采用字體的顏色 */
color: #d535eb;
/* border-width: 1px;
border-color: #86e72b; */
/* 簡寫方式 */
border:1px solid #62ce9c;
}
.simple2{
color: brown;
border-top: 1px dotted #62ce9c;
border-right: 2px solid #fabdec;
border-bottom: 1px double #d535eb;
border-left: 3px solid #4338e4;
}
input{
/* 清除文本框的默認樣式 */
border: none;
/* 清楚文本框在獲得焦點時出現(xiàn)的藍色輪廓 */
outline: none;
}
</style>
</head>
<body>
<div class="simple1">lorem</div>
<div class="simple2">lorem</div>
<label>用戶名：</label><input type="text">
</body>
</html>
border和padding可以設(shè)置給塊元素贤姆、行內(nèi)元素。
label{
padding: 10px;
border: 8px solid red;;
background: #4338e4;
}
margin--外邊距
注意：margin 可以設(shè)置給塊元素稳衬，對于行內(nèi)元素只可以設(shè)置左右margin霞捡，不可以設(shè)置上下margin。
<!DOCTYPE html>
<html lang="zh-cn">
<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>margin-01 demo</title>
<style>
div{
width: 100px;
height: 100px;
background-color: blueviolet;
padding: 5px;
}
.simple1{
/* 四面相等薄疚，只設(shè)一個 */
margin: 10px;
}
.simple2{
margin-top: 5px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 5px;
}
.simple3{
/* 上下碧信，左右 */
margin:20px 10px;
}
.simple4{
/* 等價于margin:10px 5px 6px 5px; */
margin: 10px 5px 6px;
}
</style>
</head>
<body>
<div class="simple1">lorem.</div>
<div class="simple2">lorem</div>
<div class="simple3">lorem</div>
<div class="simple4">lorem</div>
</body>
</html>
外邊距特性：
相鄰元素的垂直margin合并--取下面元素的上邊距和上面元素的下邊距中較大的一個值。
捕獲.JPG
<!DOCTYPE html>
<html lang="zh-cn">
<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>margin demo</title>
<style>
div{
width: 100px;
height: 100px;
background-color: yellowgreen;
padding: 5px;
}
.simple1{
margin: 20px;
}
.simple2{
margin: 30px;
}
</style>
</head>
<body>
<div class="simple1">margin</div>
<div class="simple2">合并</div>
</body>
</html>
相鄰元素的水平margin相加
QQ截圖20181203213101.png
QQ截圖20181203213116.png
<!DOCTYPE html>
<html lang="zh-cn">
<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>margin demo</title>
<style>
div{
width: 100px;
height: 100px;
background-color: yellowgreen;
padding: 5px;
}
.simple{
display: inline-block;
}
.simple1{
margin: 20px;
}
.simple2{
margin: 30px;
}
</style>
</head>
<body>
<div class="simple simple1">margin</div>
<div class="simple simple2">合并</div>
</body>
</html>
外邊距塌陷問題
子元素的上下外邊距沒有正常顯示街夭。
<!DOCTYPE html>
<html lang="zh-cn">
<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>外邊距塌陷 demo</title>
<style>
.parent{
background-color: pink;
margin: 20px;
width: 300px;
}
.child{
margin: 20px;
background-color: brown;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">lorem</div>
</div>
</body>
</html>
問題：上面的代碼 .child 的外邊距和 .parent 重疊砰碴，看起來 .child 的外邊距消失。
解決外邊距塌陷的方法
1.用邊框border來解決板丽，設(shè)置自父元素的border-top,border-bottom的值呈枉。
.parent {
......
border-top: 1px solid pink;/*解決上邊距塌陷問題*/
border-bottom: 1px solid pink;/*解決下邊距塌陷問題*/
}
2.用內(nèi)邊距padding來解決，設(shè)置父元素的padding-top,padding-bottom的值埃碱。
.parent {
......
padding-top: 1px; /*解決上邊距塌陷問題*/
padding-bottom: 1px; /*解決下邊距塌陷問題*/
}
3.用overflow來解決猖辫，設(shè)置父元素的overflow:hidden.
.parent {
......
overflow: hidden;
}
標準盒模型&怪異盒模型
border-box怪異模式
盒子本身的寬度=width(width中已經(jīng)包含了border和padding的值)。
content-box標準模式
盒子本身的寬度=width+padding(左右)+border(左右)砚殿。
絕對定位
包含塊
離他最近且開啟了定位(非static)的祖先元素,若沒有開啟了定位的祖先元素啃憎，那么包含塊為初始包含塊
初始包含塊
一個視窗大小的矩形，默認情況下位置與視窗重合
image.png
絕對定位的使用場景
垂直水平居中布局
絕對定位的元素的 margin + border + padding + width = 包含塊的width + padding
//實現(xiàn)垂直水平居中布局
<style>
*{
margin: 0;
padding: 0;
}
#father{
width: 200px;
height: 200px;
position: relative;
background-color: brown;
padding: 0 50px;
}
#son{
width: 100px;
height: 100px;
/*垂直水平居中*/
/* 已知高寬
絕對定位元素的特性:
m + b + p + w + left + right = 包含塊的(w+p)
auto + 0 + 0 + 100 + 0 + 0 = 視口的寬度
auto + 0 + 0 + 100 + 0 + 0 = 200 + 50*2
m + b + p + h + top + bottom = 包含塊的(h+p)
*/
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div id="father">
<div id="son"></div>
</div>
</body>
--
絕對定位模擬固定定位
在移動端似炎，固定定位兼容性并不友好辛萍，所以用絕對定位來實現(xiàn)固定定位的效果悯姊。
思路：固定定位一般是參照視口來固定位置，一般不使用html或body來充當視口(這兩個標簽做視口效果時而不靈)贩毕，所以我們自己用一個div標簽來充當視口挠轴。
1.禁用系統(tǒng)滾動條
html,body{
overflow:hidden;
}
2.將滾動條加給一個包裹元素
包裹元素的id/class{
overflow:auto;
}
- 讓包裹元素充當視口
body html 包裹元素的 width和height為百分百
完整代碼如下：
<style>
*{
margin: 0;
padding: 0;
}
//禁用系統(tǒng)滾動條
html{
width: 100%;
height: 100%;
overflow: hidden;
}
body{
width: 100%;
height: 100%;
overflow: hidden;
}
//div視口
#app{
overflow: auto;
width: 100%;
height: 100%;
}
#test{
width: 100px;
height: 100px;
position: absolute;
left: 40px;
top: 40px;
background: #c580fd;
}
</style>
</head>
<body>
<div id="app">
<div style="height:3000px"></div>
<div id="test"></div>
</div>
</body>
盒模型 浮動 定位的使用場景
margin為負值!!!!!
定位版的三列布局
浮動版的三列布局
圣杯
雙飛翼
偽等高布局
粘連布局
<style>
*{
padding: 0;
margin: 0;
}
html,body{
overflow: hidden;
width: 100%;
height: 100%;
}
div{
text-align: center;
}
#wrap{
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(235, 108, 247);
}
#wrap .main{
min-height: 100%;
}
#wrap .main .main-content{
padding-bottom: 50px;
}
.clearfix{
*zoom: 1;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
#wrap .footer{
margin-top: -50px;
height: 50px;
line-height: 50px;
background-color: crimson;
}
</style>
</head>
<body>
<div id="wrap">
<div class="main">
<div class="main-content" class="clearfix">
mian<br/>
mian<br/>
mian<br/>
mian<br/>
mian<br/>
mian<br/>
mian<br/>
mian<br/>
mian<br/>
mian<br/>
</div>
</div>
<div class="footer">footer</div>
</div>
</body>
