今天學(xué)習(xí)的東西
1.盒子模型
box-sizing:border-box;//設(shè)置padding：和border：的值，它的寬度還是會保持不變
box-sizing:content-box;//(默認(rèn)設(shè)置)
當(dāng)設(shè)置padding:和border:值時(shí)丰歌，寬度會發(fā)生改變
2.浮動(dòng)float（實(shí)現(xiàn)元素并排展示）
2.1如何清除浮動(dòng)：三種
給下面的兄弟元素:clear:both;
給父級加overflow：hidden堕澄；
用偽元素蒜埋，給父級內(nèi)容生成：
.row:before{
dispay:table;
content:"";}
.row:after{
display:table;
content:””
clear:both
}//如果前面的元素float,后面的元素沒有清除float就會受前面float的影響
3.定位
position:absolute|relative//絕對定位桅咆，相對定位良风，傳參：left,top,right,bottom,px
4.布局方式的總結(jié)
1.table表格布局
2.float + margin布局
3.inline-block布局
4.flexbox布局
5.實(shí)現(xiàn)元素的垂直水平居中
parent{
position:relative;
}//父元素設(shè)置
6.導(dǎo)航欄的設(shè)置
<a href="網(wǎng)址">百度</a>
.nav{
font-size:0;
}
.nav a{
display:inline-block;
//inline-block實(shí)現(xiàn)導(dǎo)航嗡载，同時(shí)給父元素設(shè)置font-size:0
//一般正規(guī)用ul來設(shè)置導(dǎo)航欄
<style>
*{margin:0px;padding:0px;}
li{float:left;list-style: none;width:100px;text-align: center}
.row:after{
content:"";
display: block;
clear:both;
}
a{
display: block;color:#fff;text-decoration: none;
}
ul{
line-height: 50px;
background:deeppink;
}
a:hover{
background: pink;
}
</style>
</head>
<body>
<ul class="row">
<li><a href="#">手機(jī)</a></li>
<li><a href="#">平板</a></li>
<li><a href="#">電腦</a></li>
</ul>
7.float和父元素
//父元素不設(shè)置高度匾二，子元素float,父元素的高度會坍塌（本來是子繼父的高度）:
如何讓父元素重新獲取高度1.給父元素overflow:hidden;2.給父元素公共樣式row;
.row:after{
content:"";
display:table;
clear:both;
}
8.設(shè)置浮動(dòng)div
<head>
<style>
*{margin:0px;padding:0px}
.parent{
width:1000px;
background:#333;
magrin-left:center;
magrin-right:center;}//總的大盒子
.parent>div{
width:240px;
height:300px;
border:1px solid #333;
float:left;
}//大盒子里面的小盒子
.row:after{
content:"";
display:block;
clear:both;
}//設(shè)置偽元素清除float
.parent>.child{
magrin-right:13.333px;
}//設(shè)置盒子的右邊距
</style>
</head>
body{
<div class="parent row">
<div child></div>
<div child></div>
<div child></div>
<div></div>
</div>
}
