HTML與CSS經典的知識有哪些

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

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

align和float屬性--------用于將元素相對其它內容放置

text-align和vertical-align------------控制網頁內容的對齊

邊距在元素之外，填充在元素之內

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

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

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

2.padding 填充 在元素的矩形區域內部添加空間

3.border-width 定義四個邊框的寬度：

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

4.text-align樣式使其元素在其定界區域內水平對齊

5.vertical-align屬性 使元素在垂直對齊。指定元素如何與其父元素對齊（在有些情況下，是與網頁中元素的當前行對齊）。“當前行”指的是顯示在元素內的元素所處的垂直位置，換句話說，就是內聯元素。

屬性取值

top:將元素的頂部與當前行對齊

middle:將元素的中心與當前行對齊

bottom:將元素的底部與當前行對齊

text-top:將元素的頂部與父元素的頂部對齊

baseline:將元素的基線與父元素的基線對齊

text-bottom:將元素的底部與父元素的底部對齊

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

7.clear屬性清除浮動元素

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

8.盒子模型

邊距（margin）--> 邊框（border）-->填充（padding）-->內容（content）

HTML與CSS入門經典 筆記

9.position屬性 定位類型

relative:相對定位，默認定位類型。理解為棋盤上棋子的排列：棋子從左往右排列，達到邊緣時移到下一行。棋子排列方式是由display決定。

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

absolute:絕對定位，能夠指定元素的矩形局域相對于父元素區域的位置

屬性值：

left:左邊的位置偏移

right:右邊的位置偏移

top:頂部的位置偏移

bottom:底部的位置偏移

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

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

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

clear:禁止文本沿元素繞排

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

到此，相信大家對“HTML與CSS經典的知識有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！