1 iframe
<style>
iframe{
width: 300px;
height: 400px;
border: 1px solid #eee;
}
</style>
<iframe src="021.html" frameborder="0" name="frame"></iframe>
<a href="021.html" target="frame">01</a>
<a href="022.html" target="frame">02</a>
//<iframe> 標(biāo)簽規(guī)定一個(gè)內(nèi)聯(lián)框架。
一個(gè)內(nèi)聯(lián)框架用來在當(dāng)前 HTML 文檔中嵌入另一個(gè)HTML文檔
2 一些小問題
2.1.當(dāng)遇到一個(gè)非文本的元素，想讓其垂直居中用定位
2.2 內(nèi)聯(lián)元素一些奇怪的現(xiàn)象
:給button設(shè)置margin-top,span也跟著移動
<div>
<button>btn</btn>
<span>深圳</span>
<span>廣州</span>
<div>
2.3 overflow:hidden;
<style>
.box{
overflow: hidden; //隱藏超出父級以外的內(nèi)容
width: 300px;
height: 400px;
background-color: red;
}
.one{
width: 100px;
height: 200px;
background-color: aqua;
}
.two{
width: 100px;
height: 600px;
background-color: blue;
}
</style>
3 擴(kuò)展選擇器
<style>
ul>li:first-child{ background-color: red;}
/*選擇li第一個(gè)元素*/
ul>li:last-child{ list-style: none;}
/*選擇li最后一個(gè)元素*/
ul>li:nth-child(3){border: 2px solid blue}
/*選擇li指定的元素*/
ul>li:nth-child(even){background-color: yellow}
/*選擇li偶數(shù)元素*/
ul>li:nth-child(odd){font-size: 10px}
/*選擇li奇數(shù)元素*/
ul>li:not(:nth-child(3)){font-size: 20px}
/*排除li指定的元素,選擇其他元素*/
</style>
<body>
<ul>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
</ul>
</body>
