前端css第四部分总结-高级技巧

前端css第四部分总结-高级技巧

1. 元素的显示与隐藏–display(显示)——{ display：none； 隐藏——隐藏后不保留位置。
   display：block；显示 }
   –visibility（可见性）——{ visibility：hidden；隐藏——隐藏后人保留位置。
   visibility：visible；显示 }
   –overflow（溢出）——{ 1.常见属性为hidden，隐藏溢出。 2.可以清除浮动。}

2. css用户界面样式–鼠标样式cursor{ 小手：pointer； 移动：move； 文本：text； 默认：defult； 禁止：not-allowed； }
   –清除轮廓线：outline：none；
   –防止文本域拖拽：resize：none；

3. vertical-align（垂直对齐）——{–针对于行内元素或者行内块元素，通常用来控制图片/表单与文字的对齐-vertical-align：top；顶对齐。 -vertical-align：middle；中线对齐。-vertical-align：baseline；基线对齐，会产生缝隙。 -vertical-align：bottom；
   —— --去除图片底侧空白缝隙–@1给img vertical-align：middle|top|bottom等等。@2让图片不要和基线对齐。@3给img添加display：block；转换为块级元素。

}
4. 溢出的文字省略好显示，三步走——@1.先强制一行内显示文本 white-space：nowrap；
@2.超出的部分隐藏overflow：hidden；
@3.文字用省略号替代超出的部分 text-overflow：ellipsis；

5.css精灵技术——@1.精确测量，每个小背景图片的大小和位置。
@2.给盒子指定小背景图片时，背景定位基本都是负值。

6.滑动门——给a标签里面包span，利用精灵图技术让a管左门，span管右门，使用padding 撑开盒子，实现推拉门技术。

7.margin负值——@1.实现定位盒子居中。
@2.覆盖相邻盒子边框，实现细线盒子。

8.制作三角形——@1.我们用css边框可以制作三角形效果
@2.宽度高度为0
@3.我们4个边框都要写，只保留需要的边框颜色，其余的不能省略，都改为transparent透明就好了。
@4.为了照顾兼容性低版本的浏览器，加上font-size：0；line-height：0；