本文主要是介绍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 世界的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!