我认为 width:auto 对于display:block 元素意味着“填充可用空间”。但是对于 <input> 元素,情况似乎并非如此。例如: <body> <form style='background:red'> <input type='text' style='background:green; display:block; width:auto'> </form> </body> 那么两个问题: 是否有确切的定义 width:auto 是什...
//<input type="button">不会换行,它默认white-space:pre,设置为white-space:normal即可 <div style="width:30px"> <button>欢迎关注袋鼠云技术团队微信公众号<button> </div> 这种特性很有意思,在《CSS世界》一书中有介绍。比如这种场景,元素的内容不定,内容少的时候居中显示,内容多的时候左对齐。 //我会...
<button style="text-align:left;">我很西瓜的瓜我很西瓜的瓜我很西瓜的瓜我很西瓜的瓜我很西瓜的瓜我很西瓜的瓜<button> </div> 来自《CSS世界》的一个彩蛋 box-sizing可以改变width:100%的作用域,那在没有box-sizing属性的那个时代,设置了width:100%同时又需要设置border和padding,怎么办,怎么办~ 宽度分...
通过将input元素的宽度设置为父元素宽度的百分比,可以实现input元素的宽度自适应。这种方法简单直接,适用于父元素宽度已知且固定的情况。 css .parent { width: 100%; /* 父元素宽度设为100% */ } .input-responsive { width: 100%; /* input元素宽度设为父元素宽度的100% */ } HTML示例: html <div...
今天无意看到一个登录页,input框focus时placeholder上移变成label的效果,无聊没事干就想着自己来实现一下,登录页面能做文章的,普遍的就是按钮动画,title的动画,以及input的动画,这是最终的效果图(如下), 同时附上预览页以及实现源码。 title 的动画实现
完整代码可以访问:auto input (codepen.io)点击预览 六、总结和说明 以上介绍了一种全新的可以实现自适应内容宽度的纯 CSS 方案,用到了平时不太起眼的下划线相关样式,如果你的项目不用兼容 IE,也刚好有这方面的需求,就可以放心用起来了,不过,就算用不上,也可以学习一下思路。下面总结一下要点: ...
所以说width:auto使得元素的宽度100%填充父级元素不简单,毕竟这个完全填充帮你把margin/border/padding/content都规划得好好的,你只需要关注内容就可以了。 不过CSS3中有个优秀的属性也是来帮我们解决完全填充问题的,box-sizing,说到box-sizing又不得不提标准盒模型和怪异盒模型,事实上box-sizing的各个值对应了元素...
width: auto 块级元素(如<div>或<p>)的初始宽度是auto,这使得它们占据了包含它们的块的整个水平空间。 根据CSS规范: ‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ +‘padding-right’ + ‘border-right-width’ + ‘margin-right’ = 块的宽度 ...
@media(min-width:800px){/* Revert the wrapper to a block element instead of flex */.group{display:block;}.group__item{width:auto;}} 由于.group是一个块元素,因此使用width: auto可以很好地填充其父元素的可用空间。 事例源码:https://codepen.io/shadeed/pe... ...
这样子,我们也可以知道为什么margin auto能居中了: 首先,先要知道宽高,既然已经知道了宽高,那margin就可以被反推出来值是多少,auto会平分剩下的(两边margin=行宽-width)。 先说一个概念:outerHeigth,也就是margin-box。顾名思义就是普通盒子模型加上margin。所以我们可以得出一个条件:居中的时候,outerHeigth=父(...