CSS 如何设置 div 样式

在网页设计中，div 元素是一个通用的容器，可以用来放置其他元素，也可以用来分组并应用样式。下面介绍如何使用CSS设置 div 样式。

1. 设置 div 的尺寸

div {
    width: 100px;
    height: 100px;
}

上面的代码将一个 div 元素的宽度和高度都设置为100px，可以根据需要将这两个属性设置为不同的数值。

2. 设置 div 的背景颜色和背景图片

div {
    background-color: yellow;
    background-image: url("bg.jpg");
    /* 可选属性 */
    background-repeat: no-repeat; /* 默认值是 repeat */
    background-position: left top; /* 默认值是 left top */
}

上面的代码将一个 div 元素的背景颜色设置为黄色，背景图片设置为 bg.jpg。其中 background-repeat 属性设置不重复，background-position 属性设置图片在左上角对齐。

3. 设置 div 的边框和圆角

div {
    border: 1px solid red;
    border-radius: 5px;
}

上面的代码将一个 div 元素的边框设置为红色的实线，宽度为1px，同时将圆角半径设置为5px。

4. 设置 div 的字体和文字

div {
    font-size: 16px;
    font-family: "微软雅黑", sans-serif;
    color: #333;
    text-align: center;
}

上面的代码将一个 div 元素的字体大小设置为16px，字体类型设置为微软雅黑或 sans-serif（后备字体），文字颜色设置为深灰色，文本居中对齐。

5. 设置 div 的布局和浮动

div {
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
    /* 可选属性 */
    margin: 10px;
    padding: 10px;
}

上面的代码将一个 div 元素的布局设置为弹性盒子，水平和垂直居中，同时设置浮动为左浮动。其中 margin 和 padding 属性用于设置外边距和内边距，可以根据需要设置。

以上是设置 div 样式的常用方法，希望能对你有所帮助。