CSS之 块、行内、行内块元素
块元素
独占一行 如h1-h6、p、div、ul、ol、li等；
宽高内外边距可以调；
宽度默认是父级宽度100%；
都是容器盒子，里面可以放行内或块级元素。
注意点：文字类元素如p、h1-h6里面不能放块元素div
行内元素
（也叫内联元素）一行可以放多个 如 a、span、strong、b、em、i、del、s、ins、u等
相邻行内元素在一行上，一行可以显示多个；
宽高直接设置是无效的；
默认宽度就是本身内容宽度；
行内元素只能容纳文本或其他行内元素。
注意点：a里面不能放a，a里面可以放块级元素
- 行内元素为了照顾兼容性，尽量只设置左右内外边距（一行有多个行内元素情况下），不设置上下内外边距，因为设置了上下也不生效，除非转化为行内块或块级元素才可以。
行内块元素
同时具有块元素和行内元素的特点，如img、inptut、td
和相邻行内元素（行内块）在一行上，但是之间有空白缝隙。一行可以显示多个
默认宽度是本身内容宽度
高度、行高、内外边距都可以控制（块元素特点）
tip
把行内元素转换为块元素 用 display:block;
把块元素转换为行内元素 用 display:inline;
转换为行内块元素 用 display:inline-block;
CSS之 块、行内、行内块元素相关推荐
- typora修改主题字体、代码块字体、行内块代码字体大小、引用块字体大小、代码块背景颜色、文章可写区域宽度以及修改教程
目录 0. 授人以渔 1.主题字体 2.代码块字体大小 3.引用块字体大小 4.代码块背景颜色 ①pink老师的样式代码 ②自己搜到的样式 5.块代码字体大小 6.修改文章可写区域的宽度 0. 授人以 ...
- HTML 块标签，行内标签，行内块标签以及之间的相互转换
HTML标签分类 行内标签:包含a.span.em.strong.b.i.u.label.br: 特点:可以多个标签存在一行,不能直接设置行内标签的高度.宽度.行高以及顶和底边距,完全靠内容撑开宽 ...
- 块级、行内元素水平垂直居中方法
块级.行内元素水平垂直居中方法 块级元素水平垂直居中 // 为目标元素设置以下属性 position: absolute; /*top: 0;*/ left: 0; right: 0; bottom: ...
- 行转换html,块级、行内、行内元素相互转换
块级.行内.行内元素相互转换 html> 块级.行内.行内块元素相互转换 *{margin: 0px;padding: 0px;} body{background: url(images/5.j ...
- CSS块级、行级、行级块标签、display、div、span
文章目录 块级标签 行级标签 行级块标签 display div 和span 块级标签 无论内容有多少,都会占据一行; 默认宽:与父级标签一致; 默认高:0 :或者与内容高度一致. 但是可以通过 wi ...
- 13 ，CSS 入门基础,行内排版内嵌式排版和外部排版样式
1.认识 CSS 2.传统 HTML 设计网页版面的缺点 3.CSS 的特点 4.CSS 的排版样式 13.1 认识CSS CSS的英文全名是 Cascading Style Sheets,中文可翻译 ...
- CSS的引入方式：行内样式表（行内式）、内部样式表（嵌入式）、外部样式表（链接式）
文章目录 CSS引入方式 内部样式表 行内样式表 外部样式表 CSS引入方式总结 CSS引入方式 内部样式表 内部样式表(内嵌样式表)是写到 html 页面内部.是将所有的CSS代码抽取出来,单独放到 ...
- CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- Box Model,边距折叠，内联和块标签，CSSReset
一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三.内联与 ...
- CSS3与页面布局——Box Model、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
最新文章
- vs编译器 printf 控制台输出_【语言教程】通过语言了解GCC编译器工作过程
- Redis-学习笔记02【Redis命令操作】
- 使用一个命令执行单个Java源文件
- 【转】马拉松式学习与技术人员的成长性
- document.body.scrollTop值为0的解决方法[转]
- 学习笔记：工厂方法模式及简单工厂模式的对比
- C# 给picturebox添加滚动条
- VS2015 卸载与安装相关问题(包丢失以及没有WIN控制台)
- USB3.0接口定义浅析
- 想学习机器学习，数学的问题怎么解决？需要具备哪些数学知识？
- html+css实现星系图
- C++学习笔记4：编程练习一
- error怎么开机 fan_电脑开机后显示CPU Fan Error错误提示怎么办？分享六种解决方法...
- 无线局域网控制器(WLC)常见问题: FAQ
- .IMDB，THUCNews数据集下载和探索
- 2022.1.9HCIP第五天笔记
- 基于ueditor 扩展的电子病历编辑器-新UI
- 阿里P7级别架构师教你HashMap的工作原理
- 电子设备的电磁兼容性EMC测试项
- js红包雨js特效代码