CSS dey7

120 阅读2分钟

1.元素的显示和隐藏

  • 目的:让一个元素在页面中消失,但是不在文档源码中删除
  • 场景:是网站广告,当我们点击类似关闭不见了,但是我们重新刷新页面,会重新出现!

1.1display显示(重点)

  • display设置或检索对象是否及如何显示

图片.png

  • 特点:隐藏之后,不再保留位置

图片.png

1.2visibility可见性(了解)

  • 设置或检索是否显示对象

图片.png

  • 特点:隐藏之后,继续保留原有位置(停职留薪)

图片.png

1.3overflow溢出(重点)

  • 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容

图片.png 图片.png

1.4显示与隐藏总结

图片.png

2.CSS用户界面样式

  • 所谓的界面样式,就是更改一些用户操作样式
  1. 更改用户的鼠标样式
  2. 表单轮廓等
  3. 防止表单域拖拽

2.1 鼠标样式cursor

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

图片.png 鼠标放我身上查看效果效果:

图片.png

2.2轮廓线outline

图片.png

2.3防止拖拽文本域resize

图片.png

2.4 用户界面样式总结

图片.png

3.vertical-align垂直对齐

  • 有宽度的块级元素居中对齐,是margin:0 auto;
  • 让文字居中对齐,是text-align:center;

图片.png

  • 注意:
  1. vertical-align不影响块级元素中的内容对齐,它只针对行内元素或者行内块元素
  2. 特别是行内块元素,通常用来控制图片/表单与文字对齐

图片.png

3.2去除图片底侧空白缝隙

图片.png

  • 原因: 图片或者表单等行内块元素,他的底线和父级会和父级盒子的基线对齐。就是图片底侧会有一个空白缝隙

  • 解决的方法就是:

图片.png

图片.png

4.溢出的文字省略号显示

4.1white-space

  • white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容

图片.png

4.2text-overflow文字溢出

  • 设置或检索是否使用一个省略标记(...)标示对象内文本的溢出

图片.png 一定要首先强制一行内显示,再次和overflow属性,搭配使用

图片.png

4.3总结三部曲

图片.png