（1）、清除所有元素的内边距和外边距 ： *{ margin: 0; padding: 0; }
（2）、清除 a 标签的下划线： a { text-decoration: none; }
（3）、当有鼠标悬停在a标签下划线重新显示： a:hover {text-decoration:underline;}
（4）、清除单个 li 标签前面的黑点： li { list-style: none; } ,想要清除所有 li 标签前面的黑点就把 li 换成 ul
（5）、想要元素(行内元素除外)在页面中居中最简单的办法： margin: 0 auto;
（6）、想要文字居中： text-align: center; 或者 设置 line-height: 当前元素的行高 ;
（7）、行内元素、块元素和行内块元素之间的转换：
行元素：display : inline;
块元素： display : block;
行内块元素： display:inline-block;
（8）、隐藏元素：
display:none; 隐藏且不占用位置
visibility:hidden; 隐藏但保留位置
opacity:0; 隐藏但保留位置
（9）、Position定位：
tatic(默认) 静态定位，流式布局
relative 相对定位，参与流式布局，可以使用left等在原有位置上进行位置调整（相对原来元素微调时常用）
absolute，绝对定位，脱离文档流，相对于离自己最近的、position为非static的祖先元素进行定位（一般常和 elative 搭配使用）
fixed 固定定位，脱离文档流，相对于浏览器窗口定位，不随页面滚动而改变位置(一般导航条常用)
sticky，粘性定位，可实现动态 fixed(一般搜索框常用)
（10）、解决行内块间距问题最简单的方法：给父元素设置font-size:0
（11）、单行文本溢出显示为省略号：
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
（12）、清除浮动带来的影响：
使用overflow属性（给父元素设置） ：overflow: hidden;
使用额外标签法： 在浮动的盒子之下再放一个标签，在这个标签中使用clear:both （但标签会空出来很多）
使用伪元素来清除浮动： 要清除浮动的元素:after{ content:"";height:0;line-height:0;display:block;visibility:hidden;clear:both }
使用双伪元素清除浮动： 要清除浮动的元素:before, 要清除浮动的元素:after { content: "";isplay: block;clear: both; }
（13）、浮动：
float: left; 左浮动 float: right; 右浮动
（14）、弹性布局（弹性盒子）：
display: flex; 设置为弹性布局
justify-content 设置弹性项目在主轴上的对其方式
flex-start 沿左边对其（默认）
flex-end 沿右边对其
center 居中对齐
space-between 两端对其
space-around 设置外边距相同
space-evenly 所有间隔相同
align-items属性定义项目在交叉轴上如何对齐
flex-start：沿上端对齐
flex-end：沿底部对齐。
center 中点对齐。
baseline: 项目的第一行文字的基线对齐。
tretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
flex-direction属性决定主轴的方向（即项目的排列方向）
row（默认值）：从左到右排列。
row-reverse：从右到左排列。
column：从上往下排列。
column-reverse：从下往上排列
flex-wrap 一条轴线上排不下设置换不换行
wrap 换行，第一行在上方
wrap-reverse 换行，第一行在下方
nowrap 不换行 （默认） 如果排不下就会压缩项目的大小
align-content 定义多条轴线时的对其方式 （只有一条轴线时不起作用）
flex-start 开头对齐。
flex-end 末尾对齐。
center 中点对齐。
space-between 与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值） 轴线占满整个交叉轴。
注意：弹性项目的 order 属性值越小排列越靠前可以为负数默认值都是 0 lex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大（值越大分到的空间越大）。前提是必须要有剩余的空间 。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
（15）、圆角边框（border-radius）的基本用法：
圆角边框的最基本用法就是设置四个相同弧度的圆角
border-top-left-radius：30px； //左上角
border-top-right-radius：30px； //右上角
border-bottom-left-radius：30px； //右下角
border-bottom-right-radius：30px； //左下角
如果这四个弧度的圆角相同，可以写成：
border-radius：50%；
（16）、去除 input 输入框获取焦点时的加粗边框：
outline: none;
（17）、阻止浏览器默认行为：
e.preventDefault()
（18）、在众多列表中寻找第几个（css方法）：
list：first-child 第一个
list： last-child 最后一个
list： nth-child(数字) 数字是几就是第几个
list： nth-child(2n) 列表中所有偶数标签
list： nth-child(2n-1) 列表中所有奇数标签
list： nth-child(n+3) 列表中从第三个开始到最后的标签
list： nth-child(-n+3) 列表中从 0 到 3 即小于 3 的标签
list： nth-last-child(3) 列表中倒数第三个标签
（19）、背景图片的设置：
background-size: 100% 100%; 或者 background-size: contain; 背景占满整个容器
设置背景颜色 ：background-color: 颜色名/16进制/rgb方式（rgb后面可以加a a表示透明度范围 0-1）
设置背景图：background-image: url（文件）或者使用href src 都可以
background-repeat: no-repeat; 不平铺（平铺: 当这个图片小于框架时图片并排依次摆放直至框架摆满）
background-repeat-y: no-repeat; y轴不平铺
background-repeat-x: no-repeat; x轴不平铺
background-repeat: repeat; 平铺
background-position：左、右、上、下 修改图片位置 （center 50% 居中 ）
background-origin: padding-box 从边框开始 content-box 从内容区开始
（20）、输入框（input）标签的type属性：
text 普通文本输入框
password 密码输入框
number 数字输入框 min 最小值 max 最大值
image 设置图片按钮
radio 单选框 但是 name 要设置一样的值才能生效
checkbox 多选框
file 上传文件
下拉框：
下拉框
（21）、按钮（button）type属性：
button 普通按钮
submit 提交按钮
reset 重置按钮（刷新）
（22）、有序、无序、自定义列表：
有序：
ol 里面添加 li 默认为阿拉伯数字 type 属性可以设置排序显示方式 ： a 表示大写字母 i 表示大写罗马字符
无序：
ul 里面添加 li
自定义：
dl 里面添加 dt dd dt 是大标题 dd 大标题里面的小标题 无序里面可以无限嵌套无序
border：0 去除单元格边框
（23）、选择器优先级：
!important > 行内样式 > id选择器 > 类选择器、伪类选择器 > 标签选择器、伪选择器 > 通配符选择器、子选择器、包含选择器、相邻选择器
（24）、 怪异盒子：
box-sizing: border-box;
（25）、字体设置：
font-size: 数字 更改字体大小
font-weight: 数字 字体加粗 100-900
font-style: italic; 修改字体样式 italic 斜体字
text-decoration: line-through; 设置文本样式 underline 下划线 line-through 删 除线
text-align: left; 文字靠左
text-align: rijht; 文字靠右
text-align: center; 文字居中
text-indent: 数字em 首行缩进
letter-spacing:数字em 字间距
word-spacing: 数字em 词间距
font-family:宋体; 更改字体 想改成什么样的字体打什么字体但是你要下载相应的安装包
（26）、溢出隐藏：
overflow: hidden; 隐藏超出的部分
overflow: auto; 自适应添加滚轴 （智能的判断 自动添加横着的和或者时竖着的滚轮或者两者都添加）
overflow-y: auto; overflow-x: hidden; X轴Y轴添加滚轴 两者必须配合使用 （auto 自动 hidden 隐藏 y是增加竖着的滚轮 x是增加横着的滚轮）
（27）、精灵图：
background-position：
background-方向 ：度数 进行调整这样只能调整一个方向的位置其他方向同理
如果想要放大先写上 background-size: 放大几倍%; 然后进行位置的调整
（28）、设置鼠标样式：
cursor: default; （default默认） 默认的样式
cursor: pointer; （pointer手状） 手形状的鼠标样式
cursor: move; move移动 像十字形的样式
cursor: zoom-in; （zoom-in放大） 像放大镜一样中间有一个加号的形状
cursor: zoom-out; （zoom-out缩小） 在放大镜中有一个减号
cursor: no-drop; （no-drop不让删除，或者不让点击 ） 形状是一个红色的圆圈中间有一个红色的斜杠）
cursor: url(./img/cursor.png), auto; 必须添加auto 自定义自己加图片
（29）、设置元素的平移、旋转、缩放、倾斜(2D)：
平移（以自己的位置进行平移）：
transform: translate X轴 , Y轴; 也可以写成 transform: translateX(px) translateY(px); 也可以分开写 transform: translateY transform: translateX
旋转（默认固定点自身左上角）：
transform: rotate 数字 deg; deg角度
缩放（默认的固定点自己的中心点） ：
transform: scale 宽 , 高 也可以 transform: scale 通用数值 也可以 transform: scaleX transform: scaleY 正为放大 负为缩小
倾斜（默认固定点为自身中心点）：
transform: skew X轴 , Y轴 （一个值为X轴两个值为X轴Y轴）也可以 transform: skewX transform: skewY 单位deg
设置元素的转换基点
transform-origin：X轴 Y轴 必须写两个数值 用空格隔开 左上角为x轴y轴的交互点（0 0）
（30）、合并单元格边框线：
border-collapse: collapse;
（31）、label标签的for属性的作用：扩大表单元素的选中范围：
for的名字 必须和输入框的名字相同才能实现点击for元素时选中输入框
（32）、有符号或者空格就换行：
word-wrap: break-word; break-word 换行 有标点符号就进行换行，如果文本内有空格也会换行
（33）、自动换行：
word-wrap: normal; 自动换行 word-wrap 如果文本内有空格也会换行
（34）、文本溢出添加滚动条：
overflow: scroll
（35）、判断基本数据类型：
显示方式（typeof 变量） 返回的就是数据类型的英文名称
（36）、switch分支语句（用来判断某个变量是否等于（===）某个值）：
（37）、while 循环语句：
（38）、do while 循环
（39）、改变 this 指向：
可以自行调用的：
call(想要this指向谁，正常调用函数要传递的参数)
apply(想要this指向谁，正常调用函数要传递的参数但是必须要以数组的形式传递参数)
不会自行调用（返回的是一个新的函数）：
bind(想要this指向谁，正常调用函数要传递的参数)
（40）、节流和防抖：
节流：
作用：为了降低代码执行的频率
特征：固定时间内，多次操作，以首次操作为准
操作：设置一个变量为 true ，执行事件时先判断这个变量是否为 true，是就进去不是就跳过，进入后先将这个变量赋值为 false ,然后设置一个延时器等到时间后再从新赋值为 true
防抖：
作用：为了降低代码执行的频率
特征：多次操作，以最后一次为准（只执行一次）
操作：想创建一个变量接收下面的延时器，进去时先清除这个延时器，想要执行的代码写在这个延时器中这个延时器赋值给上面的变量
（41）、阴影：
text-shadow 文本阴影
text-shadow: w-shadow h-shadow blur color;
w-shadow：水平方向的距离 （必须有的：支持负值）
h-shadow：垂直方向的距离 （必须有的：支持负值）
blur：阴影的模糊程度，可选 （不支持负值）
color：阴影的颜色
第一个值(w-shadow)和第二个值(h-shadow)得位置不能互换；
当给同一个文字设置多个阴影的时候，阴影和阴影之间用逗号隔开
文本阴影实例
空心、阳文、阴文效果设置
空心、阳文、阴文效果展示
盒子阴影属性 box-shadow
语法：box-shadow:x-shadow y-shadow blur spread colorinset;
X-shadow 必需的。水平阴影的位置。允许负值 Y-shadow 必需的。垂直阴影的位置。 允许负值blur 可选。 模糊距离spread 可选。阴影的大小 。 允许负值color 可选。阴影的颜色。 inset 可选。从外层的阴影（开始时）改变阴影内侧阴影。默认情况下 ：以外阴影显示（outset）。注：当从外阴影变换成内阴影的时候，阴影位置是会发生对称变化。
外阴影效果展示
内阴影效果：在css效果里加上inset就可以了（在最后添加）
（42）、边框颜色
border-top-color属性：上边框颜色
border-bottom-color属性：下边框颜色
border-left-color属性：左边框颜色
border-right-color属性：右边框颜色
网友评论