22 块级元素和行内元素
学习的初期,我们就要知道,标准文档流等级森严。标签分为两种等级:
- 行内元素
- 块级元素
比如h1标签和span,同时设置宽高,来看浏览器效果,那么你会发现:
行内元素和块级元素的区别:(非常重要)
行内元素:
- 与其他行内元素并排;
- 不能设置宽、高。默认的宽度,就是文字的宽度。
块级元素:
- 霸占一行,不能与其他任何元素并列;
- 能接受宽、高。如果不设置宽度,那么宽度将默认变为父亲的100%。
块级元素和行内元素的分类:
在以前的HTML知识中,我们已经将标签分过类,当时分为了:文本级、容器级。
从HTML的角度来讲,标签分为:
- 文本级标签:p、span、a、b、i、u、em。
- 容器级标签:div、h系列、li、dt、dd。
PS:为甚么说p是文本级标签呢?因为p里面只能放文字&图片&表单元素,p里面不能放h和ul,p里面也不能放p。
现在,从CSS的角度讲,CSS的分类和上面的很像,就p不一样:
行内元素:除了p之外,所有的文本级标签,都是行内元素。p是个文本级,但是是个块级元素。
块级元素:所有的容器级标签都是块级元素,还有p标签。
块级元素和行内元素的相互转换
我们可以通过display
属性将块级元素和行内元素进行相互转换。display即“显示模式”。
块级元素可以转换为行内元素:
一旦,给一个块级元素(比如div)设置:
display: inline;
那么,这个标签将立即变为行内元素,此时它和一个span无异。inline就是“行内”。也就是说:
- 此时这个div不能设置宽度、高度;
- 此时这个div可以和别人并排了
行内元素转换为块级元素:
同样的道理,一旦给一个行内元素(比如span)设置:
display: block;
那么,这个标签将立即变为块级元素,此时它和一个div无异。block”是“块”的意思。也就是说:
- 此时这个span能够设置宽度、高度
- 此时这个span必须霸占一行了,别人无法和他并排
- 如果不设置宽度,将撑满父亲
标准流里面的限制非常多,导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高,那该怎么办呢?办法是:移民!脱离标准流!
css中一共有三种手段,使一个元素脱离标准文档流:
- (1)浮动
- (2)绝对定位
- (3)固定定位
转载于:https://www.cnblogs.com/mayugang/p/10303588.html
22 块级元素和行内元素相关推荐
- [HTML/CSS]盒子模型,块级元素和行内元素
目录 概述 盒子模型 块级元素 行内元素 可变元素 总结 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...
- css标签显示特性(块级元素、行内元素、行内块元素、标签显示模式转换display、简单文字居中、简单导航栏案例)
HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素. 标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个 1. 块级元素(block-level) 常 ...
- CSS里常见的块级元素和行内元素
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为"block&q ...
- CSS样式----块级元素和行内元素
块级元素:div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table 行内元素:s ...
- CSS块级元素和行内元素
1. 宽高 width:数值; height:数值; 也可用百分比! 长高的设置不会被后代继承 2. 背景 (1)背景颜色 background-color:颜色值; 元素的背景颜色默认为transp ...
- 5、HTML块级元素及行内元素
在 HTML 中,标签(tag)通常又被称作元素(element).例如 <a> 标签又叫做 <a> 元素,<p> 标签也叫作 <p> 元素. HTML ...
- 块级元素和行内元素的区别
块级元素和行内元素的区别: 1.块级元素会独占一行,其宽度自动填满其父元素宽度 行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度随元素的 ...
- 继承性和层叠性 权重 盒模型 padding(内边距) border(边框) margin 标准文档流 块级元素和行内元素...
内容总结: 1.继承性和层叠性继承性: 像 一些文本的属性: color,text-*,line-*,font-* 这些属性是可以继承下来的2.层叠性就是权重 ,谁的权重大就显示谁的属性如何看权重:就 ...
- css块元素与行内元素特点,CSS区分块级元素和行内元素
块级元素(块级元素一般当做容器使用,既可以容纳内联元素也可以容纳块级元素) 特点: 1.每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行. 2.元素的高度.宽度.行高和顶底 ...
最新文章
- 【转载】在对话框中加入属性页
- 【存储知识学习】第二章存走进计算机IO世界--《大话存储》阅读笔记
- python 乱码转码_Python解决乱码问题
- linux 查看文件和文件夹大小
- edge android apk下载地址,edge app下载-edge完整版v7.2.0 安卓版 - 极光下载站
- matlab 计算数据转折点,计算轨迹(路径)中的转折点/枢轴点
- Selenium自动化框架:数据驱动、关键字驱动和混合
- Go获取命令行参数及信号量处理
- Install Kernel 3.10 on CentOS 6.5
- Loadrunner12实现手机APP压力测试
- 真没想到!时隔3年,被废掉武功的快播,依然是最受欢迎的播放器
- 2019年上半年信息系统项目管理师下午案例分析真题及答案解析
- 扩展欧几里得算法的证明
- 计算机科学导论佛罗赞第4版,计算机科学导论 原书第4版
- 基于学生信息管理系统的数据库系统课程设计升级版(mysql)
- 内网使用 IPV6 之Teredo篇
- 小写转大写金额 php,php小写金额转大写
- 苹果xr如何关机_苹果新系统让这些 iPhone 电量满血复活
- Bootstrap - 前端框架
- chrome最强大的浏览器插件油猴Tampermonkey插件离线安装包免费分享下载
热门文章
- [深度学习] Pytorch中RNN/LSTM 模型小结
- asp.net MVC中的tip
- 熊猫分发_实用熊猫指南
- 在神经网络中使用辍学:不是一个神奇的子弹
- 深入浅出SQL(三)——表的规范化
- PHP的表单获取与HHTP请求方式
- 把王小波作为离我们最近的一个大师
- warning: pointer of type 'void *' used in arithmetic
- java 张量运算,博客 | Tensorflow_01_运算符与张量值
- 计算机一般的应用课题方向,计算机类哪个方向的课题好立项