CSS相关属性和显示模式

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):

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

2.3 行内块元素

行内块元素(inline-block)特点(例如:img):

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

2.4 转换显示模式

属性名:display

属性值:block(块级)、inline(行内)、inline-block(行内块)

例如:

html 复制代码
<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>
相关推荐
cs_dn_Jie21 分钟前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic1 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿1 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具2 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161772 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test3 小时前
js下载excel示例demo
前端·javascript·excel
Yaml43 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事3 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶3 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo3 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx