1.元素的显示与隐藏元素

1.display:none/block  不占有位置

2.visibility: hidden/visible 隐藏但占有位置

3.overflow: hidder/visible 超出盒子的部分隐藏

<div class="one"></div>
<div class="two"></div>
<div class="there">你好你好你好你好你好123
</div><!-- 案列 -->
<div class="box"><a href="#"><div class="mask"></div><img src="images/3.jpg" alt=""></a> 
</div> .one,.two {width: 200px;height: 200px;background-color: pink;}.one {/* display: none; */visibility: visible;background-color: skyblue;}.there {overflow: hidden;width: 50px;height: 50px;border: 1px solid red;}.box {position: relative;width: 222px;height: 220px;}.mask {display: none;position: absolute;width: 222px;height: 220px;background: rgba(0,0,0,.3) url(./images/arr.png) no-repeat center center;}/* 鼠标经过a的时候 a里面的mask显示出来 */.box a:hover .mask{display: block;}

 2.优化用户界面样式，提高用户体验

1.鼠标样式cousor

2.表单默认有轮廓线，清除轮廓线outline:none

3.防止文本域拖拽resize:none,主要是为了防止布局被破坏

<ul><li style="cursor: default;">默认的</li><li style="cursor: pointer">小手</li><li style="cursor: move">移动</li><li style="cursor: text">文本</li><li style="cursor: not-allowed">禁止</li>
</ul><input type="text"><textarea name="" id="" cols="30" rows="10"></textarea>textarea {/* 取消轮廓线 */outline: none;/* 添加边框 */border: 1px solid red;/* 防止拖拽 */resize: none;}

3.vertical-align垂直对齐，只有行内块和行内元素有效，块级元素无效

<div class="imgbox"><img src="./images/3.jpg" alt=""> pink你看撒</div><div class="img-boder-box"><img src="./images/3.jpg" alt=""></div> .imgbox img{/* 图片默认是基线对齐  文本含底线，基线，中线，顶线 */vertical-align: baseline;vertical-align: bottom;vertical-align: middle;}/* 图片底部会有空隙，因为图片是默认基线对齐vertical-align: baseline */.img-boder-box {border: 1px solid red;}.img-boder-box img {/* 去除图片底部空隙方法一,只要不是基线对齐都可以bottom.middle,top等等  *//* vertical-align: middle; *//* 去除图片底部空隙方法二,改为块级元素,因为vertical-align对块级元素无效 */display: block;}

 4.文字超出隐藏

 <div class="white"><!-- 你好-来自太阳的你<br>-欢迎你 -->你好-来自太阳的你-欢迎你</div>.white {width: 100px;height: 25px;border: 1px solid red;/*1. 强制在一行显示，除非遇到了<br> */white-space: nowrap;/* 2.超出隐藏 */overflow: hidden;/* 3.文本溢出用什么代替 clip裁切，ellipsis...显示 */text-overflow: ellipsis;}

 5.精灵图使用方式

1.首页选取图标大小2.在使用辅助线测出x y的距离  3。注意背景图默认是左上角对齐 需要移动的是背景图

精灵图制作ctrl+n 新建画布在拖拽到里面去，注意空隙一定要留多 方便后续扩展

<div class="all_box"></div>.all_box {width: 23px;height: 23px;/* 背景图默认是左上角对齐 */background: url(./images/index.png) no-repeat ;/* background-position: 0 -108px; */background-position: -157px -108px;margin-left: 100px;}

6.微信滑动门

 总结：

  1. a 设置 背景左侧，padding撑开合适宽度。    

  2. span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。

  3. 之所以a包含span就是因为 整个导航都是可以点击的。

 <ul class="slider"><li><a href="#"><span>首页</span></a></li><li><a href="#"><span>帮助与反馈</span></a></li><li><a href="#"><span>公众号</span></a></li><li><a href="#"><span>公众平台</span></a></li></ul>/* 滑动门 */li {list-style: none;text-decoration: none;} .slider {height: 200px;background: url(./images/wx.jpg);}.slider li{float: left;margin: 20px 5px;}.slider a {display: inline-block; height: 33px;line-height: 33px;font-size: 16px;/* 这二个padding设置很关键 */padding-left: 15px;color: #fff;background: url(./images/to.png) no-repeat;}.slider span {display: inline-block; padding-right: 15px;height: 33px;line-height: 33px;background: url(./images/to.png) no-repeat right;}.slider li:hover a,.slider li:hover span {background-image:url(./images/ao.png);}

7.margin 负值之美

1). 负边距+定位：水平垂直居中

2). 压住盒子相邻边框---淘宝案例

<div class="taobao_father"><div class="taobao"></div><div class="taobao"></div><div class="taobao"></div></div>.taobao_father {width: 500px;}.taobao {/*浮动的盒子是紧贴在一起的*//* position: relative; */float: left;width: 200px;height: 300px;border: 1px solid #ccc;/*消除边框重合得问题  */margin-left: -1px;margin-top: -1px;}.taobao:hover {border: 1px solid red;/*需要当前点击得盒子升到最高，1.定位得盒子比标准流得盒子高 方法2.给taobao盒子加position: relative;通过控制z-index来控制层级 */position: relative;/* z-index: 1; */}

8.css 三角之美--京东案例

<div class="taobao_triangle"></div><p></p><div class="jindong_triangle"><p></p></div>.taobao_triangle {/*我们用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;}p {width: 0;height: 0;border-style: solid;border-width: 10px;border-color:  transparent transparent transparent red;font-size: 0;line-height: 0;}.jindong_triangle {position: relative;width: 200px;height: 100px;background-color: pink;}.jindong_triangle p {position: absolute;top: -40px;left: 50%;margin-left: -20px;width: 0;height: 0;border-style: solid;border-width: 20px;border-color:  transparent transparent red transparent ;}