re:从0开始的CSS之旅 13. 文档流

1. 三种基本机制

CSS盒子三种基本定位机制:普通流normal flow、浮动float、定位position
文档流(标准流、普通流 normal flow):HTML文档中一些皆为盒子,而盒子在HTML文档中默认的显示标准,称为文档流

2. 块元素

常见的块元素
div h1~h6 p ul ol li
特点:
- 独占一行
- 宽度和高度等都可以设置
- 默认宽度是父级宽度的100%
- 块元素是容器,里面可以放块元素、行内元素、行内块元素
注意:
- 文字类的块元素不能自由嵌套(尽量不要放块元素)

3. 行内元素

常见的行内元素
span a strong em ins del

特点:
- 和相邻的行内元素(行内块元素)在一行显示
- 宽度和高度设置无效
- 默认宽度是其内容的宽度
- 行内元素可以设置border、padding、margin,但是垂直方向不会影响页面的布局
- 行内元素水平外边距不会发生重叠
- 行内元素只能容纳文本或其他行内元素

注意:
1. a 链接中不能放链接
2. 特殊情况下,a 链接中可以放块元素,但是最好将 a 转换为块元素

4. 行内块元素

在行内元素中有几个标签:img input td 他们同时拥有块元素与行内元素的特点
因此我们称为 行内块元素

  1. 特点:
    1. 和相邻的块元素(行内块元素)在一行显示
    2. 默认宽度是其内容的宽度
    3. 宽度和高度等都可以设置

示例如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>span {background-color: #c7edcc;width: 200px;height: 200px;border: 10px solid red;padding: 10px;margin: 100px;}.box1 {background-color: #fde6e0;width: 200px;height: 200px;}
</head><body><h1>我是标题</h1><div>我是div</div><p>我是段落<div></div></p><span>我是span</span><span>我是span</span><span>我是span</span><div class="box1"></div>
</body></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/683242.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL学习记录——구 复合查询

文章目录 1、基本查询2、多表查询3、自连接4、子查询1、多行子查询2、多列子查询3、from句中的子查询 5、合并查询 1、基本查询 看一些例子&#xff0c;不关心具体内容&#xff0c;只看写法 //查询工资高于500或岗位为MANAGER的雇员, 同时还要满足他们的姓名首字母为大写的J …

Django学习全纪录:编写你的第一个 Django 应用,Django内置数据库的配置,以及扩展性的数据库介绍和配置

天下古今之庸人,皆以一惰字致败;天下古今之人才,皆以一傲字致败。——[清]曾国藩 导言 大家好,在上一篇文章里,我们一起学习了Django的视图以及路由,并且对Django的应用有了初步的认识,掌握了视图和路由的基本规则,学会了Django的应用如何创建,总之,收获满满。 这…

Linux常用管理命令NTFS磁盘挂载

一、常用管理命令 1.1 whoami 作用&#xff1a;显示出当前有效的用户名称 语法&#xff1a;whoami&#xff08;选项&#xff09; 选项&#xff1a; --help&#xff1a;在线帮助--version&#xff1a;显示版本信息和退出 示例&#xff1a; [rootlocalhost ~]# whoami root 1.2 …

Docker的常见命令以及命令别名

常见命令 命令说明docker pull拉取镜像docker push推送镜像到DockerRegistrydocker images查看本地镜像docker rmi删除本地镜像docker run创建并允许容器docker stop停止指定容器docker start启动指定容器docker restart重新启动容器docker rm删除指定容器docker ps查看容器do…

ClickHouse--04--数据库引擎、Log 系列表引擎、 Special 系列表引擎

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 1.数据库引擎1.1 Ordinary 默认数据库引擎1.2 MySQL 数据库引擎MySQL 引擎语法字段类型的映射 2.ClickHouse 表引擎3.Log 系列表引擎几种 Log 表引擎的共性是&#…

音视频高频知识点

本篇文章就来介绍一下在音视频学习中 要有哪些要重点掌握的知识点 本章以问题的形式来提出 1.为什么巨大的原始视频可以编码成很小的视频呢?这其中的技术是什么呢? 1&#xff09;空间冗余&#xff1a;图像相邻像素之间有较强的相关性 2&#xff09;时间冗余&#xff1a;视频…

opencv通道分离与合并

void QuickDemo::channels_demo(Mat & image) {std::vector<Mat>mv;//通道分离合并split(image,mv);//原图 指针(Mat)imshow("蓝色", mv[0]);imshow("绿色", mv[1]);imshow("红色", mv[2]); } split(image,mv);//原图 指针(Mat) 这里…

学习笔记20:牛客周赛32

D 统计子节点中1的个数即可&#xff08;类似树形dp&#xff1f;&#xff09; #include<iostream> #include<cstring> #include<cmath> #include<algorithm> #include<queue> #include<vector> #include<set> #include<map>u…

Rust 数据结构与算法:5栈:用栈实现前缀、中缀、后缀表达式

3、前缀、中缀和后缀表达式 计算机是从左到右处理数据的,类似(A + (B * C))这样的完全括号表达式,计算机如何跳到内部括号计算乘法,然后跳到外部括号计算加法呢? 一种直观的方法是将运算符移到操作数外,分离运算符和操作数。计算时先取运算符再取操作数,计算结果则作为…

HTML5+CSS3+JS小实例:锥形渐变彩虹按钮

实例:锥形渐变彩虹按钮 技术栈:HTML+CSS+JS 效果: 源码: 【HTML】 <!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /…

maven创建webapp+Freemarker组件的实现

下载安装配置maven Maven官方版下载丨最新版下载丨绿色版下载丨APP下载-123云盘123云盘为您提供Maven最新版正式版官方版绿色版下载,Maven安卓版手机版apk免费下载安装到手机,支持电脑端一键快捷安装https://www.123pan.com/s/9QRqVv-TcUY.html链接为3.6.2-3.6.3的版本 下载解…

LLVM的中间表示

概括 选择编译器IR的决策很重要&#xff0c;它决定了优化过程将拥有多少信息来使代码运行得更快。 一方面非常高层级的IR允许优化器轻松地提取原始源代码的相关信息。 另一方面&#xff0c;低层的IR更加贴近目标机器&#xff0c;这样编译器更容易为特定的硬件生成相应的代码…

RH850从0搭建Autosar开发环境【2X】- Davinci Configurator之XCP模块配置详解(上)

XCP模块配置详解 - 上 一、XCP模块配置项处理1.1 Tx Pdu配置项二、XCP模块其他配置项2.1 参数XcpMainFunctionPeriod2.2 参数XcpOnCanEnabled2.3 容器XcpOnCan总结从本节开始先专注与配置项错误处理以及构建Autosar Rh850的最小系统搭建。 XCP模块在汽车电子各控制器中处于十分…

100天精通风控建模(原理+Python实现)——第16天:风控建模中的准确率是什么?怎么实现?

风控模型已在各大银行和公司都实际运用于业务,用于营销和风险控制等。本文以视频的形式阐述风控建模中卡方检验是什么,怎么实现。并提供风控建模原理和Python实现文章清单。    之前已经阐述了100天精通风控建模(原理+Python实现)——第1天:什么是风控建模?    100天精…

【Java记】数据类型与变量

一、数据类型 在Java中数据类型主要分为两类&#xff1a;基本数据类型和引用数据类型。基本数据类型有四类八种&#xff1a; 四类&#xff1a;整型、浮点型、字符型以及布尔型八种&#xff1a; 数据类型 关键字 内存占用 范围 字节型 byte 1 字节 -128~ 127 短整型 …

高程 | 数组、指针与字符串(c++)

文章目录 &#x1f4da;数组&#x1f407;数组的概念&#x1f407;数组的声明与使用&#x1f407;数组的存储与初始化&#x1f407;数组作为函数参数&#x1f407;对象数组 &#x1f4da;指针&#x1f407;内存空间的访问方式&#x1f407;指针变量的声明&#x1f407;指针运算…

蓝桥杯嵌入式第10届真题(完成) STM32G431

蓝桥杯嵌入式第10届真题(完成) STM32G431 题目 main.c /* USER CODE BEGIN Header */ /********************************************************************************* file : main.c* brief : Main program body********************************…

【C语言】指针练习篇(下),深入理解指针---指针练习题【图文讲解,详细解答】

欢迎来CILMY23的博客喔&#xff0c;本期系列为【C语言】指针练习篇&#xff08;下&#xff09;&#xff0c;深入理解指针---指针练习题【图文讲解,详细解答】&#xff0c;图文讲解指针练习题&#xff0c;带大家更深刻理解指针的应用&#xff0c;感谢观看&#xff0c;支持的可以…

文件操作详解

文章目录 目录1. 为什么使用文件2. 什么是文件2.1 程序文件2.2 数据文件2.3 文件名 3. 文件的打开和关闭3.1 文件指针3.2 文件的打开和关闭 4. 文件的顺序读写5. 通讯录的改造6. 文件的随机读写6.1 fseek6.2 ftell6.3 rewind 7. 文本文件和二进制文件8. 文件读取结束的判定9. 文…

『运维备忘录』之 Lsof 命令详解

运维人员不仅要熟悉操作系统、服务器、网络等只是&#xff0c;甚至对于开发相关的也要有所了解。很多运维工作者可能一时半会记不住那么多命令、代码、方法、原理或者用法等等。这里我将结合自身工作&#xff0c;持续给大家更新运维工作所需要接触到的知识点&#xff0c;希望大…