HTML+CSS基础知识个人笔记_7

HTML+CSS基础知识个人笔记_7

  • 1. 显示与隐藏
  • 2. 土豆案例
  • 3. overflow
  • 4. cursor
  • 5. 轮廓线和防止文件域拖拽
  • 6. vertical-align
  • 7. 溢出文字省略号
  • 8. sprite的使用
  • 9. 微信滑动门

1. 显示与隐藏

display 不占坑
visibility 占坑




	
	01_显示与隐藏.html
	


	

123

2. 土豆案例

典型处理a .mask




	
	02_土豆.html
	


	
		
		

3. overflow

默认,溢出部分显示
overflow: visible;
溢出部分隐藏,不是删除
overflow: hidden;
滚动条,不管有没有超出,都显示滚动条
overflow: scroll;
在超出的时候,加滚动条,body 和 testarea 默认属性
overflow: auto;




	
	02_土豆.html
	


	

123qwdsfgfnsasvsdvfe

123qwdsfgfnsasvsdvfe

123qwdsfgfnsasvsdvfe

123qwdsfgfnsasvsdvfe

123qwdsfgfnsasvsdvfe

123qwdsfgfnsasvsdvfe

123qwdsfgfnsasvsdvfe

123qwdsfgfnsasvsdvfe

123qwdsfgfnsasvsdvfe

123qwdsfgfnsasvsdvfe

123qwdsfgfnsasvsdvfe

4. cursor

  • 我是小白
  • 我是小手
  • 我是移动
  • 我是文本
  • 5. 轮廓线和防止文件域拖拽

    /*取消轮廓线*/
    outline: none;
    /*防止文件域拖拽*/
    resize: none;
    
    

    6. vertical-align

    只针对行内或者行内块,一般是图片或表单和文字的对齐,不影响块级元素
    默认基线对齐,就算不加文字,也会有行高,就会有小空隙
    解决:换成block或者换成基线对齐以外的对齐方式

    
    
    
    	
    	06_vertical-align.html
    	
    
    
    	

    7. 溢出文字省略号

    1. 文字一行显示
    2. 溢出隐藏
    3. 文本溢出省略号
    
    
    
    	
    	07_溢出文字省略号.html
    	
    
    
    	
    		
  • 文本显示方式,默认自动换行文本显示方式,默认自动换行文本显示方式,默认自动换行
  • 8. sprite的使用

    本质,是为了减少对服务器的请求次数
    形式,将多张小 背景 图片合成一张大图片
    使用,计算好background-position

    
    
    
    	
    	08_精灵图使用.html
    	
    
    
    	

    9. 微信滑动门

    要理解透彻
    a套span

    
    
    
    	
    	09_微信滑动门.html
    	
    
    
    	
    
    
    

    HOME

    你可能感兴趣的:(CSS,HTML,WEB前端)