浮动子div撑开父div的几种方法给select赋值zoom样式的含义实现select下拉框readonly

Posted 2020-11-17 kk-home

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>