A今天我學(xué)到了什么
1 盒子模型
1.1 box-sizing:border-box
當(dāng)設(shè)置box-sizing:border-box; 時,
設(shè)置padding,和border,div的寬度還是會保持不變
box-sizing:content-box;(默認(rèn)清晰)
當(dāng)設(shè)置padding和border時寬度會發(fā)生改變
總寬度=width+border+padding
div{
border:10px solid #333;
padding:20px;
box-sizing: border-box;
width:100px;
height:100px;
background-color: red;
}
1.2 實現(xiàn)元素居中
margin-left:auto;margin-right:auto;
2 浮動float
2.1 float：left | right 可以讓元素并排顯示
<ul>
<li>手機</li>
<li>電視</li>
<li>平板</li>
</ul>
li{float: left}
3 清除浮動
3.1 給下面的兄弟元素設(shè)置 clear:both;
.one{
width:100px;
height:50px;
background-color: red;
float: left;
}
.two{
clear: both;
width:200px;
height:50px;
background-color: yellow;
}
3.2 給父級加 overflow:hidden;
.one{
width:100px;
height:100px;
background:red;
float: left;
}
/*子級float,父級沒有高度，如何讓父級有高度*/
.parent{
overflow: hidden;
width:200px;
background:yellow;
}
3.3 父級后面增加偽元素
.row:after{ content:””；display:table; clear:both;}
.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.1 position:absolute | relative
position:relative(相對定位）
//相對定位元素的定位是相對其正常位置。
position:absolute (絕對定位）
//絕對定位的元素的位置相對于最近的已定位父元素剪返，如果沒有已定位的父元素，那么它的位置相對<html>棋蚌；
通過設(shè)置 top,right,bottom 移動
沒有設(shè)置已定位的父元素岛抄，position:absolute 通過left移動
*{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)導(dǎo)航
li{float: left}
a{
text-decoration: none;
display: block;
width: 150px;
height: 50px;
background-color: red;
}
ul{
list-style: none;
background-color: chartreuse;
text-align: center;
line-height: 50px;
}
ul:after{
content: "";
display: table;
clear: both;
}
a:hover{
background-color: aquamarine;
}
4.2 z-index
z-index:設(shè)置元素的堆疊順序
堆疊必須必須在父級上!!!!!
給position:absolute絕對定位的元素
/*z-index:可以給絕對定位的元素，設(shè)置它們的堆疊順序*/
<style>
.box{
width: 900px;
height: 900px;
background-color: lawngreen;
position: relative;
z-index: 1;
}
.one{
z-index: 2;
width: 500px;
height: 500px;
background-color: red;
position: absolute;
top: 200px;
left: 200px;
}
.two{
z-index: 3;
width: 300px;
height: 300px;
background-color: blue;
position: absolute;
top: 200px;
left: 200px;
}
.box:hover .two{
background-color: darkorchid;
z-index: 0;
}
</style>
<div class="box">
<div class="one"></div>
<div class="two"></div>
</div>
4.3 用position實現(xiàn)搜索框
div{
margin: 100px;
width: 300px;
position: absolute;
}
input{
width: 300px;
height: 30px;
background-color: #eeeeee;
border-radius: 15px;
border: none;
outline: none;
padding-left: 10px;
}
button{
width: 23px;
height: 22px;
background-image: url("images/icon4.png");
position: absolute;
right: 0;
top: 50%;
margin-top: -11px;
border: none;
outline: none;
}
4.4 布局方式的總結(jié)
1.默認(rèn)布局
2.浮動布局(左右安置)
3.層級布局(定位)
5 實現(xiàn)元素的垂直水平居中
.box{
width: 500px;
height: 500px;
background-color: red;
position: relative;
}
.one{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
top:50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
6 CSS樣式的幾種引入方式
6.1 外部樣式
<link rel="stylesheet" type="text/css" href="/c5.css">
6.2 內(nèi)部樣式表（位于 <head> 標(biāo)簽內(nèi)部）
<style>
p{color:pink;font-size:16px}
</style>
6.3 內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）
<p style=”color:pink;font-size:16px”>hello world</p>
樣式的優(yōu)先級
內(nèi)聯(lián)樣式 > 內(nèi)部樣式 > 外部樣式
以后統(tǒng)一使用外聯(lián)樣式
