CSS 常用样式

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>

position 多层案例