那些你总是记不住但又总是要用的css

2020-9-8 张宇童

有没有经常遇到一些样式每次写都要用百度呢?我收集了一些我平时经常要用到的但又总是记不住的样式。有错误的地方欢迎指正。转载请注明出处。

一、设置input 的placeholder的字体样式

input::-webkit-input-placeholder {    /* Chrome/Opera/Safari */
    color: red;
}
input::-moz-placeholder { /* Firefox 19+ */  
    color: red;
}
input:-ms-input-placeholder { /* IE 10+ */
    color: red;
}
input:-moz-placeholder { /* Firefox 18- */
    color: red;
}

设置input聚焦时的样式

input:focus {   
  background-color: red;
}

取消input的边框

border: none;
outline: none;

二、隐藏滚动条或更改滚动条样式

/*css主要部分的样式*//*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
    width: 10px; /*对垂直流动条有效*/
    height: 10px; /*对水平流动条有效*/
}

/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: rosybrown;
    border-radius: 3px;
}

/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb{ 
    border-radius: 7px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #E8E8E8;
}

/*定义两端按钮的样式*/
::-webkit-scrollbar-button {
    background-color:cyan;
}

/*定义右下角汇合处的样式*/
::-webkit-scrollbar-corner {
    background:khaki;
}

三、文字超出隐藏并显示省略号 单行(一定要有宽度)

width:200rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

多行

word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;

四、控制div内的元素自动换行

word-wrap: break-word;
word-break:break-all;

五、 纯css画三角形

#demo {
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent red transparent;
}

六、 绝对定位元素居中(水平和垂直方向)

#demo {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: green;
}

七、表格边框合并

table,tr,td{border: 1px solid #333;}
table{
  border-collapse: collapse;
}

标签: CSS

评论(2) 浏览(479)

关于inline-block的间隙问题

2019-11-14 张宇童 学习日志

屏幕快照 2019-11-14 下午10.01.06.png

如图所示这样的遐思你受的了吗?


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .container {
            width: 1000px;
            height: 400px;
            background: #ddd;
            /*font-size: 0px;*/
        }
        .left {
            width: 300px;
            height: 100px;
            background: #7ac;
            display: inline-block;
        }
        .right {
            width: 500px;
            height: 100px;
            background: #678;
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

为什么呢?

最终我们找到div和div之间有一个换行符

屏幕快照 2019-11-14 下午10.09.03.png

我们去掉试试

屏幕快照 2019-11-14 下午10.12.15.png

屏幕快照 2019-11-14 下午10.12.10.png

最后就好了。

当然我们也可以使用font-size:0来做。

标签: CSS html

评论(0) 浏览(442)

float元素详解

2019-11-14 张宇童 学习日志

很多同学可能对于float不太理解这里的float有几点特性

第一点是float脱离文档流 当不脱离文本流

这里说的是什么意思呢?

就是空间与文字的概念。

你可以理解成为一个float:left的元素它脱离了文档是指的在一个容器内不受容器内其他的块级元素影响。

而容器内容文本呢?则会绕开它。

第二点呢就是会尽量靠上

第三就是对于父级元素的影响,怎么理解呢?

就是一个容器我们没有给它设置高度。因为我们的设想是让内容撑开父级元素

而如果我们给内容元素设置了float则会导致父级元素高度塌陷


以下是一张动图。请点击后观看

2019-11-14 20.58.13.gif


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .container {
            width: 800px;
            height: 300px;
            background: linear-gradient(0deg, red 0%, green 100%)
        }
        .p1 {
            width: 100px;
            height: 100px;
            background: #ddd;
            float:left;
        }
    </style>
</head>
<body>
    <div class="container">
        <span class="p1"></span>
    </div>
    <div class="container">
        <span>我是文字</span>
        <span class="p1">float1</span>
        <span class="p1">float2</span>
        
    </div>
</body>
</html>



下面大家来看一个float三栏布局

屏幕快照 2019-11-14 下午9.44.11.png

<!DOCTYPE html>
<html>
<head>
    <title>float三栏布局</title>
    <style type="text/css">
        .left {
            float: left;
            height: 200px;
            width: 200px;
            background: red;
        }
        .right {
            float: right;
            height: 200px;
            width: 200px;
            background: green;
        }
        .middle {
            height: 200px;
            background: blue;
            margin-left: 200px;
        }
    </style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="middle">经典三栏布局</div>
</body>
</html>

标签: CSS html

评论(0) 浏览(446)

flex弹性盒子布局

2019-11-14 张宇童 学习日志

flex是css专门为布局而诞生的一个属性

用法:

1、首先在外层元素定义一个display:flex

2、在内层元素使用flex: 1

是不是很简单呢?

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .container {
            display: flex;
            width: 800px;
            height: 300px;
            border: 1px dashed red;
            background:  linear-gradient(0deg, transparent 0, green 30%, red 60%, black 100%)
        }
        .flex {
            flex: 1;
            margin: 5px;
            background: #adc;
        }
        .flex2 {
            flex: 2;
            margin: 5px;
            background: #eee;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="flex"></div>
        <div class="flex"></div>
        <div class="flex2"></div>
    </div>
</body>
</html>

效果图:

屏幕快照 2019-11-14 下午8.37.35.png

既然flex这么好用为什么没有大规模的使用呢?

原因是很多浏览器不兼容,并且期间有过几次的语法变动

标签: CSS html

评论(0) 浏览(401)

css中的自定义字体

2019-11-12 张宇童 学习日志

<!DOCTYPE html>
<html>
<head>
    <title>自定义字体</title>
    <style type="text/css">
        body{
            font-family: 'IF';
        }
        @font-face{
            font-family: 'IF';
            src: url('./SetoFont-1.ttf');
        }
    </style>
</head>
<body>
hello world
</body>
</html>
屏幕快照 2019-11-12 下午9.50.15.png

标签: CSS

评论(0) 浏览(984)

Powered by emlog