元素的显示和隐藏（重点记住）

• 隐藏：display:none;
• 显示：display:block; 将隐藏的元素显示出来
一般情况下我们显示和隐藏配合定位属性实现一些列的小效果
让元素visibility显示与隐藏（了解）
占位隐藏：visibility:hidden; 盒子隐藏之后原来的位置还是在的；
overflow溢出隐藏

取值不同表示意思不一样
overflow:hideen; 溢出隐藏，将超出固定宽高范围内的内容隐藏起来，不是删除了；
overflow:scroll; 显示横向和竖向的滚动条显示（不用）；
overflow:auto;溢出滚动， 将超出固定宽高范围的内容以滚动条的形式显示（不用）；
overflow:hideen;的常用技巧（重点）

01 overflow:hideen;可以让超出固定范围的内容隐藏掉；
02 overflow:hideen;可以清除浮动，布局的时候我们做左右或者左中右布局，都是父级嵌套子级盒子，然后将子级盒子浮动，但是如果没有给父级添加固定的高度，子级浮动以后父级的高度为0，不占位，会影响后面的布局，就给父级添加overflow:hideen;来解决；
03 overflow:hideen; 嵌套的父子级盒子出现外边距塌陷问题，两个嵌套的盒子，都没有浮动或者定位，给子级盒子添加了margin-top就会出现父级跟着掉下来的塌陷问题，就给父级添加overflow:hideen;来解决；
用户界面-鼠标样式鼠标样式：cursor

小白（默认） cursor:default;
小手： cursor:pointer;  常用一般是用在一些提示要点击的样式，不能跳转的时候；
移动： cursor:move;
文本： cursor:text;
禁止： cursor:not-allowed;
取消表单默认的蓝色交互框（记住）

表单元素默认选中的时候会有一个蓝色的边框，各个浏览器设置是不一样的，所以我们在开发过程中直接去掉就可以，代码如下：
outline:none;
防止拖拽文本域textarea

Textarea 文本域默认有轮廓线也可以统统outline:none;取消，同时还存在右下角拖拽放大，我们一般不允许，需要设置不能拖拽，可以通过去除图片底侧空白缝隙进行设置；
vertical实现图片和文字垂直对齐

• vertical-align:middle; 让行内元素、行内块元素垂直居中；
• 常见的行内元素：a、span
• 常见的行内块元素：img
  

注意：line-height 只能让文字垂直居中；
处理行内元素或者行内块元素和文字给父级添加line-height后不垂直居中的问题；
去除图片底侧空白缝隙

Html中插入图片的时候由于默认是基线对齐，会出现底部留白的效果，解决方案如下：
01 直接给图片添加img{vertical-align:middle/top;}属性实现基线对齐；
02 直接将图片的显示模式更改为块级元素img{display:block;}
注意：如果将img转化为块会出现一些问题，所以我们建议大家使用第一种
溢出的文字省略号显示

必须是单行文显示
white-space:normal; 默认处理，文字一行显示不下就折行显示；
white-space:nowrap; 强制一行显示，文字一行显示不小就强制显示，要配合overflow:hidden; 使用，然后想要出现省略好配合下面属性：
text-overflow:clip; 不显示省略号，直接裁剪；
text-overflow:ellipsis; 隐藏的内容以省略号显示；

步骤（重要常用记住）：

01 设置强制一行显示white-space:nowrap;

02 将强制一行显示后溢出固定盒子宽度的内容隐藏overflow:hidden;

03 将隐藏的内容用省略号显示text-overflow:ellipsis;


CSS精灵技术

好处

• 使用css精灵技术可以减少对服务器的请求次数；
• 可以将多个小图标合并成一张图片，成为css精灵图或者css雪碧图；
Css精灵图的技术核心：

利用北京图片定位设置X轴（水平方向）和Y轴（垂直方向）的位置；
background-position: X轴   Y轴;
复合写法：background:背景颜色 url（背景图片路径） 是否平铺 X轴 Y轴；
使用精灵图的重要步骤：

第一步，精确测量盒子的宽高和在X轴，Y轴的位置
第二步，然后设置图片定位的X轴和Y轴的位置；
滑动门原理

• 一个父级盒子（必须设置为行内块元素display:inline-block）嵌套一个子级盒子，父级盒子放左侧的圆角，子级盒子放右侧圆角，装内容；
• 设置父级盒子的背景图片，设置图片的左对齐默认即可；
    background: url(images/to.png) no-repeat;
• 盒子的宽度是内容撑开的，需要给父级盒子和子级添加padding-left和padding-right；
• 子级盒子盛放内容，然后设置子级盒子的背景图片，设置图片右对齐；
    background: url(images/to.png) no-repeat top right;
一句话总结：一个a标签嵌套一个span标签，span里面放文字，a要转换为display:inline-block；设置固定的高度：
      01 给a设置背景图片和距离左侧的间距；

Margin区负值

margin可以取负值，一般设置-1px可以设置描边的叠加；


Css实现三角效果

01 设置一个盒子的宽高都为0
02 每一个边都要写不能省略
03 将不现实的边设置为transparent
div {
/*我们用css 边框可以模拟三角效果*/
width: 0; height: 0;
border-top: 10px solid red;
border-right: 10px solid green;
border-bottom: 10px solid blue;
border-left: 10px solid pink;
}
div {
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 10px;
     border-color: transparent transparent transparent red;
     font-size: 0;
     line-height: 0;
}
border-color: 上   右    下   左;不显示的区域透明，需要显示区域设置颜色，箭头的方向和方位英文相反；
上箭头：border-color:transparent transparent red transparent;
右箭头：border-color:transparent transparent transparent red;
下箭头：border-color:red transparent transparent transparent;
左箭头：border-color:transparent red transparent transparent;

元素的显示和隐藏（重点记住）

• 隐藏：display:none;
• 显示：display:block; 将隐藏的元素显示出来
一般情况下我们显示和隐藏配合定位属性实现一些列的小效果
让元素visibility显示与隐藏（了解）
占位隐藏：visibility:hidden; 盒子隐藏之后原来的位置还是在的；
overflow溢出隐藏

取值不同表示意思不一样
overflow:hideen; 溢出隐藏，将超出固定宽高范围内的内容隐藏起来，不是删除了；
overflow:scroll; 显示横向和竖向的滚动条显示（不用）；
overflow:auto;溢出滚动， 将超出固定宽高范围的内容以滚动条的形式显示（不用）；
overflow:hideen;的常用技巧（重点）

01 overflow:hideen;可以让超出固定范围的内容隐藏掉；
02 overflow:hideen;可以清除浮动，布局的时候我们做左右或者左中右布局，都是父级嵌套子级盒子，然后将子级盒子浮动，但是如果没有给父级添加固定的高度，子级浮动以后父级的高度为0，不占位，会影响后面的布局，就给父级添加overflow:hideen;来解决；
03 overflow:hideen; 嵌套的父子级盒子出现外边距塌陷问题，两个嵌套的盒子，都没有浮动或者定位，给子级盒子添加了margin-top就会出现父级跟着掉下来的塌陷问题，就给父级添加overflow:hideen;来解决；
用户界面-鼠标样式鼠标样式：cursor

小白（默认） cursor:default;
小手： cursor:pointer;  常用一般是用在一些提示要点击的样式，不能跳转的时候；
移动： cursor:move;
文本： cursor:text;
禁止： cursor:not-allowed;
取消表单默认的蓝色交互框（记住）

表单元素默认选中的时候会有一个蓝色的边框，各个浏览器设置是不一样的，所以我们在开发过程中直接去掉就可以，代码如下：
outline:none;
防止拖拽文本域textarea

Textarea 文本域默认有轮廓线也可以统统outline:none;取消，同时还存在右下角拖拽放大，我们一般不允许，需要设置不能拖拽，可以通过去除图片底侧空白缝隙进行设置；
vertical实现图片和文字垂直对齐

• vertical-align:middle; 让行内元素、行内块元素垂直居中；
• 常见的行内元素：a、span
• 常见的行内块元素：img
  

注意：line-height 只能让文字垂直居中；
处理行内元素或者行内块元素和文字给父级添加line-height后不垂直居中的问题；
去除图片底侧空白缝隙

Html中插入图片的时候由于默认是基线对齐，会出现底部留白的效果，解决方案如下：
01 直接给图片添加img{vertical-align:middle/top;}属性实现基线对齐；
02 直接将图片的显示模式更改为块级元素img{display:block;}
注意：如果将img转化为块会出现一些问题，所以我们建议大家使用第一种
溢出的文字省略号显示

必须是单行文显示
white-space:normal; 默认处理，文字一行显示不下就折行显示；
white-space:nowrap; 强制一行显示，文字一行显示不小就强制显示，要配合overflow:hidden; 使用，然后想要出现省略好配合下面属性：
text-overflow:clip; 不显示省略号，直接裁剪；
text-overflow:ellipsis; 隐藏的内容以省略号显示；

步骤（重要常用记住）：

01 设置强制一行显示white-space:nowrap;

02 将强制一行显示后溢出固定盒子宽度的内容隐藏overflow:hidden;

03 将隐藏的内容用省略号显示text-overflow:ellipsis;


CSS精灵技术

好处

• 使用css精灵技术可以减少对服务器的请求次数；
• 可以将多个小图标合并成一张图片，成为css精灵图或者css雪碧图；
Css精灵图的技术核心：

利用北京图片定位设置X轴（水平方向）和Y轴（垂直方向）的位置；
background-position: X轴   Y轴;
复合写法：background:背景颜色 url（背景图片路径） 是否平铺 X轴 Y轴；
使用精灵图的重要步骤：

第一步，精确测量盒子的宽高和在X轴，Y轴的位置
第二步，然后设置图片定位的X轴和Y轴的位置；
滑动门原理

• 一个父级盒子（必须设置为行内块元素display:inline-block）嵌套一个子级盒子，父级盒子放左侧的圆角，子级盒子放右侧圆角，装内容；
• 设置父级盒子的背景图片，设置图片的左对齐默认即可；
    background: url(images/to.png) no-repeat;
• 盒子的宽度是内容撑开的，需要给父级盒子和子级添加padding-left和padding-right；
• 子级盒子盛放内容，然后设置子级盒子的背景图片，设置图片右对齐；
    background: url(images/to.png) no-repeat top right;
一句话总结：一个a标签嵌套一个span标签，span里面放文字，a要转换为display:inline-block；设置固定的高度：
      01 给a设置背景图片和距离左侧的间距；

Margin区负值

margin可以取负值，一般设置-1px可以设置描边的叠加；


Css实现三角效果

01 设置一个盒子的宽高都为0
02 每一个边都要写不能省略
03 将不现实的边设置为transparent
div {
/*我们用css 边框可以模拟三角效果*/
width: 0; height: 0;
border-top: 10px solid red;
border-right: 10px solid green;
border-bottom: 10px solid blue;
border-left: 10px solid pink;
}
div {
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 10px;
     border-color: transparent transparent transparent red;
     font-size: 0;
     line-height: 0;
}
border-color: 上   右    下   左;不显示的区域透明，需要显示区域设置颜色，箭头的方向和方位英文相反；
上箭头：border-color:transparent transparent red transparent;
右箭头：border-color:transparent transparent transparent red;
下箭头：border-color:red transparent transparent transparent;
左箭头：border-color:transparent red transparent transparent;