CSS相关属性和显示模式

news/2024/10/5 18:46:37 标签: 前端, CSS, CSS3

1. CSS相关属性

1.1 常见控制属性

属性名	作用	案例
width	宽度	width : 100px;
height	高度	height : 100px;
background-color	背景色	background-color : red;

1.2 文字控制属性

属性名	作用	案例
font-size	字体大小	font-size:30px;
font-weight	字体粗细	数字：正常400，加粗700 关键字：正常normal，加粗bold
font-style	字体倾斜	正常：normal；倾斜：italic
line-height	行高	例：line-height : 30px; 例：line-height : 2;（数字表示font-size的2倍）单行文字居中：可文字高度与盒子高度相同
font-family	字体族	例：fant-family:楷体; 属性值可以书写多个字体名，用逗号隔开，执行顺序是从左向右依次查找
font	字体复合属性	使用场景：设置网页文字公共样式 font:是否倾斜是否加粗字号/行高字体例：font : italic 700 30px/2 楷体; 注意：必须按顺序书写，字号和字体必须写
text-indent	文本缩进	数字 + px 数字 + em（推荐：1em表示标签的字体号大小）例：text-indent : 2em;
text-align	文本对齐	属性值：left、center、right 例：text-align : center;
text-decoration	修饰线	属性值：none、underline
color	颜色	rgb表示法：rgb(r,g,b)，表示红绿蓝三原色（0-255） rgba表示法：rgba(r,g,b,a)，a表示透明度（0-1）十六进制法：#RRGGBB，简写#RGB

1.3 背景控制属性

属性名	作用	案例
背景色	background-color
背景图	background-image	背景图实现装饰性的图片效果（默认平铺）例：background-image : url(背景图URL)
背景图平铺方式	background-repeat	值：no-repeat、repeat（默认）、repeat-x、repeat-y 例：background-repeat : no-repeat
背景图位置	background-position	属性值：水平方向位置垂直方向位置关键字：left、right、center、top、bottom 坐标：数字 + px（正负都可以）例1：background-position : center bottom; 例2：background-position : 50px -100px; 注意： ①关键字可以颠倒取值顺序 ②关键字只写一个，另一个方向默认为居中 ③数字写一个值表示水平方向，垂直方向为居中
背景图缩放	background-size	作用：设置背景图大小属性值：关键字、百分比、数字+单位（例如px）关键字：cover、contain ①cover，等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。 ②contain，等比例缩放背景图片以完全装入背景区，可能背景区部分空白。例：background-size : cover;
背景图固定	background-attachment	作用：背景不会随着元素的内容滚动属性值：fixed 例如：background-attachment : fixed;
背景复合属性	background	属性值：背景色背景图背景图平铺方式背景图位置/背景图缩放背景图固定(空格隔开各个属性值，不区分顺序) 例：background : pink url(./cat.png) no-repeat right center/cover;

2. CSS显示模式

概念：标签（元素）的显示方式。

作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容。

2.1 块级元素

块级元素（block）特点（例如：div）：

独占一行
宽度默认是父级的100%
添加宽高属性生效

2.2 行内元素

行内元素（inline）特点（例如：span）：

一行可以显示多个
设置宽高属性不生效
宽高尺寸由内容撑开

2.3 行内块元素

行内块元素（inline-block）特点（例如：img）：

一行可以显示多个
设置宽高属性生效
宽高尺寸也可以由内容撑开

2.4 转换显示模式

属性名：display

属性值：block（块级）、inline（行内）、inline-block（行内块）

例如：

<html>
<head>
    <title>显示模式转换</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            /* 块级元素转换为行内块 */
            display: inline-block;
        }
        .div1 {
            background-color: red;
        }
        .div2 {
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
</body>
</html>