css span 右端对齐_CSS标准文档流

web页面的制作,是个“流”,像水流一样,必须从上往下,一点点的编织,不像画画,可以这个地方画一个,另一个地方画一个,随意而为。

标准文档流的一些微观现象

1. 空白折叠现象

1)标签与标签之间紧密连接,网页上两个内容也是紧密连接,中间没有空格。

2)标签与标签之间中间有一个空格,网页上两个内容之间也有一个空格的间隙。

3)标签与标签之间有一个以上的空格(n>1),网页上两个内容之间也只有一个空格。

通过第3)个现象可知,多出的空格折叠了,这就是所谓的空白折叠现象。

2. 高矮不齐,底边对齐

网页上的两个不同的内容出现高低不同时,底边对齐。如图:

b9621f35883c060dfdda69e1a3370f49.png

3. 自动换行

块级元素和行内元素

在HTML中,我们已经将标签分为了:文本级、容器级。文本级:p、span、a、b、i、u、em;容器级:div、h系列、li、dt、dd。

CSS标准文档流也将标签分为两种等级:

1)块级元素

霸占一行,不能与其他任何元素并列;

能接受宽、高;

如果不设置宽度,那么宽度将默认变为父亲的100%。

2)行内元素

与其他行内元素并排;

不能设置宽、高。默认的宽度,就是文字的宽度。

CSS的分类和HTML分类很像,就p不一样:所有的文本级标签,都是行内元素,除了p,p是个文本级,但是是个块级元素;所有的容器级标签都是块级元素。

总结如下图:

06bd2473bd0a1478cd043846f6be328f.png

块级元素和行内元素的互换

1. 块级元素可以设置为行内元素

语法为:display:inline;

799a48c891421a37931102e87f94cea1.png

display是“显示模式”的意思,用来改变元素的行内、块级性质。inline就是“行内”,一旦,给一个块级元素设置display: inline; 那么,这个div将立即变为行内元素。此时它和一个span无异, 此时这个div:不能设置宽度、高度;可以和别人并排了。

2. 行内元素可以设置成块级元素

语法为:display:block;

9bef1978c13dcb202f5e260031a71775.png

“block”是“块”的意思。让标签变为块级元素。此时这个标签,和一个div无异,此时这个span:能够设置宽度、高度;必须霸占一行了,别人无法和他并排;如果不设置宽度,将撑满父亲。

标准流里面限制非常多,但是实际创建网页时,我们要让不同的块级元素并排布局,这该如何实现呢?那就是“脱离标准流”,CSS中一共有三种手段使一个元素脱离标准流,明天我再跟大家分享。

学习相关推荐(编程必备辅助):

①:关注公众号“只会写BUG”,分享更多干货知识,资讯,教程等

②:海量编程类资料零基础到高级亟待领取!!!

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

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

相关文章

composer升级_Composer 使用姿势与 Lumen 升级指南

Composer 使用姿势这里主要说说 composer.json 和 composer.lock 文件的作用。composer.jsoncomposer.json 文件包含了项目的依赖和其它的一些元数据,使用 JSON format 编写。当初次调用 composer install 时,Composer 会根据 composer.json 文件&#x…

服务器间传文件$d,基于OpenSSH+WinSCP完成Windows服务器之间的文件传输

背景经常会遇到在不同服务器之间传输文件,Linux和Linux之间用命令rsync, windows和linux之间普遍是有图形化界面的ftp软件,老黄平时用的比较多的是FileZilla。Windows和Windows之间的话,90%都是在一台机器复制,到另一台…

dbgrideh 为什么只一行_Mysql性能优化:为什么count(*)这么慢?

导读在开发中一定会用到统计一张表的行数,比如一个交易系统,老板会让你每天生成一个报表,这些统计信息少不了sql中的count函数。但是随着记录越来越多,查询的速度会越来越慢,为什么会这样呢?Mysql内部到底是…

jmeter 高并发测试报告_JMeter分布式测试

一、为什么要使用分布式测试按照一般的压力机配置,jmeter的GUI模式下(Windows),最多支持300左右的模拟请求线程,再大的话,容易造成卡顿、无响应等情况,这是限于jmeter其本身的机制和硬件配置。有时候为了尽量模拟业务场…

登陆拦截拦截ajax,过滤器实现登录拦截需要注意的问题(AJAX请求的处理)

1.问题描述:最近自己在写demo时遇到一个问题,在ajax请求时用Filter做登录拦截,结果页面不跳转(Ajax是不能做转发和重定向的)、、、、最终的最终在同事zt的提示下,恍然大悟,虽然很基本的问题,但也纠结了好久…

半圆阴影_六年级数学:怎么求阴影部分面积?正方形与半圆,割补法常考题

欢迎您来到方老师数学课堂,请点击上方蓝色字体,添加关注。所有的视频内容,全部免费,请大家放心关注,放心订阅。六年级数学:怎么求阴影部分面积?正方形与半圆,割补法常考题。大家先在…

c语言判断整数_用c++编写闰年的判断基础程序

其实c语言与c语言有太多共同的东西,学习过c语言再学习c语言就显得轻而易举。当然学过了c再去学习c语言也是有一些帮助的(但是个人不提倡先学习c在学c语言)。由于现在经常看见有关闰年的程序,风式各样,眼花缭乱,些许凌乱&#xff0…

cat日志 搜索_大日志,看我如何对付你

在服务器接口测试中,我们经常会和各种日志打交道。一旦测试时服务端出现了问题,而单凭服务端的日志又不能发现问题原因的时候,往往开发要向我们测试人员询问客户端这边的情况,希望看看我们能不能提供一些有用信息,如错…

python编译成dll文件_用vc生成可被python调用的dll文件

前提已经有.c 和.i文件 用swid编译了.i文件生成了wrap.c文件和.py文件 vc创建dll工程 将.h加入到头文件中.c文件和wrap.c文件添加到源文件中 将.i文件添加到工程目录下 Tools->Options->Directories中修改include 和lib 添加python里的include 和libs 把\libs\python27.l…

加载gif动图_GIF生成神器——ScreenToGif

每次需要做一个动图展示时,总是感觉很头疼。截图吧,需要的图片太多;录视频吧,文件太大;做动图吧,太麻烦。今天推荐的这个软件或许能够解决大家这个困惑,今天推荐的是动图生成神器——ScreenToGi…

vue底部选择器_vue实现动态显示与隐藏底部导航的方法分析

vue实现动态显示与隐藏底部导航的方法分析本文实例讲述了vue实现动态显示与隐藏底部导航的方法。分享给大家供大家参考,具体如下:在日常项目中,总有几个页面是要用到底部导航的,总有那么些个页面,是不需要底部导航的&a…

java 修改最大nio连接数_关于java流的几个概念:IO、BIO、NIO、AIO,有几个人全知道?...

关于同步、阻塞的知识我之前的文章有介绍,所以关于流用到这些概念与之前多线程用的概念一样。下面具体来看看java中的几种流IO/BIOBIO就是指IO,即传统的Blocking IO,即同步并阻塞的IO。这也是jdk1.4之前的唯一选择,依赖于ServerSocket实现&am…

python神秘的魔法函数_python魔法函数

一、参考二、构造和初始化2.1 __new__在对象实例化过程中最先调用的方法是__new__, 该方法接收参数为类,然后将其他参数,传递给__init__, 该魔法函数比较少见,可以使用其,创建单例类; __new__方法是一个类方法,需要携带…

python扫雷 广度优先_广度优先搜索(BFS)解题总结

定义 广度优先搜索算法(Breadth-First-Search),是一种图形搜索算法。 简单的说,BFS是从根节点开始,沿着树(图)的宽度遍历树(图)的节点。 如果所有节点均被访问,则算法中止。 BFS同样属于盲目搜索。 一般用队…

python默认参数陷阱_python默认参数陷阱

0|1陷阱?学过函数的人一定听说过函数的默认参数,关于函数的默认参数,请看以下的例子:def extendList(val, lst[]):lst.append(val)return lstlist1 extendList(10)list2 extendList(123, [])print(list1 %s % list1)print(list…

python裁剪图片并保存_python – 如何从图像中剪切轮廓并将其保存到新文件中

大家好,这是我的第一个问题所以请保持温和.我有一个计算机视觉领域的项目,我是新的,我会很感激一些帮助.我有一个pcb的图像,我的(首先)任务是从背景中切断电路板并将其保存到新文件.如果结果只是没有灰色背景的普通pcb,那就没问题了. 我到目前为止尝试的是,首先使用阈值将图像转…

opencv如何把一个矩阵不同列分离开_学习OPEN_CV

OpenCv中文论坛精华地址http://www.opencv.org.cn/index.php/User:Ollydbg23http://sivp.sourceforge.net/(sivp)一、基础操作1. 数据类型 数据结构了解图像相关:cvArr cvMat IplImage数据数组的维数, 与数据的通道数 见P46 (76)2. 常见的矩阵操作熟悉3…

python文件合并_用Python 将两个文件的内容合并成一个新的文件.

一个文件的内容是:IntroductiontoProgramming,NetworkingFundamentals,InternetworkingTechnologies,PlatformTechnologies,InformationTechnologyforUsers,ComputerForensics,Enterpr... 一个文件的内容是: Introduction to Programming, Networking Fundamentals, Internetwo…

flash代码_Flash如何对制作文件进行优化

对FLASH进行优化分为两方面,一方面是代码上的优化,主要是通过优化提高FLASH性能,降低CPU占用和内存使用。另一方面是资源的优化,这方面的优化是为了减小编译后的文件大小以及制作文件的大小,因为如果不进行相应的优化&…

潜流式湿地计算_人工湿地计算书

人工湿地计算书1、尾水提升泵房集水池基本参数集水池设计规模为30000m3/d,约折合1250m3/h,按水力停留时间HRT为0.25 h计,集水井有效容积应为312.5 m3,考虑到与污水厂原有排污管道相契合,集水设计尺寸为:LBH…