CSS頁面布局基礎

2021-07-16 16:01:28 字數 1632 閱讀 9604

css屬性:

css屬性單位

字型屬性

長度pt px 顏色rgb url

絕對長度最好用於列印輸出裝置,而在作為螢幕顯示時,絕對長度無多大的意義

cm mm in(英吋) pt(點) pc(picas)

相對包括包括px,em,ex。相對長度僅僅是指元素尺寸行對於瀏覽器的系統預設值來相應的縮放

em(當前字型中m字母的寬度) px ex(當前字型中x字母的高度)

顏色屬性

用百分比值來表示,如color:rgb(50%,0,50%)

後面三格百分數表示三色佔的乙個比重

使用0-225之間的整數來設定,如:color:rgb(128,0,128)

使用十六進製制陣列定義顏色,如#fceab

使用簡化的十六進製制數定義顏色,如#080

為顏色取名字:定義什麼單詞就是什麼色

url單位

url單位的具體格式是:在url後面跟乙個括號。括號中是url的位址,如果位址中使用了括號,逗號,空格,單引號,雙引號,那麼在整個位址外面加上單引號或者雙引號

字型屬性

字型屬性用於控制網頁中文字顯示樣式

文字屬性

line-height 表示行高,指的是每一行的高度(設定行間的距離)

vertical-align 設定元素的垂直對齊方式

背景屬性

color:用於設定元素的前景色

css盒模型

相似盒模型中,我們可以控制三格不同的分層屬性

外邊距(magin):代表元素外邊的空間,這個控制項將元素分開,盒模型在整個網頁頁面的距離

內邊距:(padding)元素和元素邊框之間的距離

邊框(border):位於元素邊距內和元素的邊框距外之間的可配置的線

元素的邊框 (border) 是圍繞元素內容和內邊距的一條或多條線。

邊框要和他的width一起使用,否則在設施粗細、顏色等是看不見的

定位屬性

css定位屬性包括position、top、bottom、left、right和z-index

display:移除,直接移除元件,騰出空間給其他元件,而visibilty只會移除元件,不會騰出空間

屬性規定元素是否可見

cursor:滑鼠屬性

表示滑鼠移動到該元素上,滑鼠的狀態

CSS頁面布局基礎

5 css頁面布局基礎 字符集不能設定寬度,如果要設定寬度必須display設定成塊級 inline 字符集 block 塊級 padding內邊距,border邊框,margin外邊距。4個 上 右 下 左,3個 上 左右 下,兩個 上下 左右,乙個 上下左右。元素浮動 float none 沒有...

css頁面布局基礎

1.盒模型 margin padding 行高line height 2.vertical align 垂直對齊方式 行高居中 3.如果div沒有設定高度,則會自動增加設定後,自動不變 4.絕對定位 使用position absolute 宣告 使用乙個或多個偏移屬性 top right 相對於其容...

CSS頁面布局基礎2 定位

1 四種定位型別 通過position屬性指定分別是static 預設值 relative absolute fixed static 靜態定位 表示按照正常定位方案,元素盒按照在文件流中出現的順序依次格式化 relative 相對定位 將移動元素盒,但是它在文件流中的原始空間會保留下來。absol...