常用的 CSS 属性和布局技巧

常用 CSS 属性：

1. 盒子模型

width、height：设置盒子的宽度和高度。
padding：内边距，指定盒子内容与边框之间的空间。
margin：外边距，指定盒子与周围元素之间的空间。
border：边框，指定盒子的边框样式、颜色和宽度。

2. 定位与布局

position：指定元素的定位方式，常见取值有 `relative`、`absolute`、`fixed`。
display：指定元素的显示方式，常见取值有 `block`、`inline`、`inline-block`、`flex`、`grid`。
float：指定元素的浮动方式，常用于实现多列布局。
top、right、bottom、left：用于绝对定位元素的位置调整。

3. 文字样式

color：文字颜色。
font-size、font-family：文字大小和字体。
text-align：文字水平对齐方式。
line-height：文字行高。

4. 背景

background-color：背景颜色。
background-image：背景图片。
background-size：背景图片尺寸。
background-position：背景图片位置。

5. 动画与过渡

animation：定义动画效果。
transition：定义过渡效果。

6. 其他

box-shadow：添加阴影效果。
border-radius：设置边框圆角。
opacity：设置元素透明度。

常用布局技巧：

1. Flex 布局

使用 `display: flex` 实现灵活的盒子布局，可以方便地实现水平居中、垂直居中、等高列布局等。

2. Grid 布局

使用 `display: grid` 实现网格布局，可以实现复杂的布局需求，如分栏、网格等。

3. 响应式布局

使用媒体查询（`@media`）和相对单位（`%`、`vw`、`vh`）实现在不同设备和屏幕尺寸下的布局适配。

4. 网格系统

使用网格系统（如 Bootstrap）实现快速搭建页面的栅格布局，提高开发效率。

5. 居中布局

使用 `position: absolute`、`margin`、`transform` 等方法实现水平居中、垂直居中、水平垂直居中等布局方式。

水平居中布局

.container {
    width: 300px;
    margin: 0 auto; /* 水平居中 */
}

水平垂直居中布局

使用 Flex 布局：

.container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

使用绝对定位和 transform 属性：

.container {
    position: relative;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 水平垂直居中 */
}

原文地址：https://blog.csdn.net/weixin_52841164/article/details/137779468

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！