标签：## 世界 padding width CSS input placeholder red
## 文本溢出```html <style> /* 单行文本 */ .box{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* 多行文本 */ .box{ word-break: break-all; display: -webkit-box; -webkit-line-clamp: 3; /* 指定行数*/ -webkit-box-orient: vertical; overflow: hidden; } </style> ```
## 画三角形
```css .box { content: ''; position: absolute; border: 10px solid transparent; border-bottom-color: pink; } ```
## 表单
```css /* 所有表单的placeholder 默认颜色 */ /* IE9及以下版本不支持input的placeholder属性，需要用JS来做兼容。 */ input::-webkit-input-placeholder{ color:red; } input::-moz-placeholder{ /* Mozilla Firefox 19+ */ color:red; } input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */ color:red; } input:-ms-input-placeholder{ /* Internet Explorer 10-1*/ color:red; }
/* 去除激活input的默认边框, 三种方法都能实现 */ input{ outline: none; outline: medium; outline: 0; }
/* textarea禁止拖动 */ textarea{ resize: none; } ```
## 高度为宽度的一半
`padding`设置百分比是基于父元素的，从而实现等比例效果
```html <style> .parent{ width: 500px; } .chlid{ width: 100%; height: 0; padding-bottom: 50%; background: red; } </style> <div class="parent"> <div class="chlid">A</div> </div> ```
## 为什么padding-bottom是基于父元素的宽度而不是高度
> padding/margin使用%单位是规定基于父元素的宽度的百分比的内外边距。
父元素的高度往往由子元素来决定，如果子元素改变`margin-top`，相应的父元素高度也会进行适应性增加；
此时父元素高度增加的同时，`margin-top`若以父元素高度为基准，则其实际数值又会发生适应性变化，双向因果会造成循环，所以W3C的规范做出了以上规定。
## 自适应正方形
**定位**
```css .parent{ height: 0; width: 50%; padding-top: 50%; background: #ccc; position: relative; } .chlid{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: red; } ```
**padding**
```css .parent{ width: 50%; background: #ccc; } .chlid{ height: 0; width: 100%; padding-bottom: 100%; background: red; } ```
标签：##,世界,padding,width,CSS,input,placeholder,red 来源： https://www.cnblogs.com/yxlbk/p/16573697.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。