1. 程式人生 > >浮動子div撐開父div的幾種方法、給select賦值、zoom樣式的含義、實現select下拉框readonly

浮動子div撐開父div的幾種方法、給select賦值、zoom樣式的含義、實現select下拉框readonly

disable hid 對象 居中 使用說明 child react back for

1.浮動子div撐開父div的幾種方法:

(1)在父div中在添加一個清除浮動的子div<div style=" clear:both;"></div>,該div不設置任何樣式,只用來清除浮動

(2)在父div的css樣式中設置overflow:hidden;zoom:1;

(3)設置父div也為浮動元素float:left,這樣設置的壞處是不能用margin:auto;實現居中

(4)設置父元素display:inline-block;,這樣設置的壞處是不能用margin:auto;實現居中

(5)在父div中添加<br clear="both">子元素

(6)給父元素引用clearfix樣式(未試過)

  clearfix{zoom:1; }

clearfix:after{ontent:""; display:block; claer:both; }

2.給select賦值

@(Model.TIMETYPE == 1 ? "selected" : "")

<select style=‘float:left;width:70px‘ id=‘TIMETYPE‘ name=‘TIMETYPE‘ class=‘form-control‘>

<option @(Model.TIMETYPE == 1 ? "selected" : "") value=‘0‘>時</option>

<option @(Model.TIMETYPE == 1 ? "selected" : "") value=‘1‘>天</option>

</select>

3.zoom樣式的含義

normal

使用對象的實際尺寸。

<number>

用浮點數來定義縮放比例。不允許負值

<percentage>

用百分比來定義縮放比例。不允許負值

說明:

設置或檢索對象的縮放比例。

  • 對應的腳本特性為zoom

zoom是mcrosoft的專有屬性,在CSS中經常用來觸發mcrosoft的專有屬性layout(layout介紹)。

zoom 基本語法zoom : normal | number

語法取值normal:默認值。

使用對象的實際尺寸number : 百分數 | 無符號浮點實數。浮點實數值為1.0或百分數為100%時相當於此屬性的 normal 值。

使用說明

設置或檢索對象的縮放比例。設置或更改一個已被呈遞的對象的此屬性值將導致環繞對象的內容重新流動。雖然此屬性不可繼承,但是它會影響對象的所有子對象( children )。這種影響很像 background 和 filter 屬性導致的變化。此屬性對於 currentStyle 對象而言是只讀的。對於視 頻對象而言是可讀寫的。對應的腳本特性為 zoom 。在實際應用中,由於考慮到兼容性,在頁面制作過程中經常出現的就是zoom:1,其他的基本不會用到。

4.實現select下拉框readonly

input和textarea 都有readonly屬性,但是select卻不行,因為Select下拉框只支持disabled屬性,不支持readOnly屬性

而在提交時,disabled的控件,又是不提交值的,在網上搜索了一下,發現有個很好的方法:

國內:

onbeforeactivate="return false" onfocus="this.blur()" onmouseover="this.setCapture()" onmouseout="this.releaseCapture()"

國外:

onfocus="this.defaultIndex=this.selectedIndex;" onchange="this.selectedIndex=this.defaultIndex;"

<select id="countries" onfocus="this.defaultIndex=this.selectedIndex;" onchange="this.selectedIndex=this.defaultIndex;">

<option value="1">Country1</option>

<option value="2">Country2</option>

<option value="3">Country3</option>

<option value="4">Country4</option>

<option value="5">Country5</option>

<option value="6">Country6</option>

<option value="7" selected="selected">Country7</option>

<option value="8">Country8</option>

<option value="9">Country9</option>

</select>

浮動子div撐開父div的幾種方法、給select賦值、zoom樣式的含義、實現select下拉框readonly