目录
-
行内标签水平线不一致
问题: 同样的流式布局 高度一样 但是两者下水平线不对齐 解决:更改布局方式 浮动布局 向哪浮动 下水平线就会对齐 问题: 行内 或者 行内块级标签 设置元素的时候 横向并不会在同一个水平线上 解决: 两种形式 设置 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>
-
过渡(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>