HTML與CSS經(jīng)典的知識(shí)有哪些

本篇內(nèi)容主要講解“HTML與CSS經(jīng)典的知識(shí)有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“HTML與CSS經(jīng)典的知識(shí)有哪些”吧!

margin和padding屬性--------用于添加元素周圍的間距（順時(shí)鐘順序，都是上右下左）

align和float屬性--------用于將元素相對(duì)其它內(nèi)容放置

text-align和vertical-align------------控制網(wǎng)頁內(nèi)容的對(duì)齊

邊距在元素之外，填充在元素之內(nèi)

1.margin 樣式單邊距 此屬性是處理元素外面的間距

可以設(shè)置邊距為具體的長度（像素，點(diǎn)，ems）或者百分比。如是百分比，百分比是基于整個(gè)網(wǎng)頁而不是元素大小的（margin-left=25%，表示元素的左邊距將是整個(gè)頁面寬度的25%）

margin-top;margin-right;margin-bottom;margin-left 分別是上,右,下,左邊框的寬度值

2.padding 填充 在元素的矩形區(qū)域內(nèi)部添加空間

3.border-width 定義四個(gè)邊框的寬度：

border-width:border-top-width border-right-width border-bottom-width border-left-width; 分別是上,右,下,左邊框的寬度值

4.text-align樣式使其元素在其定界區(qū)域內(nèi)水平對(duì)齊

5.vertical-align屬性 使元素在垂直對(duì)齊。指定元素如何與其父元素對(duì)齊（在有些情況下，是與網(wǎng)頁中元素的當(dāng)前行對(duì)齊）?！爱?dāng)前行”指的是顯示在元素內(nèi)的元素所處的垂直位置，換句話說，就是內(nèi)聯(lián)元素。

屬性取值

top:將元素的頂部與當(dāng)前行對(duì)齊

middle:將元素的中心與當(dāng)前行對(duì)齊

bottom:將元素的底部與當(dāng)前行對(duì)齊

text-top:將元素的頂部與父元素的頂部對(duì)齊

baseline:將元素的基線與父元素的基線對(duì)齊

text-bottom:將元素的底部與父元素的底部對(duì)齊

6.float屬性使元素能在設(shè)計(jì)中到處移動(dòng)，從而讓其他元素圍繞它們。元素的浮動(dòng)是水平而不是垂直方向的，只有兩種可能值：right和left.使用這兩個(gè)值時(shí)，浮動(dòng)元素將浮動(dòng)到容器元素所允許的最右或者最左.

7.clear屬性清除浮動(dòng)元素

取值：left,right,both,none ,inherit

8.盒子模型

邊距（margin）--> 邊框（border）-->填充（padding）-->內(nèi)容（content）

HTML與CSS入門經(jīng)典 筆記

9.position屬性 定位類型

relative:相對(duì)定位，默認(rèn)定位類型。理解為棋盤上棋子的排列：棋子從左往右排列，達(dá)到邊緣時(shí)移到下一行。棋子排列方式是由display決定。

樣式屬性display的值為block的元素自動(dòng)放在下一行(默認(rèn))，而為inline的元素自動(dòng)放在同一行，位于前一個(gè)元素后面

absolute:絕對(duì)定位，能夠指定元素的矩形局域相對(duì)于父元素區(qū)域的位置

屬性值：

left:左邊的位置偏移

right:右邊的位置偏移

top:頂部的位置偏移

bottom:底部的位置偏移

10.z-index屬性 控制元素的堆疊順序。z-index值較大的元素在z-index值較小的元素上面

11.文本流（即內(nèi)容流） 控制的樣式屬性有如下：

float: 決定文本如何沿元素繞排 可設(shè)置為left或right 如將圖像的float屬性設(shè)置為left，圖像將放在文本的左邊

clear:禁止文本沿元素繞排

overflow:在元素太小而不能包含所有文本時(shí)控制文本的溢出方式，可設(shè)置為visible,hidden,scroll

到此，相信大家對(duì)“HTML與CSS經(jīng)典的知識(shí)有哪些”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！