一 屬性
網(wǎng)頁(yè)上的每個(gè)元素都是一個(gè)盒模型.屬性決定了盒模型的行為方式.block(塊元素)是占用最大可用寬度的元素,前后都有換行符.
以下示例中的樣式規(guī)則將內(nèi)聯(lián)元素顯示為塊級(jí)元素.
html代碼:
改變?cè)醋詯?要么源自痛.
最困難的事情就是認(rèn)識(shí)自己.
有勇氣承擔(dān)命運(yùn)這才是英雄好漢
自知之明是最難得的知識(shí)
css代碼:
span{ :block; }
效果如下:
原本內(nèi)聯(lián)元素會(huì)顯示在一個(gè)段落內(nèi),但是現(xiàn)在css樣式屬性設(shè)置為了block,所以顯示為塊級(jí)元素.
元素(內(nèi)聯(lián)元素)只占用盡可能多的寬度,并不強(qiáng)制換行.
css代碼:
p{ :; }
設(shè)置元素的屬性只會(huì)改變?cè)氐娘@示方式,而不會(huì)改變?cè)氐念愋?所以,帶有:block的內(nèi)聯(lián)元素不允許在其中包含其他塊元素.
:none隱藏一個(gè)元素,所以它不占用任何空間.該元素將被隱藏,在頁(yè)面顯示時(shí)不會(huì)展現(xiàn)出來(lái),就好像該元素不存在一樣.
html代碼:
因?yàn)?none,你們看不到我.
有時(shí)候讀書是一種巧妙地避開思考的方法
css代碼:
h1{:none;}
還有很多其他的參數(shù)值,比如list-item,table,table-cell,table-,grid等等
二 屬性
屬性用于指定元素是可見的還是隱藏的.最常見的值是和.
可以通過將屬性設(shè)置為"none"或者將屬性設(shè)置為""來(lái)隱藏元素.但是請(qǐng)注意,這兩種方法會(huì)產(chǎn)生不同的結(jié)果:
:隱藏一個(gè)元素,但是它仍然占據(jù)與之前相同的空間.該元素將被隱藏,但仍然會(huì)影響布局.
html代碼:
越是沒有本領(lǐng)的就越是自命不凡
我被設(shè)置了:
上方div的位置變成了空行,因?yàn)閐iv元素被設(shè)置了:
css代碼:
div.{ :; }
:none隱藏一個(gè)元素,不會(huì)為該元素保留一個(gè)位置.
三 css 定位
css 定位屬性允許你定位一個(gè)元素.它也可以將元素放在另一個(gè)元素之后,并指定元素的內(nèi)容太大時(shí)應(yīng)該發(fā)生的情況.
可以使用top,,left,和right屬性來(lái)定位元素.但是,除非屬性有進(jìn)行初始化設(shè)置參數(shù)值css 中背景圖片定位,這些屬性才能起效果.
html元素默認(rèn)為靜態(tài)定位.靜態(tài)定位元素總是按照頁(yè)面的正常流動(dòng)進(jìn)行定位.(使頁(yè)面在默認(rèn)順序中展示)
html代碼:
沒有定位
沒有定位
沒有定位
沒有定位
我用了靜態(tài)定位
css代碼:
p.{:; top:30px;right:5px; color:red; }
效果如下:
靜態(tài)定位元素不受top,,left,right屬性的影響.
:fixed屬性能使具有固定位置的元素相對(duì)于瀏覽器窗口被定位,并且即使窗口被滾動(dòng)也不會(huì)移動(dòng).
可以使用top,,left和right中的一個(gè)或多個(gè)屬性來(lái)指定位置.
在下面的例子中,段落固定為top:30px,right:5px.
css代碼:
p.{ :fixed; top:30px; right:5px;color:red;}
效果如下:
fixed參數(shù)能把元素從正常的順序中拉出.可以無(wú)視其他元素的定位.
設(shè)置了fixed的元素可以重疊在其他元素上.
: 相對(duì)定位. 元素的定位是相對(duì)其正常位置而言.
可以使用top,right,,和left的屬性來(lái)指定呈現(xiàn)的元素將如何移動(dòng).
css代碼:
p{width:350px; :1px black solid; :fixed; }
span{:green; color:white; :; top:150px; left:50px; }
效果如下:
定位的元素的內(nèi)容可以移動(dòng)并與其他元素重疊,但是元素的保留空間在正常流程中仍然保留
此值不能用于表格單元格css 中背景圖片定位,列,列組,行,行組或標(biāo)題
絕對(duì)定位
絕對(duì)位置元素相對(duì)于具有非靜態(tài)位置的第一個(gè)父元素進(jìn)行定位.如果找不到這樣的元素,則針對(duì)的是
絕對(duì)定位的元素將從正常流程中移除.文檔和其他元素的行為像絕對(duì)定位的元素不存在
絕對(duì)定位的元素可以重疊其他元素