A.今天掌握了什么
1.css盒子模型
1.1box-sizing:border-box
image.png
當(dāng)設(shè)置box-sizing:border-box
設(shè)置pandding,和border,它的寬度還是會(huì)保持不變
box-sizing：content-box(默認(rèn)清晰)
當(dāng)設(shè)置pandding和border時(shí)寬度會(huì)發(fā)生改變
總寬度=width+border+pandding
//html
<div><div>
//css
div{ border:10px;solid;#333;
padding:10px;
box-sizing:content-box
width:100px;
height:100px;
background-color:red
}
1.2實(shí)現(xiàn)元素居中
display:block
margin-left:auto;margin-right:auto;
2.浮動(dòng)
float：left/right/center/bottom
目的：為了讓元素并排顯示
>#####2.1如何清除浮動(dòng)
（1）給下面的兄弟元素給clear：both
//html
<div class=“one”><div>
<div class=“two”></div>
//css
.one{ width:100px;
height:100px;
background-color:red;
float:left;
}
.two{ clear:both;
width:200px;
hedght:50px;
background-color:yellow;
}
（2）給父級(jí)加overflow:hidden
//html
<div class=“one”></div>
<div class=“two”></div>
//css
.two{
width:100px;
height:100px;
background:red;
float:left;
}
/*子級(jí)float，父級(jí)有高度，如何讓父級(jí)有高度*/
.one{
overflow:hidden；
width：200px;
background:yellow;
}
（3）用偽元素，給父級(jí)內(nèi)容生成
.row:before{display:table;content" "}
.row:after{display:table;content:" "
clear:both}
//html
<div class=“one”></div>
<div class=“two”></div>
//css
.two{
width:100px;
height:100px;
background:red;
float:left;
}
/*子級(jí)float，父級(jí)有高度，如何讓父級(jí)有高度*/
.one{
overflow:hidden；
width：200px;
background:yellow;
}
.one,two:ofter{content:“”;
display:table;
cear:both;
}
3.定位
postion:absolute/relative
(1)relative
相對(duì)元素的定位是相對(duì)其正常位置
position：relative
(2)basolute
絕對(duì)定位的元素的位置相對(duì)于最近的已定位父元素，如果沒有已定位的父元素，那么他的位置相當(dāng)于<HTML>
//html
<div class=“one”>
<div class=“two”><div>
</div>
//css
*{margin:0px;padding:0px;}
/*相對(duì)定位：就是元素在頁面上的位置*/
.one
{margin-left:100px;
width:100px；
height:100px;
background-color:red
}
.two
{width:50px;
height:50px;
background-color:yellow;
position:absolute;
left:0;
}
都通過left,top,right,bottom移動(dòng)
z-index:設(shè)置元素的堆積順序 給position:absolute絕對(duì)定位的元素
例子：搜索框
input當(dāng)子元素沒有設(shè)置寬度，如果設(shè)置了絕對(duì)定位，他不會(huì)繼承父元素的寬度
4.布局方式的總結(jié)
1、默認(rèn)布局
2、浮動(dòng)布局（左右安置）
層級(jí)布局（定位）
5.實(shí)現(xiàn)元素的垂直居中
父元素設(shè)置parent{position:relative}
子元素設(shè)置child{position:absolute;
left:50%;top:50%;
margin-left:50%*child*width;
margin-top:50%*child*height;}
6.css樣式的幾種引入方式
外部樣式
<link rel=""“stylesheet”type=text/css“href”=/c5.css>
內(nèi)部樣式表（位于<head>標(biāo)簽內(nèi)部）
<style>
給同一選擇器設(shè)置同一樣式，離元素近的樣式設(shè)置方式優(yōu)先級(jí)高
B.我掌握了什么？
>##### .css盒子模型
1.1box-sizing:border-box
當(dāng)設(shè)置box-sizing:border-box
設(shè)置pandding,和border,它的寬度還是會(huì)保持不變
box-sizing：content-box(默認(rèn)清晰)
當(dāng)設(shè)置pandding和border時(shí)寬度會(huì)發(fā)生改變
總寬度=width+border+pandding
//html
<div><div>
//css
div{ border:10px;solid;#333;
padding:10px;
box-sizing:content-box
width:100px;
height:100px;
background-color:red
}
實(shí)現(xiàn)元素居中
display:block
margin-left:auto;margin-right:auto;
C今天沒掌握什么？
.浮動(dòng)
float：left/right/center/bottom
目的：為了讓元素并排顯示
//html
<ul>
<li>手機(jī)</li>
<li>電腦</li>
<li>平板</li>
<ul>
>#####如何清除浮動(dòng)
（1）給下面的兄弟元素給clear：both
//html
<div class=“one”><div>
<div class=“two”></div>
//css
.one{ width:100px;
height:100px;
background-color:red;
float:left;
}
.two{ clear:both;
width:200px;
hedght:50px;
background-color:yellow;
}
給父級(jí)加overflow:hidden
//html
<div class=“one”></div>
<div class=“two”></div>
//css
.two{
width:100px;
height:100px;
background:red;
float:left;
}
/*子級(jí)float，父級(jí)有高度，如何讓父級(jí)有高度*/
.one{
overflow:hidden；
width：200px;
background:yellow;
}
用偽元素，給父級(jí)內(nèi)容生成
.row:before{display:table;content" "}
.row:after{display:table;content:" "
clear:both}
//html
<div class=“one”></div>
<div class=“two”></div>
//css
.two{
width:100px;
height:100px;
background:red;
float:left;
}
/*子級(jí)float，父級(jí)有高度，如何讓父級(jí)有高度*/
.one{
overflow:hidden；
width：200px;
background:yellow;
}
.one,two:ofter{content:“”;
display:table;
cear:both;
}
3.定位
postion:absolute/relative
(1)relative
相對(duì)元素的定位是相對(duì)其正常位置
position：relative
basolute
絕對(duì)定位的元素的位置相對(duì)于最近的已定位父元素，如果沒有已定位的父元素，那么他的位置相當(dāng)于<HTML>
//html
<div class=“one”>
<div class=“two”><div>
</div>
//css
*{margin:0px;padding:0px;}
/*相對(duì)定位：就是元素在頁面上的位置*/
.one
{margin-left:100px;
width:100px；
height:100px;
background-color:red
}
.two
{width:50px;
height:50px;
background-color:yellow;
position:absolute;
left:0;
}
都通過left,top,right,bottom移動(dòng)
z-index:設(shè)置元素的堆積順序 給position:absolute絕對(duì)定位的元素
例子：搜索框
input當(dāng)子元素沒有設(shè)置寬度，如果設(shè)置了絕對(duì)定位，他不會(huì)繼承父元素的寬度
6.css樣式的幾種引入方式
外部樣式
<link rel=""“stylesheet”type=text/css“href”=/c5.css>
內(nèi)部樣式表（位于<head>標(biāo)簽內(nèi)部）
<style>
pstyle=“color:pink,
font-size:16px”</style>
給同一選擇器設(shè)置同一樣式，離元素近的樣式設(shè)置方式優(yōu)先級(jí)高
