CSS中常見屬性和值、盒子和定位
一、CSS中常見屬性和值
1、字型屬性
1> 字型家族:font-family (宋體、楷體...)
2> 字型風格:font-style (normal普通、italic斜體)
3> 字型大小:font-size
4> 字型加粗:font-weight:bold
2、控制文字屬性
1> 文字字母間隔:letter-spacing (允許賦值1、2、3...)
2> 文字修飾:text-decoration (underline下劃線 overline 上劃線 line-through 刪除線)
3> 橫向排列:text-align
4> 行高:line-height
5> 字型變形:text-transform (uppercase使字母由小寫變大寫)
6> 文字縮排 text-indent
3、背景屬性
1> 背景顏色:background-color
2> 背景圖片:background-image:url(圖片地址)
3> 背景重複(平鋪):background-repeat (repeat重複 repeat-x橫向重複 repeat-y縱向重複 no-repeat不重複)
4> 背景附件:background-attachment
5> 背景位置:background-position
二、DIV+CSS來佈局網站
1、div+css佈局網站和table相比有什麼優勢?
1> 由於之前的table,佈局網站,層層巢狀,導致搜尋引擎抓取的障礙增大,所以被淘汰,div 抓取內容比較順利
2> Table----顯示的時候,等整個table框架載入完畢一塊顯示,div---載入一部分顯示一部分,如果頁面太長的話,導致後面可能會出現空白
但是,網站佈局也並不是絕對的,現在 資料報表,後臺管理方面 table比較方便的。
2、DIV+CSS佈局網站的優點:
1> 內容、顯示相分離;
2> 提高工作效率
3> 利於改版和維護
4> 利於搜尋引擎優化
5> 程式碼簡潔,提高訪問速度
三、盒子模型
1、每個HTML元素都可以看做一個裝了東西的盒子,盒子具有寬度(width)和高度(height),盒子裡面的內容到盒子的邊框之間的距離即填充(padding),盒子本身有邊框(border),盒子邊框外和其他盒子之間還有邊距(margin)
2、值複製
1> 如果缺少左外邊距的值,則使用右外邊距的值。
2> 如果缺少下外邊距的值,則使用上外邊距的值。
3> 如果缺少右外邊距的值,則使用上外邊距的值。
四、css定位
定位分為 relative,absolute,fixed,static
1、絕對定位:position: absolute 如果把一段程式碼,設定為絕對定位(absolute),這段程式碼就會脫離文件流飄起來了
2、相對定位:position:realtive
3、Top:一個元素上外邊距邊界與其包含塊之間的偏移
4、Left:一個元素左外邊距邊界與其包含塊之間的偏移
5、Vrtical-align:設定元素的垂直對齊方式
6、Z-index:設定元素的堆疊順序,值高的元素會覆蓋值比較低的元素
...............................