1、css盒子模型
1.1:box-sizing:border-box
當設置box-sizing:border-box時;
設置padding,和border,它的寬度還是會保持不變
//HTML
<div></div>
//css
div{
border:10px solid #333;
padding:20px;
box-sizing: content-box;
width:100px;
height:100px;
background-color: red;
}
box-sizing:content-box;(默認清晰)
//沒有圖像，
當設置padding和border時寬度會發(fā)生改變
總寬度=width+border+padding
1.2實現(xiàn)元素居中
margin-left:auto;
margin-right:auto;
2、浮動float
float：left/right/top/bottom
//目的：為了讓元素并排顯示
//HTML
<ul>
<li>手機</li>
<li>電視</li>
<li>平板</li>
</ul>
//CSS
*{margin:0;padding:0}
li{float: left}
3、如何清除浮動
（1）給下面的兄弟元素給clear:both;
//HTML
<div class="one"></div>
<div class="two"></div>
//CSS
.one{
width:100px;
height:50px;
background-color: red;
float: left;
}
.two{
clear: both;
width:200px;
height:50px;
background-color: yellow;
}
（2）給父級加overflow:hidden;
//HTML
<div class="parent">
<div class="one"></div>
</div>
//css
.one{
width:100px;
height:100px;
background:red;
float: left;
}
/*子級float,父級沒有高度，如何讓父級有高度*/
.parent{
overflow: hidden;
width:200px;
background:yellow;
}
（3）用偽元素,給父級內(nèi)容生成
.row:before{ display:table; content:”” }
.row:after{ display:table; display:table; content:””；clear:both;
//HTML
<div class="parent">
<div class="one"></div>
</div>
//css
.one{
width:100px;
height:100px;
background:red;
float: left;
}
/*子級float,父級沒有高度，如何讓父級有高度*/
.parent{
/*overflow: hidden;*/
width:200px;
background:yellow;
}
.parent:after{
content:"";
display: table;
clear:both;
}
4.定位：posintion
4.1position:absolute | relative
position:relative(相對定位）
//相對定位元素的定位是相對其正常位置。
position:absolute (絕對定位）
//絕對定位的元素的位置相對于最近的已定位父元素，如果沒有已定位的父元素，那么它的位置相對<html>；
position:absolute | relative都position:absolute ,top,right,bottom移動
沒有設置已定位的父元素，position:absolute 通過left移動
//HTML
<div class="one">
<div class="two"> </div>
</div>
//css
*{margin:0;padding:0}
/*相對定位:就是元素在頁面上正常的位置*/
.one{
margin-left:100px;
width:100px;
height:100px;
background-color: red;
}
.two{
width:50px;
height:50px;
background-color: yellow;
position: absolute;
left:0;
}
利用float和display實現(xiàn)導航
//HTML
<ul>
<li><a href="#">手機</a></li>
<li><a href="#">平板</a></li>
<li><a href="#">電腦</a></li>
</ul>
//CSS
*{
margin:0;
padding:0;
}
a{
text-decoration: none;
display: block;
color:white;
}
ul{
list-style: none;
overflow: hidden;
background:pink
}
li{
float:left;
line-height: 50px;
width:100px;
text-align:center;
}
a:hover{
color:gainsboro;
background-color: deeppink;
}
4.2 z-index
z-index:設置元素的堆疊順序 給position:absolute絕對定位的元素
//HTML
<div class="parent">
<div class="one"> </div>
<div class="two"></div>
</div>
//CSS
/*z-index:可以給絕對定位的元素，設置它們的堆疊順序*/
.parent{
width:300px;
height:300px;
background-color: red;
position: relative;
}
.one{
z-index: 100;
position: absolute;
width:100px;
height:50px;
background-color: green;
}
.two{
z-index:90;
position: absolute;
width:50px;
height:50px;
background-color: pink;
}
.parent:hover .one{
z-index: 80;
}
4.3例子:用position實現(xiàn)搜索框
//***當子元素沒有設置寬度，如果設置了絕對定位,它不會繼承父元素的寬度
//HTML
div class="center">
<input type="text" placeholder="搜素"/>
<a></a>
</div>
//CSS
*{margin:0;padding: 0;}
div{
width:250px;height:40px;margin-top:15px;
position:relative;
}
input{
box-sizing: border-box;
width:250px;
outline: none;
padding-left:20px;
height: 38px;
font-size: 14px;
border: 1px solid #eee;
border-radius: 40px;
background: #eee;
}
a{
cursor: pointer;
width:24px;
height:24px;
display: block;position:absolute;top:9px;right:5px;
background:url(images/icon4.png) no-repeat
}
input:focus div{width:300px;}
5、實現(xiàn)元素的垂直水平居中
父元素設置parent{position:relative;}
子元素設置child{
position:absolute;
left:50%;
top:50%;
margin-left:-50%*child*width;
margin-top:-50%*child*height;
}
//HTML
<body>
<div class="one">
<div class="two"></div>
</body>
</div>
//CSS
*{
margin:0;
padding:0}
.one{
width: 500px;
height: 500px;
background-color: green;
position:relative}
.two{
width :100px;
height:100px;
background: red ;
position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
}
6、CSS樣式的幾種引入方式
外部樣式
<link rel="stylesheet" type="text/css" href="/c5.css">
內(nèi)部樣式表（位于 <head> 標簽內(nèi)部）
<style>
p{color:pink;font-size:16px}
</style>
內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）
<p style=”color:pink;font-size:16px”>hello world</p>
給同一選擇器設置同一樣式,離元素近的樣式設置方式優(yōu)先級高
