day4知識點<web>

文字段落的樣式屬性

color:設(shè)定一個標簽中的文字的顏色,顏色值可以使用英文單詞躯枢,16進制語法和rgb語法黍檩,如:color: red; color: #f0fcf8;color:rgb(123, 88, 205);
font-size: 設(shè)定文字大小,單位通常為像素(px)—— 一般的商業(yè)網(wǎng)站的文字大小通常都是12px只泼。
font-weight: 設(shè)置文字粗體(bold)或非粗體(normal)。
font-style: 設(shè)置文字斜體(italic) 或非斜體(normal)
font-family:設(shè)置文字的字體名字软驰,可以使用多個字體名涧窒,中間用逗號分開,表示的含義是:首先使用第一個字體锭亏,如果用戶電腦中沒有第一個纠吴,則使用第二個,以此類推慧瘤。舉例:font-family: 宋體呜象,仿宋,微軟雅黑碑隆,arial, “Times New roman”;
line-height:設(shè)置文字的行高,單位通常也是px蹬音,即一行文字所占據(jù)的空間高度——行高不是文字的高度上煤。
letter-spacing:設(shè)置字符(或字母)之間的間隔距離,中文其實就是“字”的間隔著淆。
word-spacing:設(shè)置單詞之間的間隔距離——通常只對西方拉丁語系的字符有效劫狠。
text-align:設(shè)定文字的水平對齊方式。其功能是相當于標簽屬性中的align屬性永部。但要注意:align作為html屬性独泞,其實只在其中的某幾個標簽中使用,但text-align是幾乎所有標簽都可以用的苔埋。
text-indent: 設(shè)定一個段落中的首行縮進距離懦砂,單位通常也是px。
text-decoration:設(shè)置文字的“修飾線”:下劃線(underline),中劃線(line-through)组橄,上劃線(overline),none(無)
vertical-align: 設(shè)定文字在一個表格盒子(單元格)的垂直對齊方式:top(頂對齊)荞膘,middle(中對齊),bottom(底對齊)

盒子模型初步

一個盒子的各個組成部分由下圖所示:

圖片.png

圖片.png

盒子是css中最重要的概念玉工。
首先先建立一個觀念: 幾乎所有標簽其實都是一個盒子——而所謂盒子羽资,無非就是一個“矩形的區(qū)域范圍而已”。其實所謂網(wǎng)頁遵班,無非是一個盒子套一個盒子屠升。
一個盒子有如下一些區(qū)域(結(jié)構(gòu))構(gòu)成:
邊框(border):一個線型的區(qū)域,可以是實線或虛線或其他形狀狭郑。
外邊距(margin):也叫“邊界”腹暖,邊框線之外的一塊空白區(qū)域,其含義是“不能放置物體”
內(nèi)邊距(padding):也叫“補白”愿阐,邊框線之內(nèi)的一塊空白區(qū)域微服,其含義也是“不能放置物體”
內(nèi)容區(qū)(沒有對應(yīng)的css屬性名):指一個盒子中可以放置“物體”的區(qū)域——也就是盒子的主要區(qū)域。其中放置的物體可以是普通的文字或其他標簽——對應(yīng)我們之前學的html中的“內(nèi)容部分”。內(nèi)容區(qū)通常只能設(shè)置其寬高屬性(width以蕴,height)糙麦。

“內(nèi)容與表現(xiàn)分離”思想

標簽具有“表形表意”之作用。其實也可以說丛肮,內(nèi)容和其表現(xiàn)混在一起赡磅。但現(xiàn)在:css技術(shù)其實可以將一個網(wǎng)頁中的各個標簽的表現(xiàn)都“提出來”放到一個專門的地方(比如style標簽中),剩余的部分(標簽和文字內(nèi)容等)被整體上稱為“結(jié)構(gòu)/內(nèi)容”宝与。這種做法就被稱為“內(nèi)容與表現(xiàn)分離思想”

盒子的兩種初始狀態(tài)(基本表現(xiàn))

類似div的盒子:一個盒子自動“占據(jù)一行”(不管其內(nèi)部內(nèi)容多少):這就是“塊盒子”(塊元素)焚廊。常用塊盒子:
p, hr, h1~h6, table, form, ul, li, ol, dl, dt, dd, blockquote, pre,
特點:可以設(shè)置固定的寬高,margin习劫,padding咆瘟,

類似span盒子:一個盒子中的內(nèi)容會跟同類的盒子并排在一行出現(xiàn),除非該行已滿诽里,則會自然到下一行——類似文字的表現(xiàn)特性袒餐。:這就是行內(nèi)盒子(行內(nèi)元素)。行內(nèi)盒子通常放“最終的數(shù)據(jù)內(nèi)容”谤狡,比如文本灸眼,圖片。其他行內(nèi)盒子:
b, strong, font, i, u, a, img, input, textarea, select,
特點:寬高不能設(shè)定墓懂,而是由其內(nèi)容“撐出”焰宣,margin和padding沒有上下方面的表現(xiàn)。

注:通常捕仔,行內(nèi)盒子是“小盒子”匕积,塊盒子是“大盒子”

布局初步(原理)

所謂布局,其實是指的將網(wǎng)頁內(nèi)容以一定的方式放到合適的位置上去逻澳。
將“當前版面”以視覺上界限明顯的方式進行劃分若干個區(qū)塊闸天,劃分只用兩種方式:
a)上下結(jié)構(gòu):此時,只要使用若干個盒子斜做,自然就是上下結(jié)構(gòu)苞氮,無需其他設(shè)置。
b)左右結(jié)構(gòu):此時使用若干個盒子瓤逼,并進行相應(yīng)的浮動笼吟,通常的模式:
i.2個盒子:一左一右
ii.3個盒子:兩左一右或兩右一左,或一邊倒霸旗。
iii.更多盒子:通常一邊倒贷帮。

浮動

浮動就像水中的氣泡,會“向上浮”诱告。更形象的比喻:大家(所有標簽)都在“地面上平鋪著”撵枢,各自占據(jù)著一定的面積,浮動元素卻“浮”到天花板上去了,并占據(jù)大家通常的“地面面積”锄禽。
浮動除了表現(xiàn)上不跟別的元素搶占地盤之外潜必,其最主要的特性(也就是破壞效果)其實是:使其父盒子失去合理高度——父盒子已經(jīng)包不住其這些浮動的內(nèi)部盒子了!這在布局中基本上是不允許的沃但!那么我們就必須使用補充的做法來實現(xiàn)合理包含——父盒子包住子盒子磁滚。讓父盒子獲得正確有效高度的方法有3個:
1、給父盒子設(shè)置一個固定的高度——通常設(shè)計時已知高度且不回改變的時候宵晚。(固定高度)
2垂攘、給父盒子的內(nèi)部最末尾加一個清除浮動的空盒子,如下:<div style=”clear:both”></div>(自動高度)
3淤刃、給父盒子設(shè)置一個css屬性:overflow:hidden;(自動高度)
最好總結(jié):布局需要左右排列晒他,左右排列需要浮動,浮動需要修正其破壞效果——讓父盒子合理包住其子盒子逸贾。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末仪芒,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子耕陷,更是在濱河造成了極大的恐慌,老刑警劉巖据沈,帶你破解...
    沈念sama閱讀 222,464評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件哟沫,死亡現(xiàn)場離奇詭異,居然都是意外死亡锌介,警方通過查閱死者的電腦和手機嗜诀,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,033評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來孔祸,“玉大人隆敢,你說我怎么就攤上這事〈藁郏” “怎么了拂蝎?”我有些...
    開封第一講書人閱讀 169,078評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長惶室。 經(jīng)常有香客問我温自,道長,這世上最難降的妖魔是什么皇钞? 我笑而不...
    開封第一講書人閱讀 59,979評論 1 299
  • 正文 為了忘掉前任悼泌,我火速辦了婚禮,結(jié)果婚禮上夹界,老公的妹妹穿的比我還像新娘馆里。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 69,001評論 6 398
  • 文/花漫 我一把揭開白布鸠踪。 她就那樣靜靜地躺著丙者,像睡著了一般。 火紅的嫁衣襯著肌膚如雪慢哈。 梳的紋絲不亂的頭發(fā)上蔓钟,一...
    開封第一講書人閱讀 52,584評論 1 312
  • 那天,我揣著相機與錄音卵贱,去河邊找鬼滥沫。 笑死,一個胖子當著我的面吹牛键俱,可吹牛的內(nèi)容都是我干的兰绣。 我是一名探鬼主播,決...
    沈念sama閱讀 41,085評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼编振,長吁一口氣:“原來是場噩夢啊……” “哼缀辩!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起踪央,我...
    開封第一講書人閱讀 40,023評論 0 277
  • 序言:老撾萬榮一對情侶失蹤臀玄,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后畅蹂,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體健无,經(jīng)...
    沈念sama閱讀 46,555評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,626評論 3 342
  • 正文 我和宋清朗相戀三年液斜,在試婚紗的時候發(fā)現(xiàn)自己被綠了累贤。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,769評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡少漆,死狀恐怖臼膏,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情示损,我是刑警寧澤渗磅,帶...
    沈念sama閱讀 36,439評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站检访,受9級特大地震影響夺溢,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜烛谊,卻給世界環(huán)境...
    茶點故事閱讀 42,115評論 3 335
  • 文/蒙蒙 一风响、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧丹禀,春花似錦状勤、人聲如沸鞋怀。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,601評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽密似。三九已至,卻和暖如春葫盼,著一層夾襖步出監(jiān)牢的瞬間残腌,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評論 1 274
  • 我被黑心中介騙來泰國打工贫导, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留抛猫,地道東北人。 一個月前我還...
    沈念sama閱讀 49,191評論 3 378
  • 正文 我出身青樓孩灯,卻偏偏與公主長得像闺金,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子峰档,可洞房花燭夜當晚...
    茶點故事閱讀 45,781評論 2 361

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案败匹? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 13,761評論 1 92
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表,主要用...
    寥寥十一閱讀 1,839評論 0 6
  • (備注:凡是利用圓括號括起來的一般就是注釋或者英文解釋讥巡,用webstorm寫程序時一定要注意字符一定要在英文狀態(tài)下...
    低調(diào)桀驁紅燒肉閱讀 1,133評論 0 0
  • CSS學習感言: CSS明顯比HTML復雜一些掀亩,用的時間也多,而且也還有許多迷惑的地方欢顷,特別是關(guān)于定位和浮動归榕,理解...
    雨夜月風閱讀 440評論 0 1
  • CSS基礎(chǔ) 本文包括CSS基礎(chǔ)知識選擇器(重要!Vㄉ妗!)繼承外里、特殊性怎爵、層疊、重要性CSS格式化排版單位和值盒模型浮動...
    廖少少閱讀 3,093評論 0 40