CSS 常用样式
height 设置高度
<!-- height: 48px 指定高度：分辨率、 200px 指定宽度：分辨率 --> <div style="height: 48px; 200px;border: 1px solid red;"> xxx </div>
width 设置宽度
<!-- 80%; 指定宽度：分辨率 可设置百分号，按照屏幕比例设置百分比 --> <div style="height: 48px; 80%;border: 1px solid red;"> xxx </div>
font-size 修改字体大小
<!-- font-size: 17px; 修改字体大小 --> <div style="height: 48px; 80%;border: 1px solid red;font-size: 17px;"> xxx </div>
text-align 内容水平方向左右居中
<!-- text-align: center; 内容水平方向左右居中 --> <div style="height: 48px; 80%; border: 1px solid red; font-size: 17px; text-align: center;"> xxx </div>
vertical-align 内容垂直方向居中
<!-- vertical-align: middle; 内容垂直方向居中，对某些标签有限制不生效 --> <div style="height: 48px; 80%; border: 1px solid red; font-size: 17px; text-align: center; vertical-align: middle;"> xxx </div>
line-height 跳转到指定像素位置
<!-- line-height: 48px; 跳转到指定48像素中间的位置 --> <div style="height: 48px; 80%; border: 1px solid red; font-size: 17px; text-align: center; line-height: 48px;"> xxx </div>
font-weight 设置字符样式
<!-- font-weight: bold; 加粗指定字符 --> <div style="height: 48px; 80%; border: 1px solid red; font-size: 17px; text-align: center; line-height: 48px; font-weight: bold;"> xxx </div>
background-color 设置背景色颜色
<!-- background-color: black; 设置背景色为黑色 --> <div style="height: 48px; 80%; background-color: black"> xxx </div>
color 设置字体颜色
<!-- color: red; 设置字体色为红色 --> <div style="height: 48px; 80%; color: red"> xxx </div>
opacity 设置透明度
<!-- opacity: 0.5; 设置透明度 0.5代表50%。--> <div style="height: 48px; 80%; background-color: black; opacity: 0.5;"> xxx </div>
z-index 设置层级顺序、哪个值大哪个在上层
<body> <!-- 添加三层层样式 --> <div style=" /* z-index: 10; 设置层级顺序为最大 */ z-index: 10; /* position: fixed; 添加占用页面位置 */ position: fixed;top: 50%;left: 50%; /* 根据三层框自定义移动位置 使其在中间 */ margin-left: -250px;margin-top: -200px; /* 设置背景为白色长宽400，500像素的样式 */ background-color: white;height: 400px; 500px; ;"></div> <!-- 添加二层层样式 --> <div style=" /* z-index: 9; 设置层级顺序为二层 */ z-index: 9; /* position: fixed; 添加占用页面位置 */ position: fixed; /* 设置背景颜色，并设置长度0为全部覆盖 */ background: black;top: 0;bottom: 0;right: 0;left: 0; /* 设置透明度 */ opacity: 0.5; "></div> <!-- style 设置属性、height:48px 设置背景分辨率、background-color: green(绿) 修改背景颜色、 --> <div style="height: 5000px;background-color: green;"> xxxxxx </div> </body> </html>