常用css样式

/*CSS速查总表  --作者：Shifone*/


/*    http://css.cuishifeng.cn/    */


/* 
伪元素表单控件默认样式重置与自定义大全
http://www.zhangxinxu.com/wordpress/2013/06/%E4%BC%AA%E5%85%83%E7%B4%A0-%E8%A1%A8%E5%8D%95%E6%A0%B7%E5%BC%8F-pseudo-elements-style-form-controls/ 
*/


/*    查看浏览器自带样式
    “开发者工具” -> 右上角的竖着的三个点  -> “setting” -> 勾选 Elements 中的 “Show user agent shadow DOM”
*/


/* @import url("style.css") 引入另一个css文件*/


/* @charset "utf-8"; css文件中有中文时申明 */


/*区分class  css的类带有 _css  用于写js的类带有 _js */


/*相邻选择符(E+F)*/


/*兄弟选择符(E~F)*/


/*与 包含选择符(E F) 不同的是，子选择符(E>F)只能命中子元素，而不能命中孙辈*/


/*E[att]        选择具有att属性的E元素*/


/*E[att="val"]    选择具有att属性且属性值等于val的E元素*/


/* transparent 兼容IE9+ */


/* transform 兼容IE9+ */


/* opacity 兼容IE9+ */


/* border-radius 兼容IE9+ */


/* background-size 兼容IE9+ */


/* transition 兼容IE10+ */


/* animation 兼容IE10+ */



/*点击穿透：

pointer-events: none 的两个应用场景
通过设置pointerEvents的属性为none解决了，你可以“div 穿透”详细了解下

http://www.cnblogs.com/GongQi/p/4074609.html?utm_source=tuicool&utm_medium=referral
*/

.text_indent {
    /* 文字开头缩进 */
    text-indent: 2em;
}


/* 
contenteditable 属性指定元素内容是否可编辑。
<p contenteditable="true">这是一个可编辑段落。</p>
*/


/* 遇到背景图片与颜色叠加效果 background-color写在后面才能实现效果 */

.bg-clr {
    /* background：url(); */
    background-color: rgba(255, 255, 0, 0.2);
}

.transform_rotate:hover {
    transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    /* IE9+ */
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    /* transform: translate(100px,100px)  x轴,y轴 */
    /* transform: scale(2)  放大2倍 */
}

.transition:hover {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    /* IE10+ */
    -moz-transition: all 0.3s;
}


/* 伪类 */

a:link {
    /* 初始状态 */
    color: red;
}

a:visited {
    /* 访问后状态 */
    color: red;
}

a:hover {
    /* 悬停状态 */
    color: red;
}

a:active {
    /* 点击不放时状态 */
    color: red;
}

p:first-letter {
    /* 改变第一个文字 */
    color: red;
}

p:first-line {
    /* 改变第一行文字 */
    color: red;
}

p:before {
    content: "在开始处增加文字"
}

p:after {
    content: "在结尾处增加文字"
}

div::before {
    /* IE9+ */
    /* HTML结构： <div data-msg="类title框展示" style="position:relative;"> Hover ME</div> */
    /* content:attr(data-msg); */
    content: "伪元素";
    position: absolute;
    top: -50px;
    left: 10px;
    padding: 2px 6px;
    display: inline-block;
    color: #333;
    border: 1px solid #333;
    border-radius: 5px;
    font-size: 14px;
}

div::after {
    /* IE9+ */
    content: "";
    border-top: 5px solid #333;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    position: absolute;
    top: -6px;
    left: 60px;
}


/*<div>
    <p>1</p>
    <span>2</span>
    <p>3</p>
    <span>4</span>
</div>*/

div p:nth-child(2n-1) {
    /* 总奇数 IE9.0+ */
    color: #f00;
}

div p:nth-of-type(2n) {
    /* 只选择 p元素 的偶数 IE9.0+ */
    color: #f00;
}

p:last-of-type {
    /* IE9.0+ */
    color: #f00;
}

p:first-of-type {
    /* IE9.0+ */
    color: #f00;
}

p:last-child {
    /* IE9.0+ */
    color: #f00;
}

p:first-child {
    /* IE7.0+ */
    color: #f00;
}

.background {
    /* 背景图片固定 */
    background-attachment: fixed;
    background-image: url();
    background-color: #f00;
    background-repeat: no-repeat;
    /* background-repeat: repeat-x; */
    /* background-repeat: repeat-y; */
    /* background-position: left top */
    /* background-size: 宽    高 */
    /* background-size:contain;    图片重复直到覆盖内容 */
    /* background-size:cover;    图片无限放大覆盖内容 */
}

.border {
    border: 1px solid #f00;
    /* border-style:dotted  点线 */
    /* border-style:dashed  虚线 */
}


/*以省略号形式显示文字过多    单行溢出*/

.ellipsis_nowrap {
    display: inline-block;
    width: 370px;
    overflow: hidden;
    /* overflow:visible 默认值  对溢出内容不做处理，内容可能会超出容器。 */
    /* overflow: auto  有溢出时出现滚动条 */
    text-overflow: ellipsis;
    white-space: nowrap;
    /* 设置了word-wrap:break-word的时候 IE8中需要设置成normal */
    word-wrap: normal;
    /* 多行溢出 IE和火狐暂不支持*/
    /* display: -webkit-box;    可伸缩的盒子 */
    /* -webkit-line-clamp: 2;    省略号在第几行显示 */
    /* -webkit-box-orient: vertical;    在垂直方向有溢出 */
}


/*清除IE10+默认下拉按钮*/

select::-ms-expand {
    display: none;
}

.appearance,
select {
    appearance: none;
    /* 去除系统默认的样式 */
    -moz-appearance: none;
    /* Firefox */
    -webkit-appearance: none;
    /* Safari 和 Chrome */
}


/*手掌形*/

.cursor {
    cursor: pointer;
}


/*禁用形*/

.cursor {
    cursor: not-allowed;
}

.opacity {
    filter: alpha(opacity=50);
    /* IE8 */
    opacity: 0.5;
    /* IE9+ 以及其他浏览器 */
}


/* 去掉搜狗浏览器input type="password" 时出现的键盘*/

input::-webkit-input-safebox-button {
    display: none;
}

input::-webkit-input-placeholder {
    color: #999;
}

input:-ms-input-placeholder {
    /* IE10+ */
    color: #999;
}

input:-moz-placeholder {
    /* Firefox4-18 */
    color: #999;
}

input::-moz-placeholder {
    /* Firefox19+ */
    color: #999;
}


/*去除ie中input的叉和密码框的眼睛*/

input::-ms-clear,
input::-ms-reveal {
    display: none;
}


/* 禁止复制 */

.user_select {
    /*unselectable针对IE onselectstart针对Chrome、Safari -moz-user-select是firefox专有的
    <div unselectable="on" onselectstart="return false;"> some text </div> */
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}


/*去除webkit中Cookie默认背景色*/

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    box-shadow: 0 0 0px 1000px #ffffff inset;
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
    background-color: #ffffff !important;
}


/* 去除webkit中input的type="number"时出现的上下图标 */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type="number"] {
    /* 火狐 */
    -moz-appearance: textfield;
}

.clear:after {
    content: "";
    display: block;
    clear: both;
}

.borde_radius {
    /* IE9+ */
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.border_box {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/* 仅仅被Firefox浏览器识别的写法 */

@-moz-document url-prefix() {
    .demo {
        color: red;
    }
}


/* Webkit枘核浏览器(chrome and safari) */


/*设置line-height时  safari浏览器中input焦点光标会跟line-height一样高*/

@media screen and (-webkit-min-device-pixel-ratio:0) {
    input {
        line-height: normal;
    }
}


/*只对Chrome设置样式 用JS检查 window.chrome ，然后 document.head.appendChild( StyleSheetLink ) */


/*只针对safari*/

input {
    [;
    line-height: normal;
    ]
}


/*只针对 IE8+ 设置line-height*/

input {
    outline: none;
    line-height: 50px\9;
    /* IE8+ 到 IE10 有效 对 IE11+ 无效 IE11+ 中无需设置line-height */
}


/* Opera浏览器 */

@media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio:0) {
    head~body .demo {
        color: red;
    }
}


/* iPhone / mobile webkit */

@media screen and (max-device-width: 480px) {
    .demo {
        color: red
    }
}


/*去掉a标签的选中边框*/


/*IE 在Html代码内加 hidefocus="true"   <a href="#" hidefocus="true">链接</a> */

a:focus {
    /*非IE*/
    outline: none;
}


/* 媒体类型和查询条件 IE9+ */
/* 如果文档(body)宽度小于 1600 像素则修改背景颜色(background-color): */
@media screen and (max-width: 1600px) {
    .media_screen {
        height: 350px;
        width: 100%;
        background-color:lightblue;
    }
}

@media only screen and (max-width: 1600px) and (min-width: 1000px) {
    .media_screen {
        height: 350px;
        width: 100%;
    }
}

@-webkit-keyframes cirturn {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes cirturn {}

@-moz-keyframes cirturn {}

.keyframes_cirturn {
    /* 动画：动画名 执行一次时间 匀速(linear) 执行次数无限次(infinite)*/
    -webkit-animation: cirturn 1s linear infinite;
    -moz-animation: cirturn 1s linear infinite;
    animation: cirturn 1s linear infinite;
    /* IE10+ */
}

.box {
    box-shadow: 20px 20px 5px red inset;
    /* 右 下 模糊度 颜色 内投影 */
}

.font {
    font-family: "microsoft yahei";
    /* font-weight:lighter 轻 / normal 常规 / bold 重 */
    /* text-decoration: underline;   设置为none取消a链接默认下划线 */
    text-shadow: 2px 5px 2px red;
    /* 水平距离 垂直距离 模糊程度 颜色 */
    /* letter-spacing: 10px;    字间距 */
    /* white-space: nowrap;        强制一行显示 */
    /* white-space: normal;        常规显示 */
    /* word-wrap:break-word;    自动换行 ---如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。*/
    /* word-break: break-all    允许在单词内换行。 */
    text-align: justify;
    text-align-last: justify;
    vertical-align: middle;
}

@font-face {
    font-family: "自命名";
    src: url("字体图标文件");
}

div {
    font-family: "自命名";
}

div:before {
    content: "\名字"
}

li {
    list-style: none;
}

.gradient {
    /* 线性渐变 */
    background: linear-gradient(to left, red blue);
    /* 文字渐变时使用 */
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    /* background: linear-gradient(red,blue)    径向渐变 */
}


/* 占位隐藏 */

div {
    opacity: 0;
    opacity: 1;
    visibility: hidden;
    visibility: visible;
}


/* 分栏 */

.text {
    -webkit-column-count: 2;
    -webkit-column-rule: 1px red solid;
}


/* 双飞翼布局 */

.box {
    position: relative;
    width: 80%;
    min-width: 500px;
}

.box .left {
    width: 200px;
    position: absolute;
    left: 0;
    top: 0;
}

.box .content {
    /* 中间div 宽度自适应 */
    margin-left: 200px;
}

.box .right {
    width: 200px;
    position: absolute;
    right: 0;
    top: 0;
}


/* 三角形 */

div {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0px 10px 10px 10px;
    border-color: transparent transparent red transparent;
}


/* 弹性盒子布局 */

.flex_box {
    display: flex;
    flex-direction: row;
    /* flex-direction: column; */
}

.flex_box .left {
    flex-grow: 2;
    flex-basis: 0;
}

.flex_box .right {
    flex-grow: 3;
    flex-basis: 0;
    /* 按照 2:3 的比例分；需要再分加 display: flex; */
}