博客
关于我
【前端基础】CSS的应用
阅读量:585 次
发布时间:2019-03-11

本文共 1015 字,大约阅读时间需要 3 分钟。

CSS

CSS的引入方式

CSS样式表可以通过以下几种方式引入到HTML文件中:

方式一:直接在HTML标签中加入style属性,多个样式用分号分隔

方式二:将CSS样式表放在Head标签内,使用style标签包裹(主流方式)

方式三:通过链接导入外部CSS文件

CSS的选择器

CSS选择器用于选择HTML元素并对其进行样式操作。常见的选择器包括:

标签选择器:直接使用标签名,如div、p等

类选择器:通过在标签中添加class属性定义类名,选择器使用.class表示

ID选择器:通过在标签中添加id属性定义ID名,选择器使用#id表示

CSS的盒子模型

CSS盒子模型由四个部分构成:

1. 元素内容:

2. 内边距:

3. 边框:

4. 外边距:

盒子的宽度和高度指的是内容区域(包括内边距)的总和。边框需要指定宽度和类型。背景色由内容区域和内边距共同决定。

外边距合并

外边距合并发生在两个或多个元素在垂直方向上紧接的情况下。合并的条件是两个元素的外边距高度中最大者决定了合并后的外边距高度。通常情况下,块级元素会有较大的外边距合并。

标签的分类

块级元素

块级元素占据独特的一行,并从新的一行开始排列。它们可以设置宽高和内外边距宽度,高度则不完全继承。常见块级元素包括div、p、h1到h6、ol、ul、dl、li、form和table等。

行级元素

行级元素与其他行级元素共处一行,从左到右排列。它们不能设置宽高,仅能调整内外边距,宽高由内容决定。常见行级元素包括span、a、b、strong、i、strike、br、u、textarea、input、select和img等。

行内块

行内块元素本质上属于行级元素,但可以设置宽高和内外边距。常见行内块元素包括input、img、select和button等。通过将display属性设置为inline-block可将块级元素转换为行内块。

浮动

浮动允许元素脱离标准流,漂浮在页面顶部或底部。浮动元素只影响后续元素的布局,不会影响前面的元素。浮动的特点包括:

1. 浮动只影响后面的元素

2. 连续浮动元素会占用同一行

3. 浮动以元素顶部对齐

4. 浮动可以实现布局模式转换

语法表示为float:left或float:right,右对齐时使用float:right。

清除浮动时,可以通过清除浮动的父容器或使用clear:both等方法来防止后续元素上移。

转载地址:http://tesvz.baihongyu.com/

你可能感兴趣的文章
NIFI从MySql中增量同步数据_通过Mysql的binlog功能_实时同步mysql数据_根据binlog实现数据实时delete同步_实际操作04---大数据之Nifi工作笔记0043
查看>>
NIFI从MySql中增量同步数据_通过Mysql的binlog功能_实时同步mysql数据_配置binlog_使用处理器抓取binlog数据_实际操作01---大数据之Nifi工作笔记0040
查看>>
NIFI从MySql中增量同步数据_通过Mysql的binlog功能_实时同步mysql数据_配置数据路由_实现数据插入数据到目标数据库_实际操作03---大数据之Nifi工作笔记0042
查看>>
NIFI从MySql中增量同步数据_通过Mysql的binlog功能_实时同步mysql数据_配置数据路由_生成插入Sql语句_实际操作02---大数据之Nifi工作笔记0041
查看>>
NIFI从MySql中离线读取数据再导入到MySql中_03_来吧用NIFI实现_数据分页获取功能---大数据之Nifi工作笔记0038
查看>>
NIFI从MySql中离线读取数据再导入到MySql中_不带分页处理_01_QueryDatabaseTable获取数据_原0036---大数据之Nifi工作笔记0064
查看>>
NIFI从MySql中离线读取数据再导入到MySql中_无分页功能_02_转换数据_分割数据_提取JSON数据_替换拼接SQL_添加分页---大数据之Nifi工作笔记0037
查看>>
NIFI从Oracle11G同步数据到Mysql_亲测可用_解决数据重复_数据跟源表不一致的问题---大数据之Nifi工作笔记0065
查看>>
NIFI从PostGresql中离线读取数据再导入到MySql中_带有数据分页获取功能_不带分页不能用_NIFI资料太少了---大数据之Nifi工作笔记0039
查看>>
nifi使用过程-常见问题-以及入门总结---大数据之Nifi工作笔记0012
查看>>
NIFI分页获取Mysql数据_导入到Hbase中_并可通过phoenix客户端查询_含金量很高的一篇_搞了好久_实际操作05---大数据之Nifi工作笔记0045
查看>>
NIFI分页获取Postgresql数据到Hbase中_实际操作---大数据之Nifi工作笔记0049
查看>>
NIFI同步MySql数据_到SqlServer_错误_驱动程序无法通过使用安全套接字层(SSL)加密与SQL Server_Navicat连接SqlServer---大数据之Nifi工作笔记0047
查看>>
NIFI同步MySql数据源数据_到原始库hbase_同时对数据进行实时分析处理_同步到清洗库_实际操作06---大数据之Nifi工作笔记0046
查看>>
Nifi同步过程中报错create_time字段找不到_实际目标表和源表中没有这个字段---大数据之Nifi工作笔记0066
查看>>
【Flink】Flink 1.9 版本 web UI 突然没有日志
查看>>
NIFI大数据进阶_FlowFile拓扑_对FlowFile内容和属性的修改删除添加_介绍和描述_以及实际操作---大数据之Nifi工作笔记0023
查看>>
NIFI大数据进阶_FlowFile生成器_GenerateFlowFile处理器_ReplaceText处理器_处理器介绍_处理过程说明---大数据之Nifi工作笔记0019
查看>>
NIFI大数据进阶_FlowFile生成器_GenerateFlowFile处理器_ReplaceText处理器_实际操作---大数据之Nifi工作笔记0020
查看>>
NIFI大数据进阶_Json内容转换为Hive支持的文本格式_实际操作_02---大数据之Nifi工作笔记0032
查看>>