css疑难杂症

2020-11-12 本文已影响0人头发飘逸

1.如何改变文本提示内容样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        ::-webkit-input-placeholder { /* WebKit browsers */
            color:red;
        }
        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color:red;
        }
        ::-moz-placeholder { /* Mozilla Firefox 19+ */
           color:red;
        }
        :-ms-input-placeholder { /* Internet Explorer 10+ */
           color:red;
        }
        </style>
    </head>
    <body>
        <input type="text" placeholder="请输入你的姓名"/>
    </body>
</html>

2.div盒子水平垂直居中的方法

这个问题比较老，方法比较多，各有优劣，着情使用。

一、盒子没有固定的宽和高

方案1、Transforms 变形

这是最简单的方法，不仅能实现绝对居中同样的效果，也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%) 必须加上

top: 50%; left: 50%;

优点：

内容可变高度
代码量少

缺点：

IE8不支持
属性需要写浏览器厂商前缀
可能干扰其他transform效果
某些情形下会出现文本或元素边界渲染模糊的现象

<div class="wrapper">我不知道我的宽度和高是多少，我要实现水平垂直居中。</div>

.wrapper {
           padding: 20px;
           background: orange;
           color: #fff;
           position: absolute;
           top: 50%;
           left: 50%;
           border-radius: 5px;
           -webkit-transform: translate(-50%, -50%);
           -moz-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
       }

方案2、在父级元素上面加上上面3句话，就可以实现子元素水平垂直居中。

<div class="wrapper">
        我不知道我的宽度和高是多少，我要实现水平垂直居中。
</div>

.wrapper {
            width: 500px;
            height: 300px;
            background: orange;
            color: #fff;
            /*只需要在父元素上加这三句*/
            justify-content: center; /*子元素水平居中*/
            align-items: center; /*子元素垂直居中*/
            display: -webkit-flex;
        }

二、盒子有固定的宽和高

方案1、margin 负间距

此方案代码关键点：
1.必需知道该div的宽度和高度，
2.然后设置位置为绝对位置，
3.距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，
4.最后将该div分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。

<div class="wrapper">我知道我的宽度和高是多少，我要实现水平垂直居中。</div>

.wrapper {
            width: 400px;
            height: 18px;
            padding: 20px;
            background: orange;
            color: #fff;
            position: absolute;
            top:50%;
            left:50%;
            margin-top: -9px;
            margin-left: -200px;
        }

方案2、margin:auto实现绝对定位元素的居中（该方法兼容ie8以上浏览器）

此方案代码关键点：
1、上下左右均0位置定位；
2、margin: auto;

<div class="wrapper">我不知道我的宽度和高是多少，我要实现水平垂直居中。</div>

.wrapper {
            width: 400px;
            height: 18px;
            padding:20px;
            background: orange;
            color: #fff;

            position: absolute;
            left:0;
            right:0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

移动端呼叫电话号码的一个技巧

<a href="tel:18816798025">点击呼叫18816798025</a>

css更改复选框背景颜色

.close .content .all[type=checkbox]{
    -webkit-appearance:none ;
    background: url(../img/shopping/radio_nor.png);
    background-size: cover;
    background-repeat: no-repeat;
    outline: none;
}
.close .content .all[type=checkbox]:checked{
    -webkit-appearance:none ;
    outline: none;
    background: url(../img/shopping/radio_hig.png);
    background-size: cover;
    background-repeat: no-repeat;
}

改变 input 焦点光标的颜色 */

caret-color: red;  // 只需要在input对应样式上加个属性就可以了

CSS控制文字，超出部分显示省略号

    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    
    display: inline-block; // 在flex里省略失效 加上这句代码

css实现禁止页面横竖向滚动

overflow-x:hidden;overflow-y:hidden;

//两行

text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;

css小字和大字怎么底对齐

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css小字和大字怎么底对齐?</title>
        <style>
            .flex{
                display: flex;
                align-items:baseline
            }
            .big-sign{
                font-size:50px;
            }  
        </style>
    </head>
    <body>
        <span class="flex">
            <span class="big-sign">你好</span>
            <span>你好</span>
        </span>  
    </body>
</html>

css border边距在盒子内部呈现，不占用外部Px

  box-sizing: border-box;
  border: solid 1px white;