# 其他技巧

# 浏览器的私有前缀

-moz-:表示火狐浏览器的私有属性
-ms-:表示ie浏览器的私有属性
-webkit-:表示safari、谷歌私有属性
-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 底端对齐）

# web(w3c)标准

# web标准的构成

主要包括：结构、表现、行为

结构用于对网页元素进行整理和分类，现阶段主要学习的是html
表现用于设置网页元素的版式、颜色、大小等外观样式、主要指的是css
行为是指网页模型的定义和交互的编写，现阶段主要学习的是JavaScript

← css基础