CSS常用知識

2021-08-09 21:49:01 字數 1817 閱讀 5760

---css格式

p其中,p為選擇器,選擇器包括:html元素 id class

---外部樣式,引入css檔案

---內部樣式

---內聯樣式

love you

---樣式優先順序

內聯樣式》內部樣式》外部樣式》瀏覽器預設

---樣式屬性

-背景background-image:url('***.jpg');

background-repeat:repeat-x;

background-position:right top;

background-color:red;

-文字樣式

text-align:center; // 文字的水平對齊方式,center|right|justify(兩邊對齊)

vertical-align:bottom; // 文字垂直對齊方式

text-decoration:none; // 設定連線沒有下劃線,overline|line-through|underline

text-transform:uppercase; // 文字大小寫轉換,uppercase|lowercase|capitalize(單詞首字母大寫)

text-indent:30px; // 文字縮排

line-heigth:30px; // 行高

-布局樣式

padding:10px; // 內填充

margin:10px; // 外填充

margin:auto; // 水平居中對齊元素

width:50px;

height:50px; // 元素的寬高只表示內容區域的寬高,整個元素的寬高還包括:margin border padding

-邊框border:1px solid black; // **邊框樣式

border-collapse:collapse; // **邊框是否為單一邊框

-元素顯示

display:none; // 隱藏元素,不佔原來的布局

visibility:hidden; // 隱藏元素,佔原來的布局

display:inline; // 元素以行的形式依次排列顯示

display:block; // 元素以塊狀的形式顯示,乙個元素佔據一行

-元素定位

position:fixed;

fixed //

相對於瀏覽器視窗固定的位置

fixed定位在ie7和ie8下需要描述!doctype才能支援

fixed定位使元素的位置與文件流無關,因此不佔據空間

fixed定位的元素和其他元素重疊

static // 瀏覽器預設定位方式,處於文件流中

relative // 相對於其他元素的位置,處於文件流中

absolute //

絕對定位的元素的位置相對於最近的已定位父元素,如果元素沒有已定位的父元素,那麼它的位置相對於

定位使元素的位置與文件流無關,因此不佔據空間

定位的元素和其他元素重疊

z-index:-1; // 重疊元素的位置

overflow:auto; // 設定當元素的內容溢位其區域時發生的事情

float:right; // 元素的浮動

乙個浮動元素會盡量向左或向右移動,直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止

浮動元素之後的元素將圍繞它

clear:both; // 指定元素兩側不能出現浮動元素

---選擇器

div p // 所有後代選擇器

div>p // 直接子元素選擇器

div+p // 相鄰選擇器

div~p // 後續兄弟選擇器

CSS高階知識(常用)

1.css優先權 2.屬性選擇器 屬性選擇器 可以為擁有指定屬性的html元素設定樣式,而不僅限於class 和id 而且只有在規定了時,ie7和ie8才支援屬性選擇器。在ie6及更早更低的瀏覽器版本中,不支援屬性選擇器。e attr 只使用屬性名稱,但沒有確定任何屬性值 e attr value ...

常用的CSS知識

常用的css知識 by 又見花開 發表於 2006 9 18 11 36 00 1.block和inline元素對比 所有的html元素都屬於block和inline之一。block元素的特點是 總是在新行上開始 高度,行高以及頂和底邊距都可控制 寬度預設是它的容器的100 除非設定乙個寬度 然後分...

CSS常用知識點

一 浮動框可以向左或向右移動,直到外邊緣碰到包含框或另乙個浮動框邊框為止。常用浮動 float left 向左 float right 向右 加上浮動之後 還要清除浮動 cl after 二 2.1 定位 難點 position static 沒有定位 fixed 絕對定位,相對瀏覽器始終顯示 相對...