HTML——问题(行内标签水平线不一致)+过渡(CSS)

目录

  1. 行内标签水平线不一致
  2. 过渡(CSS)

 

  1. 行内标签水平线不一致


    问题:
    	同样的流式布局 高度一样 但是两者下水平线不对齐
    		解决:更改布局方式 浮动布局 向哪浮动 下水平线就会对齐
    	
    问题:
    	行内 或者 行内块级标签 设置元素的时候 横向并不会在同一个水平线上
    	解决:
    		两种形式
    			设置 vertical-align: middle; 上下基准线对齐
    			还有一个是设置float 悬浮 
    				从左向右走的  基准线在上方
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			div{
    				background-color: palegoldenrod;
    				height: 30px;
    			}
    			input{
    				height: 24px;
    			}
    			button{
    				/* 默认是怪异盒子模型 */
    				height: 25px;
    				box-sizing: content-box;
    				vertical-align: middle;
    			}
    			
    		</style>
    	</head>
    	<body>
    		<div>
    			<input type="text" /><button>提交</button>
    		</div>
    		
    	</body>
    </html>
    

     

  2. 过渡(CSS)


    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			div{
    				width: 200px;
    				height: 200px;
    				background-color: palevioletred;
    				/* 添加过渡属性 
    				发生过渡的属性名   如果有多个属性 可以赋值为all(所有都有过渡)
    				过渡需要的时间 单位是s秒
    				过渡渐变过程中的变化轨迹 默认ease由慢到快
    						linear 线性变化
    				*/
    				/* transition:background-color 2s linear; */
    				transition:all 2s linear;
    			}
    			
    			/* 需求鼠标悬浮在div上的时候 更改背景颜色 */
    			div:hover{
    				background-color: darkcyan;
    				transform: rotate(360deg);
    			}
    		</style>
    	</head>
    	<body>
    		<div>过渡</div>
    	</body>
    </html>
    

     

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值