一、垂直对齐
1.垂直对齐案例1(input和input)
<!DOCTYPE html> <!-- 垂直对齐方式 属性名: vertical-align 属性值: 属性值 效果 baseline 默认，基线对齐 top 顶部对齐 middle 中部对齐 bottom 底部对齐 --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 浏览器遇到行内和行内块标签当做文字处理，默认文字是按基线对象 */ input { height: 50px; box-sizing: border-box; vertical-align: middle; } </style> </head> <body> <input type="text"><input type="button" value="搜索"> </body> </html>
2.垂直对齐案例2（图片和input）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img { vertical-align: middle; } </style> </head> <body> <img src="code.png" alt=""><input type="text"> </body> </html>
3.垂直对齐案例3(子input父控件留边)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father { width: 400px; height: 400px; background-color: pink; } input { /* vertical-align: middle; */ vertical-align: top; } </style> </head> <body> <div class="father"> <input type="text"> </div> </body> </html>
4.垂直对齐案例4（子图片父控件留边）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father { width: 800px; background-color: pink; } img { /* 浏览器把行内和行内块标签当做文字处理,默认基线对齐 */ /* vertical-align: middle; */ display: block; } </style> </head> <body> <div class="father"> <img src="code.png" alt=""> </div> </body> </html>
5.垂直对齐案例5(子img居中)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father { width: 600px; height: 600px; background-color: pink; line-height: 600px; text-align: center; } img { width: 100px; height: 100px; vertical-align: middle; } </style> </head> <body> <div class="father"> <img src="code.png" alt=""> </div> </body> </html>
二、光标类型
<!DOCTYPE html> <!-- 光标类型 场景：设置鼠标光标在元素上时显示的样式 属性名：cursor 常见属性值： 属性值 效果 default 默认值，通常是箭头 pointer 小手效果，提示用户可以点击 text 工字型，提示用户可以选择文字 move 十字光标，提示用户可以移动 --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 200px; height: 200px; background-color: pink; cursor: pointer; } </style> </head> <body> <div>div</div> </body> </html>
三、圆角边框
1.圆角边框
<!DOCTYPE html> <!-- 边框圆角 场景：让盒子四个角变得圆润，增加页面细节，提升用户体验 属性名：border-radius 常见取值：数字 + px 、百分比 赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！ --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 200px; height: 200px; background-color: pink; /* 一个值: 表示4个角是相同的 */ /* border-radius: 10px; */ /* 4值: 左上 右上 右下 左下 -- 从左上顺时针转一圈 */ /* border-radius: 10px 20px 40px 80px; */ /* border-radius: 10px 40px 80px; */ border-radius: 10px 80px; } </style> </head> <body> <div class="box"></div> </body> </html>
2.圆形、胶囊形
<!DOCTYPE html> <!-- 边框圆角的常见应用 画一个正圆： 盒子必须是正方形 设置边框圆角为盒子宽高的一半 → border-radius:50% 胶囊按钮： 盒子要求是长方形 设置 → border-radius: 盒子高度的一半 --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .one{ width: 200px; height: 200px; background-color: pink; /* border-radius: 100px; */ border-radius: 50%; } /* 长方形 角度是高度的一半 */ .two{ width: 400px; height: 200px; background-color: skyblue; border-radius: 100px; } </style> </head> <body> <div class="one"></div> <div class="two"></div> </body> </html>
四、overflow
<!DOCTYPE html> <!-- 溢出部分显示效果 溢出部分：指的是盒子 内容部分 所超出盒子范围的区域 场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条…… 属性名：overflow 常见属性值： 属性值 效果 visible 默认值，溢出部分可见 hidden 溢出部分隐藏 scroll 无论是否溢出，都显示滚动条 auto 根据是否溢出，自动显示或隐藏滚动条 --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 200px; height: 200px; background-color: pink; /* 溢出隐藏 */ overflow: hidden; /* 滚动:无论是否溢出，都显示滚动条 */ /* overflow: scroll; */ /* 根据是否溢出，自动显示或隐藏滚动条 */ /* overflow: auto; */ } </style> </head> <body> <div class="box">我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子我是盒子</div> </body> </html>
五、元素隐藏
1.元素隐藏
<!DOCTYPE html> <!-- 元素本身隐藏 场景：让某元素本身在屏幕中不可见。如：鼠标:hover 之后元素隐藏 常见属性： visibility: hidden display: none --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 200px; height: 200px; } .one{ /* 占位置 */ /* visibility: hidden; */ /* 不占位置 */ display: none; background-color: pink; } .two{ background-color: skyblue; } </style> </head> <body> <div class="one">one</div> <div class="two">two</div> </body> </html>
2.案例二维码隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } .container{ height: 40px; /* background-color: pink; */ border:1px solid grey; } ul{ list-style: none; border-collapse: collapse; } li{ float: left; margin: 0 auto; border-right: 1px solid grey; } li:last-child{ border-right:0; } a{ position: relative; color: darkgrey; text-decoration: none; height: 40px; line-height: 40px; padding: 0 30px; display: inline-block; } img{ position: absolute; left: 50%; transform: translate(-50%); top:40px; display: none; width: 50px; height: 50px; } /* 鼠标悬停a 显示二维码 */ .container li a:hover img{ display: block; } </style> </head> <body> <div class="container"> <ul> <li><a href="">我要投资</a></li> <li><a href="">平台介绍</a></li> <li><a href="">新手专区</a></li> <!-- 因为用户鼠标放在二维码图片上也能跳转，所以img也是在a的范围内，因此把img写在a标签内部 --> <li><a href="">手机微金锁 <img src="code.png" alt=""></a></li> <li><a href="">个人中心</a></li> </ul> </div> </body> </html>
六、元素透明度
<!DOCTYPE html> <!-- （拓展）元素整体透明度 场景：让某元素整体（包括内容）一起变透明 属性名：opacity 属性值：0~1 之间的数字 ・1：表示完全不透明 ・0：表示完全透明 --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 400px; height: 400px; background-color: green; opacity: 0.5; } img{ width: 200px; height: 200px; } </style> </head> <body> <div> <img src="code.png" alt=""> 文字也是透明 </div> </body> </html>
