网页设计 div

css

/ 基础样式 /

div {

width: 80%; / 宽度 /

margin: 0 auto; / 水平居中 /

padding: 20px; / 内边距 /

background: f0f0f0;

border: 1px solid ccc;

/ 高级布局 /

flex-container {

display: flex; / 弹性布局 /

gap: 10px; / 元素间距 /

grid-container {

display: grid; / 网格布局 /

grid-template-columns: 1fr 2fr;

3. 常见布局案例

案例 1：水平居中 + 阴影效果

html

css

centered-box {

width: 60%;

margin: 50px auto;

padding: 30px;

box-shadow: 0 2px 10px rgba(0,0,0,0.1);

案例 2：两栏布局

html

css

two-column {

display: flex;

sidebar { width: 25%; }

main-content { width: 75%; }

案例 3：响应式卡片

html

css

card {

width: 300px;

border-radius: 8px;

overflow: hidden;

transition: transform 0.3s;

card:hover {

transform: translateY(-5px);

4. 关键技巧

css

@media (max-width: 768px) {

two-column { flex-direction: column; }

sidebar, .main-content { width: 100%; }

5. 常见问题解决

css

/ 清除浮动 /

clearfix::after {

content: "";

display: table;

clear: both;

/ 内容溢出处理 /

scrollable-div {

overflow-y: auto;

max-height: 400px;

/ 垂直居中 /

vertical-center {

display: flex;

align-items: center;

justify-content: center;

height: 300px;

合理使用 `