寬高自適應及居中

2021-09-10 02:36:21 字數 1814 閱讀 8175

1.寬度自適應

語法:width:100%;注:

1.塊元素預設寬度為100%,繼承父元素的寬度

2.寬度自適應通常運用在通欄效果中

2.高度自適應

語法:height:auto; 或者不設定高度

1.最小高度

語法:min-height:數值+單位;注:

ie6不識別min-height屬性,解決方案如下:

a)min-height:100px; _height:100px;

注:新增下劃線的css屬性只有ie6瀏覽器識別

b)min-height:100px; height:auto!important;height:100px;

2.最大高度

語法:max-height:數值+單位;

3.最小寬度

語法:min-width:數值+單位;

注:塊元素設定最小寬度時,需要將元素轉換為內聯塊元素再設定min-width屬性

4.最大寬度

語法:max-width:數值+單位;

描述:父元素高度自適應,子元素float後,造成父元素高度為0,這個問題稱為高度塌陷問題

解決方案:

1)給父元素乙個固定的高度

缺點:違背了高度自適應的原則

2)給父元素設定overflow:hidden;

注:給父元素設定overflow:hidden;觸發了bfc(塊級格式化上下文),閉合了子元素的浮動,父元素重新計算高度,子元素佔據了空間。

優點:簡單

缺點:當子元素有溢位顯示在父元素框之外時,會被隱藏

3)在浮動的子元素的末尾新增乙個空div,並設定以下css樣式:

.clearx

注:在ie6瀏覽器中不能識別較小高度的容器(一般為10px),通過設定overflow:hidden;來解決

4)萬能清除浮動法

父元素:after四、偽元素

1.在父元素中所有內容之前新增乙個偽元素

語法:父元素:before

2.在父元素中所有內容之後新增乙個偽元素

語法:父元素:after注:

a)無論偽元素中內容是否為空,content屬性都不能省略

b)偽元素是內聯元素

五、元素隱藏不可見的兩種方式

1.display:none;(看不見,摸不著)

元素隱藏不可見,位置不保留

2.visibility:hidden;(看不見,摸的著)

元素隱藏不可見,位置保留

語法:html,body 元素

注:視窗高度自適應是指讓某個元素的高度適應視窗高度的變化,當body高度為0或者高度小於乙個螢幕視窗的高度時,需要使用視窗高度自適應。

寬高自適應

網頁布局中經常要定義元素的寬和高。但是很多時候我們希望元素的大小能夠根據視窗或子元素自動調整,這就是自適應 元素自適應在網頁布局中非常重要,他能夠使網頁顯示更加靈活,可以適應在不同裝置 不同視窗和不同解析度下顯示 1.寬度自適應 元素寬度設定為100 塊元素寬度預設為100 2.元素具備最小高度的自...

寬高自適應

寬高自適應 靈活 網頁布局中經常要定義元素的寬和高。但很多時候我們希望元素的大小能夠根據視窗或子元素自動調整,這就是pc自適應。自適應的優點 元素自適應在網頁布局中非常重要,它能夠使網頁顯示更靈活,可以適應在不同裝置 不同視窗和不同解析度下顯示。一 相對視窗和父元素的自適應寫法 寬度 width 1...

寬高自適應

寬高自適應可以使得網頁更加靈活,適應在不同的裝置不同解析度下。一 pc端寬高自適應 相對視窗或者父元素的自適應情況 寬度自適應 width 100 預設情況下,不新增定位時 寬度自適應的比例,是參照父元素的寬度進行顯示的,也就是說,如果元素的父元素是整個頁面的話,顯示的時候就是鋪滿整個螢幕 如果當父...