CSS 世界

本文主要是介绍CSS 世界，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

## 文本溢出
```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; } ```

这篇关于CSS 世界的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！