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

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>

原文地址：https://www.cnblogs.com/kk-home/p/9177095.html

时间： 2024-11-10 07:42:17

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

子元素浮动时无法撑开父元素，父元素高度为0的解决方法

当子元素浮动时无法撑开父元素,父元素高度为0.这时可以通过在浮动的子元素后清除浮动来使父元素获得正确的高度. <div> <div style="float:left;height:200px;">child</div> <div style="clear:both;"></div> </div>

CSS子元素浮动之后如何撑开父元素

(1)在浮动子元素后面添加 <div style="clear:both;"></div> (2)父元素CSS添加 z-index:1; overflow:hidden; (3)绝对定位/静止定位(absolute/fixed); (4)父元素也跟着浮动 (5)父元素设定高度 (6)最佳方案: 父元素CSS添加: overflow:auto;_height:1%;

文字或是子div在父div里垂直居中

只有一行文字的话,直接用line-hight可以解决. 有多行文字或是想要子div在父div里垂直居中: 首先要理解vertical-align: middle只在table属性中才会垂直居中,应用到display:inline-block元素的话就是和隔壁元素居中对齐. 方法一: 在div里增加一个隐藏子元素,高度为100%和父div一样,这样再设置vertical-align: middle的话子div就会和父div一样高的子元素垂直居中对齐. <style> .box{ float: l

代教材之(用DIV+CSS定义漂亮下拉框select)

1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>代教材之

jQuery切换下拉框里面对应的div

<!DOCTYPE html><html>      <head>            <meta charset="UTF-8">            <title>jquery实现下拉框选中对应的div</title>            <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script

DIV模拟的下拉框特效

CSS: <style type="text/css"> body, ul, li { margin: 0; padding: 0; font-size: 13px; } ul, li { list-style: none; } #divselect { width: 186px; margin: 80px auto; position: relative; z-index: 10000; } #divselect cite { width: 150px; height:

js实现点击下拉框选中对应的div

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js实现点击下拉框选中对应的div</title> <style type="text/css"> div{display:none;} </style> </head> <body> <select name="

iframe子页面调用父页面javascript函数的方法(支持chrome和IE的通用方法）

iframe子页面调用父页面javascript函数的方法 今天遇到一个iframe子页面调用父页面js函数的需求,解决起来很简单,但是在chrome浏览器遇到一点小问题.顺便写一下iframe的父页面调用子页面javascript函数的方法吧,备用! 1.iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.praent就可以了.比如调用a()函数,就写成: window.praent.a(); 但是我在chrome浏览器下却发现此方法无效了!查了半天才了解,在c

用div，ul，input模拟select下拉框

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>案例测试</title> 6 <link rel="stylesheet" href="css/all.css" /> 7 <script type="text/javascript" src=&