（小总结）前端记不住但是会用的属性及知识点

## 去除input的点击之后的变黑边框

 outline: none;

## 去除li标签的小圆点

 list-style: none;(circle(圆圈))

## 去除图片底部边距

vertical-align:top/bottom/middle;

表格table的单元格之间的距离

cellspacing: 0px;(在行内设置)

border-collapse: collapse;(在css中设置，效果更好（线更细，线重合），

但是要给table和td分别都设置一下边框border)

## a标签是行内元素，行内元素的特点是内容多大，

宽高就有多大，但是当里面是img时，要给a标签设置。

display: block;

并且这样不只文字可以点，可以使整个a标签都能

点了之后跳转，提高用户体验。

## 行内块之间都会有空白缝隙，因为他们是以基线对齐的。

最典型的就是图片和文字之间，就是基线对齐。

## 要想使盒子大小保持不变

box-sizing: border-box;（内减盒子）

 

## 如果盒子（块级元素）没有设置宽高，宽度和父元素一样，

高度由内容撑开，设置padding不会撑开盒子

## text-align: center;对内容进行水平居中，

但是当内容有块级元素时，没有用。

## 解决塌陷：

父元素设置边框/overflow:hidden;/直接写padding:;

## boder-radius:;

## box-shadow:;

## text-shadow:;

## 清除浮动

一、在浮动元素下面加上空的标签,并且加上style="clear: both;"

二、在父元素下面加上overflow：hidden;

## 伪元素(div::after{}/div::before {})清除浮动()  在基础样式前加，然后给需要清除浮动的元素加上clearfix这个类名

clearfix::after {

    content: '';

    display: block;

    height: 0;

    clear: both;

    visibility: hidden;

}

## 在基础样式前加，然后给需要清除浮动的元素加上clearfix这个类名

.clearfix:before,.clearfix:after {

                content: '';

                display: table;

            }

            .clearfix:after {

                clear: both;

            }

            .clearfix {

                *zoom:1;

            }

## 字体图标 iconfont.cn   或者  icomoon

## visibility：visible; visibility: hidden;

## 绘制三角形

    先给一个盒子模型

    然后设置样式：

    width:0px;

    height:0px;

    border-top:20px solid transparent；

    border-left:20px solid transparent;

    border-right:20px solid transparent;

    boder-bottom:20px solid black;

## 绘制圆形

  border-radius:50%;

##  水平居中

text-align:center;只能让行内元素和行内元素水平居中

margin:0px auto;只能让块级元素在块级元素中水平居中

## 垂直居中

line-height:行高等于块级元素行高；只能让一行文本水平居中

## margin 可以给负值  padding不可以给负值

## box-sizing:boder-box;

## box-sizing: content-box;标准模型

# 鼠标cursor: not-allowed; 禁止

    cursor:wait; 等待

    cursor:pointer;小手

 

## outline：none; 轮廓线，一般用于去除input的输入框轮廓线

## 文本域(textatea)禁止拖拽 resize:none;

## vertical-align 一般用于让行内块和行内元素文本对齐

## vertical-align 用于让图片与文字对齐：

vertical-align:middle;

## 修改提示文字样式

input::placeholder {

            color: aqua;

        }

 

前端css参考手册网站：https://css.doyoe.com/

   

元素::selection {

}

even偶数。odd奇数

# filter: blur(40px)  模糊滤镜