浏览器的私有前缀

1. -moz-:表示火狐浏览器的私有属性
2. -ms-:表示ie浏览器的私有属性
3. -webkit-:表示safari、谷歌私有属性
4. -o-:表示opera私有属性

图片底部空白缝隙的解决方法

img {width: 500px;/* 解决方案一 */vertical-align: top;/* 解决方案二 *//* display: block; */
}

文字溢出省略号显示

单行文本溢出显示省略号

1.强制一行内显示文本 white-space:nowrap 2.溢出部分隐藏 overflow: hidden; 3.文字用省略号代替溢出的部分 text-overflow: ellipsis;

代码示例

.box1 {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}

多行文本溢出显示省略号

浏览器兼容性较差

圆角边框

在css3中 新增了圆角边框样式 这样我们的盒子就会变成圆角了
border-radius属性用于设置元素的外边框圆角
radius半径（圆的半径）原理：圆与边框的交集形成圆角效果

border-radius属性

该属性是一个简写数值，可以跟四个值 分别代表左上角、右上角、右下角、左下角
示例：border-radius: 10px 20px 30px 40px;
两个值时分别代表 左上角 右下角，右下角 左上角 border-radius: 10px 40px;

圆形的画法

 .box {border-radius: 50%;
}

css图片模糊处理

img:hover {filter: blur(2px);
}

css初始化

/* 清除所有标签的内外边距 */
* {margin: 0;padding: 0;
}/* 让倾斜的文字不倾斜 */
em, i {font-style: normal;
}/* 清除li前的小圆点 */
li {list-style: none;
}/* 清除图片底部空白缝隙 */
img {border: 0;vertical-align: middle;
}button {cursor: pointer;
}/* 清除a标签默认样式 */
a {color: #666;text-decoration: none;
}a:hover {color: #c81623;
}

背景颜色半透明

  p {/* 背景颜色半透明  盒子里面的内容不受影响*/background: rgba(0, 0, 0, .5)
}

文本缩进

text-indent 可以用来指定文本的第一行的缩进 通常是段落的首行缩进

 p {/* em为一个相对单位 */text-indent: 2em;
}

文字垂直对齐

• vertical-align属性的运用 经常用于设置图片或者表单（行内块元素）文字垂直对齐
• 用于设置一个元素的垂直对齐方式 但他只争对行内元素和行内块元素有效
• vertical-align（baseline 默认 元素放在父元素的基线上）
• （top 顶端对齐 middle 把此元素放在父元素中部 bottom 底端对齐）