CSS學(xué)習(xí)筆記(十二)--高級(jí)

1. 對(duì)齊

  1. 對(duì)齊塊元素
    塊元素指的是占據(jù)全部可用寬度的元素睬隶,并且在其前后都會(huì)換行阁苞。
    塊元素的例子:
<h1>
<p>
<div>
  1. 使用 margin 屬性來水平對(duì)齊
    通過將左和右外邊距設(shè)置為 "auto"尚卫,來對(duì)齊塊元素喧伞。
.center
{
margin-left:auto;
margin-right:auto;    #或者直接使用margin:auto;
width:70%;
background-color:#b0e0e6;
}
  1. 使用 position 屬性進(jìn)行左和右對(duì)齊
    對(duì)齊元素的方法之一是使用絕對(duì)定位:
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
  1. 使用 float 屬性來進(jìn)行左和右對(duì)齊
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

2. 尺寸 (Dimension)

屬性 描述
height 設(shè)置元素的高度窟她。
line-height 設(shè)置行高纸泡。
max-height 設(shè)置元素的最大高度漂问。
max-width 設(shè)置元素的最大寬度赖瞒。
min-height 設(shè)置元素的最小高度。
min-width 設(shè)置元素的最小寬度蚤假。
width 設(shè)置元素的寬度栏饮。

3. 分類

屬性 描述
clear 設(shè)置一個(gè)元素的側(cè)面是否允許其他的浮動(dòng)元素。
cursor 規(guī)定當(dāng)指向某元素之上時(shí)顯示的指針類型磷仰。
display 設(shè)置是否及如何顯示元素袍嬉。
float 定義元素在哪個(gè)方向浮動(dòng)。
position 把元素放置到一個(gè)靜態(tài)的灶平、相對(duì)的伺通、絕對(duì)的、或固定的位置中逢享。
visibility 設(shè)置元素是否可見或不可見罐监。
<body>
<p>請(qǐng)把鼠標(biāo)移動(dòng)到單詞上,可以看到鼠標(biāo)指針發(fā)生變化:</p>
<span style="cursor:auto">
Auto</span><br />
<span style="cursor:crosshair">
Crosshair</span><br />
<span style="cursor:default">
Default</span><br />
<span style="cursor:pointer">
Pointer</span><br />
<span style="cursor:move">
Move</span><br />
<span style="cursor:e-resize">
e-resize</span><br />
<span style="cursor:ne-resize">
ne-resize</span><br />
<span style="cursor:nw-resize">
nw-resize</span><br />
<span style="cursor:n-resize">
n-resize</span><br />
<span style="cursor:se-resize">
se-resize</span><br />
<span style="cursor:sw-resize">
sw-resize</span><br />
<span style="cursor:s-resize">
s-resize</span><br />
<span style="cursor:w-resize">
w-resize</span><br />
<span style="cursor:text">
text</span><br />
<span style="cursor:wait">
wait</span><br />
<span style="cursor:help">
help</span>
</body>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末瞒爬,一起剝皮案震驚了整個(gè)濱河市弓柱,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌侧但,老刑警劉巖矢空,帶你破解...
    沈念sama閱讀 217,406評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異禀横,居然都是意外死亡妇多,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門燕侠,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人立莉,你說我怎么就攤上這事绢彤。” “怎么了蜓耻?”我有些...
    開封第一講書人閱讀 163,711評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵茫舶,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我刹淌,道長(zhǎng)饶氏,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,380評(píng)論 1 293
  • 正文 為了忘掉前任有勾,我火速辦了婚禮疹启,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘蔼卡。我一直安慰自己喊崖,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,432評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著荤懂,像睡著了一般茁裙。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上节仿,一...
    開封第一講書人閱讀 51,301評(píng)論 1 301
  • 那天晤锥,我揣著相機(jī)與錄音,去河邊找鬼廊宪。 笑死矾瘾,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的挤忙。 我是一名探鬼主播霜威,決...
    沈念sama閱讀 40,145評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼册烈!你這毒婦竟也來了戈泼?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,008評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤赏僧,失蹤者是張志新(化名)和其女友劉穎大猛,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體淀零,經(jīng)...
    沈念sama閱讀 45,443評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡挽绩,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,649評(píng)論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了驾中。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片唉堪。...
    茶點(diǎn)故事閱讀 39,795評(píng)論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖肩民,靈堂內(nèi)的尸體忽然破棺而出唠亚,到底是詐尸還是另有隱情,我是刑警寧澤持痰,帶...
    沈念sama閱讀 35,501評(píng)論 5 345
  • 正文 年R本政府宣布灶搜,位于F島的核電站,受9級(jí)特大地震影響工窍,放射性物質(zhì)發(fā)生泄漏割卖。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,119評(píng)論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧栋烤,春花似錦舶得、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,731評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽进副。三九已至取试,卻和暖如春悬槽,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背瞬浓。 一陣腳步聲響...
    開封第一講書人閱讀 32,865評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工初婆, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人猿棉。 一個(gè)月前我還...
    沈念sama閱讀 47,899評(píng)論 2 370
  • 正文 我出身青樓磅叛,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親萨赁。 傳聞我的和親對(duì)象是個(gè)殘疾皇子弊琴,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,724評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,751評(píng)論 1 92
  • 學(xué)習(xí)CSS的最佳網(wǎng)站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,055評(píng)論 0 1
  • 各種純css圖標(biāo) CSS3可以實(shí)現(xiàn)很多漂亮的圖形杖爽,我收集了32種圖形敲董,在下面列出。直接用CSS3畫出這些圖形慰安,要比...
    劍殘閱讀 9,543評(píng)論 0 8
  • 一 外部式css樣式 (也可稱為外聯(lián)式)就是把css代碼寫一個(gè)單獨(dú)的外部文件中腋寨,這個(gè)css樣式文件以“.css...
    KunMitnic閱讀 939評(píng)論 0 1
  • 在很久以前,有一個(gè)村莊化焕,他們很平靜很平靜萄窜,直到有一天,突然一家人死了撒桨,他們的尸體不見了查刻,頭全部放在大廳的桌子...
    ZHAOYUXIN閱讀 214評(píng)論 1 2