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