html css基礎教程入門之CSS 尺寸

2021-10-02 20:52:07 字數 3054 閱讀 4071

css 尺寸 (dimension) 屬性允許你控制元素的高度和寬度。同樣,它允許你增加行間距。

css height 屬性

height 屬性用以設定元素的高度,單位可以使用px,em等,通常用使用px(畫素)為html單位。這個屬性定義元素內容區的高度,在內容區外面可以增加內邊距、邊框和外邊距。

設定段落的高度和寬度:

p
height屬性可能的值有:

auto:預設。瀏覽器會計算出實際的高度。

length:使用 px、em 等單位定義高度。

%:基於包含它的塊級物件的百分比高度。通常單獨對乙個div高度為百分比沒有效果。

inherit:規定應該從父元素繼承 height 屬性的值。

css line-height 屬性

line-height 屬性設定行間的距離(行高)。該屬性會影響行框的布局。在應用到乙個塊級元素時,它定義了該元素中基線之間的最小距離而不是最大距離。 line-height 與 font-size 的計算值之差(在 css 中成為「行間距」)分為兩半,分別加到乙個文字行內容的頂部和底部。可以包含這些內容的最小框就是行框。

設定段落的高度和行高:

p
css max-height和min-height 屬性

max-height 屬性設定元素的最大高度。該屬性值會對元素的高度設定乙個最高限制。因此,元素可以比指定值矮,但不能比其高。不允許指定負值。

min-height 屬性設定元素的最小高度。該屬性值會對元素的高度設定乙個最低限制。因此,元素可以比指定值高,但不能比其矮。不允許指定負值。

max-height和min-height 屬性不包括外邊距、邊框和內邊距。

p
對為什麼需要設定max-height最大高度的解釋:

此屬性較少使用,可能是為了避免內容太多將高度撐太高影響布局美化統一,這個時候我們設定最大高度限制。比如乙個table tr td**物件裡裝乙個,而高度不確定,如果太高了不想撐破tr td**,這個時候通過css max-height限制最大高度是有必要的。

設定min-height最小高度應用地方的解釋:

有時設定乙個物件盒子時候避免物件沒有內容時候不能撐開,但內容多少不能確定所以又不能固定高度,這個時候我們就會需要css來設定min-height最小高度撐高物件盒子。當內容少時候最小高度能將內容顯示出,如果內容多餘最小高度能裝下時候,物件也會再隨內容增多而增高。根據實踐經驗,如果僅僅是上面這些處理,往往是無法應對實際需求的,存在一些「致命問題」。新建乙個前端學習qun438905713,在群裡大多數都是零基礎學習者,大家相互幫助,相互解答,並且還準備很多學習資料,歡迎零基礎的小夥伴來一起交流。

ie6不支援max-height解決方法

1)使用css hack來解決

.box
2)還有直接使用以下css**

.box
同理,推薦使用css hack來解決ie6不支援min-height的問題。

css width 屬性

width 屬性設定元素的寬度,這個屬性定義元素內容區的寬度,在內容區外面可以增加內邊距、邊框和外邊距。

傳統html 寬度屬性單詞:width 如width="300";

css 寬度屬性單詞:width 如width:300px;

設定段落的高度和寬度:

p
width屬性可能的值有:

auto:預設。瀏覽器會計算出實際的寬度。

length:使用 px、em 等單位定義寬度。

%:定義基於包含塊(父元素)寬度的百分比寬度。

inherit:規定應該從父元素繼承width屬性的值。

css max-width和min-width 屬性

max-width 定義元素的最大寬度。該屬性值會對元素的寬度設定乙個最高限制。因此,元素可以比指定值窄,但不能比其寬。不允許指定負值。

min-width 屬性設定元素的最小寬度。該屬性值會對元素的寬度設定乙個最小限制。因此,元素可以比指定值寬,但不能比其窄。不允許指定負值。

最小寬度(min-width)與最大寬度(max-width)用於設定最小最大寬度限制比較多。比如乙個為主列表,物件裡大小不定時候,為了不想讓他太小不統一這個時候我們可以使用css最小寬度樣式。再如,乙個盒子裡有文章有混排的時候,有時寬度不能確定,這個時候如果html img寬度超出了div盒子寬度,可能就會撐破div盒子造成混亂。

設定段落的最大寬度:

p
設定段落的最小寬度:

p
css max-width與css min-width可以同時在乙個css選擇器使用設定乙個物件最大最小寬度樣式。一般對物件設定此兩項樣式比較多。

ie6不支援max-width的解決方法

.box

說明:max-width:1000px; 這個是ie6以上級其它品牌瀏覽器支援最大範圍寬度。

而_width:expression((document.documentelement.clientwidth||document.body.clientwidth)<1000?"1000px":"");overflow:hidden;則是讓ie6支援max-width替代css**,但效果和其它版本瀏覽器相同效果。

ie6不支援min-width的解決方法

.box

讓ie6都支援max-width和min-width的解決方法

用到css**:

_width:expression(this.scrollwidth > 620 ? "620px" : (this.scrollwidth < 1? "1px" : "auto"));

說明:不能超出大於620px的寬度,又不小於1畫素的寬度。

Git入門基礎教程

有趣有內涵的文章第一時間送達!喝酒i創作i分享 關注我,每天都有優質技術文章推送,工作,學習累了的時候放鬆一下自己。生活中總有些東西值得分享 醉翁貓咪 寫了一篇文章 一篇文章了解github和git教程 還覺得不錯,繼續寫了 那麼繼續寫 git 基礎知識。git 官網 git簡介 git是一種分布式...

Python Django基礎教程(一)(入門)

django是比較流程的web框架之一。django安裝可以直接用pip安裝即可。環境windows py3.5版本 django 1.11 歡迎加入學習交流qq群 657341423 cmd下建立 專案建立 e djtest django admin.py startproject djtest ...

python實用入門基礎教程

這是乙個適用於有其他程式設計經驗的python初學者需要了解的簡易教程,例如 資料型別,判斷語句 運算子 邏輯運算子 選擇語句 迴圈語句等基礎語法。1.python的主要兩種程式設計方式 支援互動式程式設計和指令碼程式設計 關於何為互動式程式設計 2.python 特殊語法總結 1 python 最...