桐亚

赞

18

|

搜索文章

input与select 设置相同宽高，在浏览器上却显示不一致，不整齐

遇到 input与select 设置相同宽高，在浏览器上却显示不一致，遂实验了下（IE 10.013 ，Firefox 30.0），得出以下结论 input width，height 值里面，不包含 border边框和padding内边距，即：设置的只是内容本身的高与宽。border与padding不在值里面，在浏览器上显示可见。 select width，height 值里面，包含 border边框和padding内边距，即：设置的高宽里面包含了内容本身，border与padding的整体。padding值，border，内容是从值里面分走的高宽度，所以内容高宽会相对减小。如果padding值超过了对应值，整体样式会变。所以，两者设置相同的值，却会显示不整齐。

7年前
128
点赞
1

html清除样式基本属性

body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,p,input,select,textarea,form{margin: 0; padding: 0;}body{font:14px/1.5 "宋体";}img{border:none;}ul,ol{list-style:none;}input,select,textarea{outline:none;border:none;background:none;}textarea{resize:none;}a{text-decoration:none;}/清浮动/.clearfix:after{content:"";display:block;clear:both;}.clearfix{zoom:1;}选择::selection {background-color:#669900; color:#ffffff; text-shadow:none;}::-moz-selection {background-color:#669900; color:#ffffff;text-shadow:none;}去掉a的下划线a {blr:expression(this.onFocus=this.blur())} /if IE/a {outline:none;}/if 火狐等现代浏览器浏览器/省略号white-space:nowrap;overflow:hidden;text-overflow:ellipsis;英文自动换行word-break: break-all;强制不换行white-space:nowrap;contenteditable="true"clearfix完整版.clearfix:before,.clearfix:after { content:""; display:table;}.clearfix:after{clear:both;}.clearfix{*zoom:1;}

7年前
362
1
评论

制作mg动画需要什么软件

感觉好难啊

7年前
1.1k
1
评论

关于css中float的理解感觉css里的float是个非常神奇的东西，神奇之处在于，你知道它是什么意思，但是用的时候总是不知道怎么实现效果。又或者它会很容易地影响到别的元素和属性。所以今天打算尝试一下float的各种设置，看看效果。在这篇博客里做个总结。 1. 设置float后对后面元素的影响 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .div1{ border:1px solid red; width:50px; height:50px; float: left; } .div2{ background: green; widows: 30px; height: 30px; } </style> </head> <body> <div class="div1">div1</div> <div class="div2">div2</div> </body> </html> 效果：也就是说前面浮动元素会位于后续的非浮动元素的上方，确实是脱离了文档流。这大概就是“浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。”的意思吧。而另一方面，如果把两个元素调换次序，则效果为：这时候div1是浮动元素，会被上面的元素顶下来。即使改变div2的宽度，也依然如此。但是这时候如果把div2设置为position:absolute的话，div1就会浮动上去，说明position也是脱离标准流的，互不干涉。而设置了position：absolute属性的元素会覆盖接下来的浮动元素。 2. float和position的相互影响如果在float上设置position：absolute的话，会覆盖float的属性。就不是浮动了。float失效在float上设置position：relative的话，如果设置left/top/right/bottom等属性，则元素会先浮动到相应位置，然后再根据top/left/bottom/right所设置的距离发生偏移在float上设置margin属性也是有效的。

7年前
377
点赞
评论

个人成就

文章被点赞 2

文章被阅读 1,829

加入于

2017-11-03