day22課堂總結(jié)

css其他屬性

1.標(biāo)準(zhǔn)流
塊級 - 一個占一行齿风,默認(rèn)的寬度是父標(biāo)簽的寬度绿店,默認(rèn)的高度時內(nèi)容的高度轧邪,設(shè)置寬度和高度有效
行內(nèi) - 一行顯示多個叼耙,默認(rèn)的高度和寬度就是內(nèi)容的高度和寬度最易,設(shè)置寬度和高度無效
行內(nèi)塊 - 一行顯示多個怒坯,默認(rèn)的寬度和高度,就是內(nèi)容的寬度和高度耘纱,設(shè)置寬高有效
2.display:修改標(biāo)簽的類型
block
inline
inline-block
3.脫標(biāo)(脫流) - 浮動敬肚、定位
一行可以顯示多個,默認(rèn)的大小就是內(nèi)容的大小束析,設(shè)置寬高有效(標(biāo)簽之間沒有空隙)
4.浮動(float)
left - 左浮動
right - 有浮動
a.文字環(huán)繞
被環(huán)繞的標(biāo)簽浮動艳馒,作用于文字的標(biāo)簽不浮動
b。清除浮動 - 清除的是因為浮動而產(chǎn)生的塌陷問題
高度塌陷 - 父標(biāo)簽不浮動员寇,子標(biāo)簽浮動就會產(chǎn)生高度塌陷的問題
選中塌陷的標(biāo)簽{overflow:hidden}
5.定位
a.距離 - left弄慰、right、top蝶锋、bottom
b.設(shè)置參考對象 - position
initial/static - 默認(rèn)值陆爽,不定位
absolute - 絕對定位,相對于父標(biāo)簽定位(前提是父標(biāo)簽屬性值不是默認(rèn)值)
relative - 相對于自己定位(自己在標(biāo)準(zhǔn)流中的位置)
fixed - 相對于瀏覽器定位
sticky - 當(dāng)瀏覽器滾動相對于瀏覽器定位扳缕,不滾動就相對自己在標(biāo)準(zhǔn)流中的位置定位(適用于最后一個標(biāo)簽)
6.盒子模型
一個標(biāo)簽是由四個部分組成慌闭;content别威、padding、border驴剔、margin其中margin不可見

其他樣式

文字加粗
bolder(更粗的)/bold(加粗)/normal(常規(guī))100-900
font-weight:500;
文字樣式
italic/oblique - 切斜
normal - 常規(guī)的
font-style:normal;
水平對齊方式
left - 左對齊
right - 右對齊
center - 居中
text-align :center;
注意:這個屬性是針對標(biāo)簽的內(nèi)容(內(nèi)容可以是文字也可以是標(biāo)簽)
文字行高 - 設(shè)置一行文字的高度
一個標(biāo)簽中只有一行內(nèi)容的時候可以通過設(shè)置行高和標(biāo)簽的高度相同來讓內(nèi)容在垂直方向居中
line-height:330px;
文字裝飾器
none - 去掉裝飾器
underline - 添加下劃線
overline - 添加上劃線
line-throuht - 刪除線
text-decoration:underline;
首行縮進
text-indent:2em;
字間距
letter-spacing:10px

2.列表相關(guān)屬性

定義符號樣式
disc(實心圓)
circle(空心圓)
none(去掉)
list-style-type:circle;
定義符號圖片
list-style-image:url();
定義符號位置
outside
inside 有一定的距離
list-style-position:inside;
設(shè)置背景圖
background-image:url();
背景圖片是否平鋪
repeat(默認(rèn)的) - 當(dāng)背景圖片比標(biāo)簽小的時候省古,背景會重復(fù)渲染,知道將整個標(biāo)簽鋪滿為止
none - 不平鋪 背景圖片只顯示一次
background-repeat:no-repeat;
背景圖的位置
x坐標(biāo) - 數(shù)值/left/right/center
y坐標(biāo) - 數(shù)值/left/right/center
background-position-x:center;
background-position-y:center;

/===============通用=============/
{
/
取消所有自帶的間距/
margin: 0;
padding: 0;
/
所有的標(biāo)簽的子標(biāo)簽都相對于自己來定位/
position: relative;
}
a{
/
取消所有a標(biāo)簽的下劃線/
text-decoration: none;
}
/
垂直居中*/
position: absolute;
top: 50%;
margin-top: -30px;
line-height: 60px;

/背景圖
background:圖片地址 是否平鋪 x坐標(biāo) y坐標(biāo) 背景顏色
/
padding-left: 23px;
background: url(../img/q-icon.png) no-repeat 0px center rgba(0,0,0,0);

/focus - 成為焦點對應(yīng)的狀態(tài)/

content #login_div #div2 button:focus{

/*去掉outline*/
outline: 0;
color: rgb(215,36,50);
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末丧失,一起剝皮案震驚了整個濱河市豺妓,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌布讹,老刑警劉巖琳拭,帶你破解...
    沈念sama閱讀 211,194評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異描验,居然都是意外死亡白嘁,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評論 2 385
  • 文/潘曉璐 我一進店門挠乳,熙熙樓的掌柜王于貴愁眉苦臉地迎上來权薯,“玉大人,你說我怎么就攤上這事睡扬∶蓑迹” “怎么了?”我有些...
    開封第一講書人閱讀 156,780評論 0 346
  • 文/不壞的土叔 我叫張陵卖怜,是天一觀的道長屎开。 經(jīng)常有香客問我,道長马靠,這世上最難降的妖魔是什么奄抽? 我笑而不...
    開封第一講書人閱讀 56,388評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮甩鳄,結(jié)果婚禮上逞度,老公的妹妹穿的比我還像新娘。我一直安慰自己妙啃,他們只是感情好档泽,可當(dāng)我...
    茶點故事閱讀 65,430評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著揖赴,像睡著了一般馆匿。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上燥滑,一...
    開封第一講書人閱讀 49,764評論 1 290
  • 那天渐北,我揣著相機與錄音,去河邊找鬼铭拧。 笑死赃蛛,一個胖子當(dāng)著我的面吹牛恃锉,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播呕臂,決...
    沈念sama閱讀 38,907評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼淡喜,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了诵闭?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,679評論 0 266
  • 序言:老撾萬榮一對情侶失蹤澎嚣,失蹤者是張志新(化名)和其女友劉穎疏尿,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體易桃,經(jīng)...
    沈念sama閱讀 44,122評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡褥琐,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,459評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了晤郑。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片敌呈。...
    茶點故事閱讀 38,605評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖造寝,靈堂內(nèi)的尸體忽然破棺而出磕洪,到底是詐尸還是另有隱情,我是刑警寧澤诫龙,帶...
    沈念sama閱讀 34,270評論 4 329
  • 正文 年R本政府宣布析显,位于F島的核電站,受9級特大地震影響签赃,放射性物質(zhì)發(fā)生泄漏谷异。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,867評論 3 312
  • 文/蒙蒙 一锦聊、第九天 我趴在偏房一處隱蔽的房頂上張望歹嘹。 院中可真熱鬧,春花似錦孔庭、人聲如沸尺上。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽尖昏。三九已至,卻和暖如春构资,著一層夾襖步出監(jiān)牢的瞬間抽诉,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評論 1 265
  • 我被黑心中介騙來泰國打工吐绵, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留迹淌,地道東北人河绽。 一個月前我還...
    沈念sama閱讀 46,297評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像唉窃,于是被迫代替她去往敵國和親耙饰。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,472評論 2 348

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案纹份? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 13,737評論 1 92
  • 一苟跪、CSS入門 1、css選擇器 選擇器的作用是“用于確定(選定)要進行樣式設(shè)定的標(biāo)簽(元素)”蔓涧。 有若干種形式的...
    寵辱不驚丶?xì)q月靜好閱讀 1,589評論 0 6
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5件已? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 27,447評論 1 45
  • 學(xué)會使用CSS選擇器熟記CSS樣式和外觀屬性熟練掌握CSS各種選擇器熟練掌握CSS各種選擇器熟練掌握CSS三種顯示...
    七彩小鹿閱讀 6,306評論 2 66
  • 概述 在網(wǎng)易云課堂學(xué)習(xí)李南江老師的《從零玩轉(zhuǎn)HTML5前端+跨平臺開發(fā)》時元暴,所整理的筆記篷扩。筆記內(nèi)容為根據(jù)個人需求所...
    墨荀閱讀 2,332評論 0 7