[前端] CSS 常用样式（聊天界面 / 网页布局专用）

一、布局最常用（必背）

复制代码

/* 弹性布局（做左右分栏、上下排列神器） */
display: flex;

/* 水平居中 */
justify-content: center;

/* 垂直居中 */
align-items: center;

/* 子元素自动换行 */
flex-wrap: wrap;

/* 占满剩余空间 */
flex: 1;

二、尺寸与背景

复制代码

/* 宽高 */
width: 100px;
height: 100px;

/* 宽度/高度占满父元素 */
width: 100%;
height: 100%;

/* 背景色 */
background-color: #fff;
background-color: rgb(255,255,255);

/* 背景图片 */
background-image: url(图片路径);
background-size: cover;  /* 铺满 */

三、边框与圆角（聊天框必备）

复制代码

/* 边框 */
border: 1px solid #ccc;

/* 圆角（聊天气泡、按钮必用） */
border-radius: 5px;
border-radius: 50%;  /* 圆形 */

/* 单独圆角 */
border-top-left-radius: 5px;
border-bottom-right-radius: 5px;

四、边距（控制间距）

复制代码

/* 外间距：元素和别人的距离 */
margin: 10px;
margin-top: 10px;
margin-left: 10px;

/* 内间距：内容和边框的距离 */
padding: 10px;
padding-top: 10px;

五、文字样式

复制代码

/* 字体大小 */
font-size: 14px;

/* 文字颜色 */
color: #333;

/* 文字加粗 */
font-weight: bold;

/* 文字水平居中 */
text-align: center;

/* 文字超出隐藏 */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

六、定位（悬浮、置顶、固定按钮）

复制代码

/* 相对定位（父元素用） */
position: relative;

/* 绝对定位（子元素悬浮用） */
position: absolute;
top: 0;
left: 0;

/* 固定在屏幕上（不随滚动动） */
position: fixed;

七、显示/隐藏 + 滚动

复制代码

/* 隐藏元素 */
display: none;

/* 显示元素 */
display: block;

/* 出现滚动条 */
overflow: auto;
overflow-y: auto;  /* 仅垂直滚动（聊天记录必备） */

八、阴影（美化聊天框、卡片）

复制代码

/* 盒子阴影（悬浮、卡片质感） */
box-shadow: 0 0 5px rgba(0,0,0,0.2);

组合样式

1. 聊天窗口整体布局（你现在的布局）

复制代码

.main {
    display: flex;
    width: 1000px;
    height: 700px;
    background: #eee;
    border-radius: 5px;
}
.left {
    width: 280px;
    background: #2e3238;
}
.right {
    flex: 1;
    padding: 20px;
}

2. 聊天消息气泡

复制代码

.message {
    max-width: 70%;
    padding: 8px 12px;
    border-radius: 10px;
    margin: 5px 0;
}
.my-message {
    background: #07c160; /* 绿色 */
    color: white;
    margin-left: auto;
}
.other-message {
    background: white;
    color: #333;
}