css學習筆記二

2022-02-06 08:27:34 字數 1114 閱讀 2180

2023年7月12日

一、absolute

1.注釋符有去空格效果

2.absolute有跟隨性,最佳定位效果

3.居中效果--在父元素裡設定absolute,test-align:center 前用乙個 空字串然後

4.absolute不佔空間,不影響頁面布局

5.absolute時z-index不起作用

6.top ,bottom,left,right有拉伸作用ie7+可以替代width/height,內部元素可以自動拉伸。

7.比較

正常情況下

內部元素支援百分比width/heigt值,但要想起作用,需要父級容器的height值不是auto。

absolute下

即使父級元素的height值是auto,只要容器絕對定位拉伸形成,百分高度也支援。

8.width/height和top,botton,right,left拉伸同時存在,設定的尺寸是width/height大於top,bottom,left,right即優先順序

但是當在設定margin:auto是兩個是合作關係。ie8+下

二、line-height 行高,兩行文字基線之間的距離

1.line-height可以讓單行文字居中

2.line-heiht與行內框盒子模型

四中盒子

3.內聯元素的高度由line-height決定的。

4.內容區域+行間距=行高

5.內容區域高度只與字型大小以及字型相(有)關與行高無關

6.在simsun字型下內容區域高度等於文字大小值

7.消除底部間隙的方法,行高不影響高度

7.1塊狀化-無基線對齊

img7.2底線對齊

img7.3行高足夠小-基線位置上移

.box

8.水平垂直居中 ie8+

.box父級

.box>img

9.多行文字水平垂直居中ie8+

.box

.box>.text

10.ie6,ie7 line-height代替height的

.out

.in1

.in2

height :36px;

line-height: 36px;

css學習筆記(二)

13,編寫頭部的css 因為要將css檔案定義在html檔案頭部的方法為內部樣式表方法,所以下面舉例說明怎麼應用內部樣式表方法在html檔案的頭部編寫css 1 開啟記事本,在記事本中輸入如下一段普通的html 然後將 檔案以副檔名.html的形式儲存 例項 在html檔案的頭部應用內部樣式表方法新...

CSS學習筆記二

css布局與傳統 table 布局最大的區別在於 原來的定位都是採用 通過 的間距或者用無色透明的gif來控制文布局版塊的間距 而現在則採用層 div 來定位,通過層的margin,padding,border等屬性來控制版塊的間距。1.定義div 分析乙個典型的定義div例子 sample 說明如...

CSS學習筆記 二

布局 由於電腦螢幕解析度的不同以及瀏覽器大小的不同,造成了在布局的時候整個頁面的大小的不確定,現有三種方法來解決這一問題,分別是 固定式布局 流式布局 彈性布局。固定布局 使用以畫素為單位定義的寬度,這種布局型別稱為固定寬度的布局 好處 寬度固定,可以對介面元素進行細緻的控制,在瀏覽器伸縮的過程中,...