高级技巧

元素的显示与隐藏

display 显示

/* 隐藏对象 */
display: none
  • 特点: 隐藏之后,不再保留位置。

配合后面js做特效,比如下拉菜单,原先没有,鼠标经过,显示下拉菜单, 应用极为广泛

visibility 可见性

/* 对象可视 */
visibility:visible ;  
/* 对象隐藏 */
visibility:hidden;
  • 特点: 隐藏之后,继续保留原有位置。

overflow 溢出

  • 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容
属性值 描述
visible 不剪切内容也不添加滚动条
hidden 不显示超过对象尺寸的内容,超出的部分隐藏掉
scroll 不管超出内容否,总是显示滚动条
auto 超出自动显示滚动条,不超出不显示滚动条

应用:

  1. 清除浮动
  2. 隐藏超出内容,隐藏掉, 不允许内容超过父盒子。

总结

属性 区别 用途
display 隐藏对象,不保留位置 配合后面js做特效,比如下拉菜单,原先没有,鼠标经过,显示下拉菜单, 应用极为广泛
visibility 隐藏对象,保留位置 使用较少
overflow 只是隐藏超出大小的部分 1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围

CSS用户界面样式

鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状

a:hover {
    cursor: value;
}
属性值 描述
default 小白 默认
pointer 小手
move 移动
text 文本
not-allowed 禁止

轮廓线 outline

outline : outline-color ||outline-style || outline-width
outline : outline-color ||outline-style || outline-width

一般都直接去掉:

outline: 0;
outline: none;

防止拖拽文本域resize

<textarea  style="resize: none;"></textarea>

vertical-align 垂直对齐

vertical-align : baseline |top |middle |bottom

vertical-align 不影响块级元素中的内容对齐,它只针对于 行内元素 或者 行内块元素

行内块元素, 通常用来控制图片/表单与文字的对齐

图片、表单和文字对齐

1498467742995

去除图片底侧空白缝隙

图片或者表单等行内块元素,他的底线会和父级盒子的基线对齐

  • 给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐
  • 给img 添加 display:block; 转换为块级元素就不会存在问题了

溢出的文字省略号显示

/*1. 先强制一行内显示文本*/
    white-space: nowrap;
/*2. 超出的部分隐藏*/
    overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
    text-overflow: ellipsis;

CSS精灵技术(sprite)

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图)

滑动门

扩展

margin负值

  • 负边距+定位:水平垂直居中
  • 压住盒子相邻边框
    • 需要添加浮动

CSS三角

  • 将盒子宽高设置为0,然后设置四个边框
div {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 20px;
            border-color: pink skyblue deepskyblue darkcyan;
}
MY all right reserved,powered by Gitbook 该页面最后修改于: 2020-02-14 17:12:04 本页字数: 1782

results matching " "

No results matching " "

results matching " "

No results matching " "