|
lesson3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Css</title>
<meta name="keywords" content="key1, key2">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="css/index.css"></head><body>
<div>這是div標(biāo)簽</div>
<span>這是span標(biāo)簽</span>
<p>這是p標(biāo)簽</p>
</body>
</html>
index.css
/*
px:意為像素;
*/
div, span, p{
color:red;
/*background-image: url("../imgs/pic.png");*/
border: 1px solid #0000ff;
}
通過(guò)上面代碼,，大家可以看到display意為展示的樣式,。 
我們看到span的樣式和另外兩個(gè)不一樣，這是因?yàn)?code style="font-size: 0.85em;font-family: Consolas, Inconsolata, Courier, monospace;margin: 0px 0.15em;padding: 0px 0.3em;white-space: pre-wrap;border-width: 1px;border-style: solid;border-color: rgb(234, 234, 234);background-color: rgb(248, 248, 248);border-radius: 3px;display: inline;">span標(biāo)簽的display屬性默認(rèn)是inline而div和p標(biāo)簽?zāi)J(rèn)屬性是block。 我們修改樣式： /*
px:意為像素;
*/
div, span, p{
color:red;
/*background-image: url("../imgs/pic.png");*/
border: 1px solid #0000ff;
display: block;
}
可以看到 
而如果我們把display屬性改為inline,，再看效果： /*
px:意為像素;
*/
div, span, p{
color:red;
/*background-image: url("../imgs/pic.png");*/
border: 1px solid #0000ff;
display: inline;
}
我們發(fā)現(xiàn)不僅格子變小了，而且都跑到一行去了 
這就涉及到了元素的分類,，所有元素可分為兩類： 塊級(jí)元素
即display的值默認(rèn)為block的元素：div,、p等,。特點(diǎn)是占用一行 行內(nèi)元素
即display的值默認(rèn)為inline的元素：span等,。特點(diǎn)是只占自己需要的長(zhǎng)度，設(shè)置寬和高都不起作用,。
我們來(lái)看一段代碼： <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Css</title>
<meta name="keywords" content="key1, key2">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="css/index.css"></head><body>
<div>這是div標(biāo)簽1</div>
<div>這是div標(biāo)簽2</div>
<span>這是span標(biāo)簽1</span>
<span>這是span標(biāo)簽2</span>
</body>
</html>
index.css
/*
px:意為像素;
*/
div, span, p{
width: 100px;
height: 50px;
/*background-image: url("../imgs/pic.png");*/
border: 1px solid #0000ff;
display: inline;
}
我們發(fā)現(xiàn)我們?cè)O(shè)置的寬和高都失效了,。所以我們現(xiàn)在遇到的問題就是：div可以設(shè)置寬高但是要換行，span不換行但不能設(shè)置寬和高,，那要怎么辦呢,？我們只需要將display屬性值設(shè)置為inline-block即可： /*
px:意為像素;
*/
div{
width: 100px;
height: 50px;
/*background-image: url("../imgs/pic.png");*/
border: 1px solid #0000ff;
display: inline-block;
}
span{
width: 100px;
height: 50px;
/*background-image: url("../imgs/pic.png");*/
border: 1px solid #0000ff;
display: inline-block;
}
|
